Guide Part 1: HTML Structural Elements
I’ve been reading the last days some interesting and divergent point of view about the elements created in the HTML5. There are many articles supporting and explaining the benefits of a clear semantic structure. However, I also found some opinions on the dark side. Texts exploring the problems, absence of clarity in the specs documents, and the confusion that it has caused to the developers. Some extreme opinions even said that we should not use them. Well, maybe the most common when the life present you two sides of an idea is to fall for one of them. The one with more similarities to your way of thinking, or the one you think that better rationalize their arguments. But if you are a newbie, as I’m when talking about HTML practices, it is better to make sure you understand both points of view.
The HTML5 new elements have some problems, there is some absence of clarity in the use: when to use, how to use, why to use. The documentation will not make the whole world light and neat. But I would get in the furthest edge and said that you don’t need to use them at all. How I said, I’m not an expert. I’m really really far from that. And if you allow me to give you an advice, it is that: GET TO KNOW THEM. The only way to clearly ensure you are doing a good decision about use or not an available tool is to try it.
Read why it was made, put it in practice, try in one way, try again in another. See what the practical use replies to you. Did it improve your webpage behavior on search engines? Did it improve the accessibility give more insights to the screen readers? Did your team could product faster with a clear semantics? If you are not tracking all these and others answers that the data from your pages are giving back to you it is impossible to have a position in this topic. For the beginners like me, read and practice the most you can. Knowing the documentation is the first step before you start ignoring it. If you choose to do.
Enough of talk, let’s understand which are the structural elements that you can use to build your HTML page. What the specifications say about them and some extra options that I found on the way.
<html>
The <html> is called the root element because is the outer container for all the others elements. If the exception of the <!DOCTYPE> . It is not an element created in the HTML5 version. It might be used with the [lang](https://www.w3.org/TR/html53/dom.html#element-attrdef-global-lang) attribute specifying the primary language of the document.
<html lang="en">
<head>
The <head> element provides information about the document [metadata], and it is unique for each HTML file. It is the first element in the <html> tag. In the <head> usually we can find one or many metadata contents indented, the only required one is the <title> element that must be used only once.
parent: <html> content: <title> [required], <link>, <meta>, <style>, <script>, <noscript>, <base>, <object>, <template>version: HTML 2 / 3.2 / 4 / 4.01 / 5
<body>
The <body> represents the content of the document, everything that will be displayed on the screen. As the <head> tag, it should be used just once. It is the second indented element inside the <html> tag.
parent: <html>content: blocks, inline, and text elementsversion: HTML 2 / 3.2 / 4 / 4.01 / 5
<header>
The <header> tag can be used in the header of the document [indented as the first element in the <body> ], or in any other part of the HTML document. This is when the things get a little confused. The <header> definition is to introduce the content of its element nearest ancestor. But when it is used inside the <body> represents an introductory content for the whole document.
ALERT! Take care when using <header> in many parts of our document. There are others tags as <h2> and <h3> that can header a section without the necessity to indent tags inside it. So, think about what do you need and what will make your code clear for others to read the semantics.
placement: blockcontent: blocks, inline, and text elements*Except for _<footer>_ and itself.**version:** New in HTML5
<[footer](https://www.w3.org/TR/html53/sections.html#the-footer-element)>
The <footer> has the same versatility as the <header>. It can be used as a footer of the whole document, with information about the author of the document, copyright data or links to related documents. Yet it can be used inside any section tag, representing the footer information of its nearest ancestor.
ALERT! The same attention implied for the <header> is valid for the <footer> . Do not overuse it, review the semantics in our HTML documents to make it simple and clear. It not just for the others that are going to work with the same document, but ask yourself: “Could I understand it document if I encounter it some years in the future?”
placement: blockcontent: blocks, inline, and text elements*Except for _<header>_ and itself.**version:** New in HTML5
<section>
The <section> it is a generic section of a document or application. You should keep in mind that the <section> tag works is to group some specific content. Which it is the same for the <header> and <footer> , but with less semantic comprehension. So, if you need to aggregate some content and you didn’t find a specific semantic element to represent it, the <section> could be a good one.
placement: blockcontent: blocks, inline, and text elements**version:** New in HTML5
<article>
The <article> represent a section of content that by itself is an independent part of the HTML document. It can be a post, article, or another self-contained unit, representing some information that may be linked to or included in some other content body.
placement: blockcontent: blocks, inline, and text elements**version:** New in HTML5
<aside>
The <aside> element is used to represent a content that is not exactly related to the page content, something a part of it. Its frequently used for sidebars, call-out boxes, and for a block of advertising. The main idea is to make clear that the content inside the tag is something separate from the page content.
placement: blockcontent: blocks, inline, and text elements**version:** New in HTML5
<nav>
The <nav> represent a section of navigation links that could be in the current document or other documents. The semantics of the element is useful when announcing navigation links relevant to the main content or related content.
ALERT! Even if there are no rules saying that you cannot use multiples <nav> tags, it is not always necessary to make use of the element every time you include navigation links in some section.
placement: blockcontent: blocks, inline, and text elements**version:** New in HTML5
<div>
The <div> is the short for “division”. The element represents a generic container. It is used when you need to define a structural section of a document, for example, to apply a different layout to this section using CSS. As the tag doesn’t represent anything semantically, except for a container itself. It should be used when there is no other better semantic element to represent the block of content.
placement: blockcontent: blocks, inline, and text elements**version:** HTML 2 / 3.2 / 4 / 4.01 / 5
<main>
The <main> represents the dominant content and must be used just once in the document. All the content that is replicated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms should not be included in the <main> tag.
parent: <html> , <body> and <div> content: blocks, inline, and text elements**version:** New in HTML5
<h1> to <h6>
The heading tags have six levels, from <h1> [the most important] to <h6> [the least important]. They should be used to rank of heading elements to create the document outline, not for styling the document. One good advice when using the heading tag was given by Nicole Sullivan, think about them as when you write a text for the high school:
THE TITLE IS THE H1I. Big roman numerals are the H2sA. This is an h3B. This is also and h3i. Now we have an h4ii. And another h4II. Big roman numerals are the H2sIII. Big roman numerals are the H2sIV. Big roman numerals are the H2s
ALERT! These are the most used elements for navigation when talking about accessibility, you can check the WebAIM report from October 2017. So, don’t fill your document with many <h1> or make use of lower levels to decrease heading font size [CSS property [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size "The font-size CSS property sets the size of the font.") can do a better job with that].
placement: blockcontent: inline and text elements**version:** HTML 2 / 3.2 / 4 / 4.01 / 5
<p>
The <p> tag is used to define a paragraph, as a block of content. It shouldn’t be used when a more specific element, such as a list, is not more appropriate.
ALERT! <p> can’t contain block elements, as <p> itself. Remember that empty paragraphs are ignored by the browsers, don’t use an empty<p> to create blank lines.
placement: blockcontent: inline and text elements**version:** HTML 2 / 3.2 / 4 / 4.01 / 5
<span>
The <span> is an inline element that doesn’t mean anything on its own. It’s useful to define some specific part of the text needs to have a different style that can be worked in the CSS, or to share attribute values, such as lang. It very similar to the <div> element in usability, but different from <div> it is a inline element.
placement: inlinecontent: inline and text elements**version:** HTML 2 / 3.2 / 4 / 4.01 / 5
Photo by Daniel Cheung on Unsplash
I hope I helped you in some way. If you want to read more about the topic here is a list of relevant website that I used to extract this content:
HTML 5.3 Specs_This specification defines the 5th major version, a third minor revision of the core language of the World Wide Web: the…_www.w3.org
HTML Elements_Well organized and easy to understand Web-building tutorials with lots of examples of how to use HTML, CSS, JavaScript…_www.w3schools.com
HTML elements reference_This page lists all the HTML elements, which are created using tags._developer.mozilla.org
HTML Tags Vs Elements - Tutorial Republic_An HTML element represents an individual component of an HTML document - For example, the title element represents the…_www.tutorialrepublic.com
I’m Sue, the girl learning tech. If you want to know more about me, and why I’ve been writing in Medium read here.
For some other contents that I wrote related to this topic:
The Basic HTML5 StructureFront-end, Back-end, and Full-stack, What is the difference?It’s My Story. A STEM Girl With Dreams And Fear.