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 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 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. dark side. you think 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 is called the because is the outer container for all the others elements. If the exception of the . It is not an element created in the HTML5 version. It might be used with the attribute specifying the primary language of the document. <html> root element <!DOCTYPE> [lang](https://www.w3.org/TR/html53/dom.html#element-attrdef-global-lang) <html lang="en"> < > head The element provides information about the document [metadata], and it is unique for each HTML file. It is the first element in the tag. In the usually we can find one or many metadata contents indented, the only required one is the element that must be used only once. <head> <html> <head> <title> [required], , , , , , , , parent: <html> content: <title> <link> <meta> <style> <script> <noscript> <base> <object> <template> version: HTML 2 / 3.2 / 4 / 4.01 / 5 < > body The represents the content of the document, everything that will be displayed on the screen. As the tag, it should be used just once. It is the second indented element inside the tag. <body> <head> <html> blocks, inline, and text elements parent: <html> content: version: HTML 2 / 3.2 / 4 / 4.01 / 5 < > header The tag can be used in the header of the document [indented as the first element in the ], or in any other part of the HTML document. This is when the things get a little confused. The definition is to introduce the content of its element nearest ancestor. But when it is used inside the represents an introductory content for the whole document. <header> <body> <header> <body> Take care when using in many parts of our document. There are others tags as and 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. ALERT! <header> <h2> <h3> block blocks, inline, and text elements **version:** placement: content: *Except for _<footer>_ and itself. New in HTML5 <[footer](https://www.w3.org/TR/html53/sections.html#the-footer-element)> The has the same versatility as the . 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. <footer> <header> The same attention implied for the is valid for the . 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: ALERT! <header> <footer> “Could I understand it document if I encounter it some years in the future?” block blocks, inline, and text elements **version:** placement: content: *Except for _<header>_ and itself. New in HTML5 < > section The it is a generic section of a document or application. You should keep in mind that the tag works is to group some specific content. Which it is the same for the and , 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 could be a good one. <section> <section> <header> <footer> <section> block blocks, inline, and text elements**version:** placement: content: New in HTML5 < > article The 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. <article> block blocks, inline, and text elements**version:** placement: content: New in HTML5 < > aside The 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. <aside> block blocks, inline, and text elements**version:** placement: content: New in HTML5 < > nav The 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. <nav> Even if there are no rules saying that you cannot use multiples tags, it is not always necessary to make use of the element every time you include navigation links in some section. ALERT! <nav> block blocks, inline, and text elements**version:** placement: content: New in HTML5 < > div The is the short for “ 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. <div> division”. block blocks, inline, and text elements**version:** placement: content: HTML 2 / 3.2 / 4 / 4.01 / 5 < > main The 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 tag. <main> <main> , and blocks, inline, and text elements**version:** parent: <html> <body> <div> content: New in HTML5 < > h1> to <h6 The heading tags have six levels, from [the most important] to [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 , think about them as when you write a text for the high school: <h1> <h6> Nicole Sullivan 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 These are the most used elements for navigation when talking about accessibility, you can check the . So, don’t fill your document with many or make use of lower levels to decrease heading font size [CSS property can do a better job with that]. ALERT! WebAIM report from October 2017 <h1> [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size "The font-size CSS property sets the size of the font.") block inline and text elements**version:** placement: content: HTML 2 / 3.2 / 4 / 4.01 / 5 < > p The 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. <p> can’t contain block elements, as itself. Remember that empty paragraphs are ignored by the browsers, don’t use an empty to create blank lines. ALERT! <p> <p> <p> block inline and text elements**version:** placement: content: HTML 2 / 3.2 / 4 / 4.01 / 5 < > span The 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 . It very similar to the element in usability, but different from it is a inline element. <span> lang <div> <div> inline inline and text elements**version:** placement: content: HTML 2 / 3.2 / 4 / 4.01 / 5 Photo by on Daniel Cheung 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: _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 5.3 Specs _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 _This page lists all the HTML elements, which are created using tags._developer.mozilla.org HTML elements reference _An HTML element represents an individual component of an HTML document - For example, the title element represents the…_www.tutorialrepublic.com HTML Tags Vs Elements - Tutorial Republic 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 Structure Front-end, Back-end, and Full-stack, What is the difference? It’s My Story. A STEM Girl With Dreams And Fear.

Mozilla

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

The First HTML Elements To Get You Started

Too Long; Didn't Read

Companies Mentioned

girl learning tech

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

The First HTML Elements To Get You Started

Too Long; Didn't Read

Companies Mentioned

girl learning tech

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES