Simple HTML tags

Photo by Jackson Sophat on Unsplash

Headings

Headings allow you to display titles and subtitles on your webpage.

<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
</body>

Paragraphs

Paragraphs contain text content.

<p>
   This paragraph
   contains a lot of lines
   but they are ignored.
</p>

Line Breaks

As you’ve learned, line breaks in the paragraph tag line are ignored by HTML. Instead, they must be specified using the <br> tag. The <br> tag does not need a closing tag.

<p>
   This paragraph<br>
   contains a lot of lines<br>
   and they are displayed.
</p>

Strong

Strong tags can be used to indicate that a range of text has importance.

<p>
   No matter how much the dog barks: <strong>don't feed him chocolate</strong>.
</p>

Bold

Bold tags can be used to draw the reader’s attention to a range of text.

<p>
   The primary colors are <b>red</b>, <b>yellow</b> and <b>blue</b>.
</p>

Emphasis

Emphasis tags can be used to add emphasis to text

<p>
   Wake up <em>now</em>!
</p>

Italics

Italics tags can be used to offset a range of text.

<p>
   The term <i>HTML</i> stands for HyperText Markup Language.
</p>

Lists

You can add lists to your web pages. There are two types of lists in HTML.

Get ibrahimcanerdogan’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Lists can be unordered using the <ul> tag. List items are specified using the <li> tag, for example:

<ul>
   <li>Tea</li>
   <li>Sugar</li>
   <li>Milk</li>
</ul>

<ol>
   <li>Rocky</li>
   <li>Rocky II</li>
   <li>Rocky III</li>
</ol>

Div tags

A <div> tag defines a content division in a HTML document. It acts as a generic container and has no effect on the content unless it is styled by CSS.

The following example shows a <div> element that contains a paragraph element:

<div>
   <p>This is a paragraph inside a div</p>
</div>

It can be nested inside other elements, for example:

<div>
   <div>
      <p>This is a paragraph inside a div that’s inside another div</p>
   </div>
</div>

As mentioned, the div has no impact on content unless it is styled by CSS. Let’s add a small CSS rule that styles all divs on the page.

Don’t worry about the meaning of the CSS just yet, you’ll explore CSS further in a later lesson. In summary, you’re applying a rule that adds a border and some visual spacing to the element.

<style>
   div {
      border: 1px solid black;
      padding: 2px;
   }
</style>
<div>
   <div>
      <p>This is a paragraph inside stylized divs</p>
   </div>
</div>

Comments

If you want to leave a comment in the code for other developers, it can be added as:

<! - This is a comment →

İbrahim Can Erdoğan

LINKEDIN

YOUTUBE

UDEMY