Introduction to HTML Elements

In this lesson, we are going to explore the different HTML tags, their purposes, and how to use them effectively in your web applications. We will discuss some of the most commonly used HTML tags and their corresponding attributes.

The paragraph tag

The paragraph is probably the most commonly used HTML element, which is defined by

. It is a block-level element, meaning each paragraph will start on a new line.

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

Without the

element, your browser will automatically ignore the extra white spaces and render the text in a single line.

<!-- prettier-ignore -->

  This is the first paragraph.
  This is the second paragraph, which starts on a new line.

Visit Code Demo ↗

You'll need to use the
element if you want a line break inside a single paragraph element. This is one of those HTML elements that does not require a closing tag.

  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

Visit Code Demo ↗

The heading tags

When writing an article, it is good to add headings between paragraphs to make the article more organized. An HTML document works the same way. HTML offers six different levels of headings from

to

.

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

Visit Code Demo ↗

In most cases,

to

should be sufficient when creating webpages, and generally, we recommend not using headings that are too small, such as

and

, as they would make the structure of your webpage unnecessarily complex.

is the top heading, and it plays a special role in the webpage. There should only be one

element in each HTML document, and it should summarize the entire page.

Formatting elements

Sometimes, you may want to emphasize specific words and paragraphs by giving them different formats, such as making them appear bold, italic, or underlined. HTML provides formatting elements that can help achieve this effect.

<b></b>
<strong></strong>

<i></i>
<em></em>

<mark></mark>

<small></small>

<del></del>
<ins></ins>

<sub></sub>
<sup></sup>

Visit Code Demo ↗

• The and elements have the same effect. They both make the enclosed text appear bold.

<p>
  Lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

Even though they have the same appearance, as shown in the CodePen demo, they serve different purposes for browsers and search engines.

only makes the text bold without adding any particular meaning, while indicates the enclosed texts have substantial importance.

• The and elements are similar. They both turn the text into italic form. does not indicate any special meaning, while defines an emphasized text, displayed in italic form.

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

• The element defines highlighted/marked texts.

<!-- prettier-ignore -->

  This is the first paragraph.
  This is the second paragraph, which starts on a new line.

• The element defines small text.

  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

• The element indicates deleted text, displayed by adding strikethrough across the enclosed text. On the other hand, the element is used to indicate inserted text, which is displayed as underlined text.

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

• The _{and ^{elements defines subscript and superscript respectively.}}

<b></b>
<strong></strong>

<i></i>
<em></em>

<mark></mark>

<small></small>

<del></del>
<ins></ins>

<sub></sub>
<sup></sup>

How to add styles to HTML elements

Sometimes, the default representations of these formatting elements are inadequate to express their intended meanings.

For example, the element indicates deleted texts with a strikethrough, which is easy to understand. However, the element uses underline to represent insertions, which can be very confusing.

To improve the default appearance of these elements, you can use a style attribute like this:

<p>
  Lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

By default, the Introduction to HTML Elements will be underlined and displayed in blue, and when you click on it, you will be taken to the Introduction to HTML Elements specified by the href attribute.

To demonstrate, create a Introduction to HTML Elements.html file in your work directory.

<p>Lorem ipsum <i>dolor sit</i> amet consectetur <em>adipisicing elit</em>.</p>

<p>Lorem ipsum <mark>dolor sit</mark> amet consectetur adipisicing elit.</p>

And then, add a Introduction to HTML Elements in your index.html file that points to the Introduction to HTML Elements.

<p>Lorem ipsum <small>dolor sit</small> amet consectetur adipisicing elit.</p>

You will be taken to the Introduction to HTML Elements.html document when you click on the Introduction to HTML Elements.

You can also add a Go Back Introduction to HTML Elements in the Introduction to HTML Elements.html to take you back to index.html.

<p>
  Lorem ipsum <del>dolor sit</del> amet <ins>consectetur adipisicing</ins> elit.
</p>

These interconnected Introduction to HTML Elementss form the internet we see today.

By default, the Introduction to HTML Elementsed Introduction to HTML Elements will be opened in the same window. You can change that behavior by setting a target attribute. For example, target="_blank" opens the Introduction to HTML Elements in a new tab.

<p>
  Lorem ipsum <sub>dolor sit</sub> amet <sup>consectetur adipisicing</sup> elit.
</p>

Visit Code Demo ↗

Another thing you may have noticed is that the Introduction to HTML Elements is initially displayed in blue. The moment you click on it, it turns red. Afterward, the Introduction to HTML Elements becomes purple, indicating that the Introduction to HTML Elements has been visited before.

This behavior has to do with a concept called the pseudo-class, which allows you to define different styles for an element under different conditions. We will revisit this topic when we talk more about CSS.

Lists

Visit Code Demo ↗

There are three different types of lists in HTML: ordered, unordered, and description lists.

Ordered lists are defined with the

element, and each individual list item is created with
1. .
   

     <p>This is the first paragraph.</p>
     <p>This is the second paragraph, which starts on a new line.</p>
   
   

   Unordered lists are defined with the

   element.
   

   <!-- prettier-ignore -->
   
     This is the first paragraph.
     This is the second paragraph, which starts on a new line.
   
   

   Description lists are a bit more complex, as they consist of a list of items and a description for each item. The description list is defined with the

   element, each list item is defined with

   , and each description statement is defined with

   .
   

     <p>
       This is the first paragraph.<br>
       This is the second paragraph, which starts on a new line.
     </p>
   
   

   Layout elements

   So far, we've only been discussing elements used to display content, such as texts, lists, and images. In fact, there is another category of elements in HTML in charge of organizing these elements.

   They are not designed to display any specific type of content, but instead, they act as a container for other elements. When combined with CSS, they can create different layouts for the webpage. Some of the commonly used layout elements are shown in the list below.

   • : Defines a header section for the document, usually located at the top of the webpage.
   • : Defines a navigation bar. For most webpages, it is located at the top with the header, but some developers put it on the side of the page.
   • : Defines a section for the document.
   • : Defines an independent section in the webpage.
   • : Content aside from the main content, such as a sidebar.
   • : A footer section located at the bottom of the webpage.
   • : Creates a tab that the user can open and close.
   • : Creates a heading for the

     element. It should be placed inside the

     element.

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

   Visit Code Demo ↗

   • : And, of course, the most important layout element,

     , which stands for division. It is a generic element that creates a block in the webpage and does not serve any special purposes.

     This is the most commonly used layout element, because for real-life webpages, most sections and blocks do not match any of the semantic elements mentioned above. As a result, many developers like to use

     for creating page layouts.
     

       <p>This is the first paragraph.</p>
       <p>This is the second paragraph, which starts on a new line.</p>
     
     

     

     Notice that the

     element always starts on a new line and takes up as much horizontal space as possible. On the other hand, the element does not start on a new line and only takes up as much space as necessary.

     This is, in fact, the difference between the block elements and inline elements.

     Most of the elements we mentioned so far are block elements, such as

     ,

     ,

     to

     ,

   • , etc. Without extra styles defined, they will automatically take up as much horizontal space as possible.

     The element is an example of an inline element. It only takes up as much space as necessary when placed along side other elements. And the width and height attributes will have no effects on it.

     There are many other elements, both block and inline elements available in HTML. It is impossible to discuss all of them in one lesson, but here is a reference of all HTML elements from W3Schools if you are interested.

     Further readings

     • How to Use CSS Selectors
     • What are the Semantic HTML Code?
     • How to Center A Div in CSS