HTML - Tags & Elements

1st February 2020 | Christopher Pisani

HTML documents contains a group of sections to build a website. These sections are called elements. Elements are composed of a starting tag, such as <body>, and an end tag, such as </body>. By looking at the image below, you can follow more easily.

Elements structure

Elements are placed within elements, taking for example the following, <div>, <a>, <span>, <article>,<section>, <main>, <header>, <footer>, <aside>, they can be used as a container to store other elements and data, but every element should be used according to specification.

All elements in HTML, play an important role in a website, and they will reflect how search engines read the information, to improve search results ranking. Read carefully on each element, what it is used for, to have a well presented website.

A working example of an article :

<!-- The appearance is good, but using the wrong elements -->
<div>
    <h1>Rural Mail Delivery Experiment</h1>
    <p>
        Within two years a man standing in Indianapolis will be able to put his finger on every farmhouse in Indiana - that is, on the map, says the Indianapolis News. This is one of the details of the rural mail delivery experiment that the government is working out in Indiana.
    </p>
    <span>Michigan City Evening Dispatch (Indiana), September 2, 1903</span>
</div>

The right way of using elements for this article :

<!-- A well presented HTML code -->
<article>
    <h1>Rural Mail Delivery Experiment</h1>
    <p>
        Within two years a man standing in Indianapolis will be able to put his finger on every farmhouse in Indiana - that is, on the map, says the Indianapolis News. This is one of the details of the rural mail delivery experiment that the government is working out in Indiana.
    </p>
    <footer>
        <p>
            Michigan City Evening Dispatch (Indiana)
            <time datetime="1903-09-02 19:00">September 2, 1903</time>
        </p>
    </footer>
</article>

Understanding nested elements

Elements should never cross other elements. An element should always stay inside an element. See the below examples to understand better.

The correct way of nesting elements :

<!-- This is the correct nesting method -->
<p>This <em>is <strong>correct</strong> </em></p>

The wrong way of nesting elements :

<!-- The <strong> element overlapping <em> element -->
<p>This is <em>very <strong>wrong</em>!</strong></p>

Note: For a full list of tags in html5, and what each do, can be found under the menu HTML >> HTML Tags