Semantic elements in HTML5

Semantic elements of HTML-page and their varieties

n addition to the logical structure of site pages, the HTML version 5 specifications include semantic markup.

Semantics is a branch of philology dealing with the meaning of phrases and individual words. Accordingly, semantic elements are elements that have meaning.

Semantic element firmly denotes its function to the browser and the creator of the site. Non-semantic elements can include tags div or span – from them it is not clear what is inside. Tags form, article or table, on the other hand, are semantic elements, because they make it clear what their content should be. By now all browsers have introduced support for semantic elements in HTML version 5.

Example: A user browsing a page can see no difference between i /i and em /em tags, because in both cases the text will be italicized, but the difference is how the browser sees it. In the first case, it will simply italicize a separate piece of text, while in the second case, it will do so because the developer believes that this section should be highlighted logically.

What are some of the new semantic markup elements in HTML5?

Most modern websites, including those made in online designers, contain similar code: div id = “nav”, div id = “footer”, div class = “header”. This specifies the location of the site navigation, header (“header”) and footer (“footer”). However, now the fifth version of HTML has a new specification. Many developers call this markup “the wondrous syndrome”, because it contains an obscene number of div tags, making it difficult to read the code. The harder it is to read the code, the harder it is to fix it.

At this point in HTML version 5, there are other semantic markup elements that allow you to put parts of a web document in the right place:

  • article (article);
  • aside (sidebar);
  • details (details);
  • figcaption (alt pictures);
  • figure (picture);
  • footer (footer);
  • header (header);
  • main (main part of the page);
  • mark (marker);
  • nav (navigation bar);
  • section (section);
  • summary (conclusions);
  • time (time).

Before HTML version 5, the main markup tool was the div tag, which assigned classes and id’s to make the markup code easier to read (for example, div id=”footer”). In this way in HTML page marked the header and footer (footer and header), the panel on the side, the navigation bar and all other parts of the document.

Now in HTML there are new elements for semantic markup, allowing structuring, grouping of content, and marking the text of the articles. The tags above have made it possible to make the structure of a document clearer by eliminating the need to constantly insert the div tag (div id=”article” has become a simple article), logically separating the content of an HTML page. How these elements will look like is up to the developers and designers. There are no rules. There are only global variables:

  • meta-content;
  • streaming content;
  • sectional content;
  • header content;
  • content as text;
  • embedded content;
  • interactive content.

Global variables are attributes that are available to all code elements. All elements can use them, but not all are affected by them.

Elements of semantic markup based on the HTML5 specification

Tag header

This element denotes the header (title) of an HTML page or part of it. It is used as a container for content that the user should first encounter, but it does not have to be embedded. It can contain headers, it can wrap parts of the document, the search box or the company logo. The developer can add multiple header tags on the same page, and place them wherever he wants. Refers to the category of streaming content.

Example: in the code header was used to wrap the header, and it can contain the company logo and name.

<head>
  <meta charset="utf-8">
  <title>Semantic html elements</title>
</head>
<body>
  <header>Header and logo</header>
  <main>Content</main>
  <footer>Footer</footer>
</body>
Using the header tag in the header

Example: this element can be used to make the header of the text inside the article element stand out logically.

<head>
  <meta charset="utf-8">
  <title>Semantic html elements</title>
</head>
<body>
  <article>
    <header>
      <h1>Semantic elements in HTML5</h1>
      <p>Semantic markup of pages on a site</p>
    </header>
    <p>In addition to the logical structure of the pages of the site in the specifications of the fifth version of HTML there is semantic markup.
    </p>
  </article>
</body>
Logical highlighting of the header

However, there are elements within which this tag can not be: adress, another tag header and footer.

Tag section

This element allows you to define a section in a web page. As stated in the W3C’s HTML Version 5 reference guide: “A section is content grouped together by a particular characteristic, and in most cases is labeled with a title. Refers to streaming and sectional content categories.

This tag is a universal part of an HTML page. It gathers content into groups, and often contains a header tag. At the same time, section does not wrap data – the div already mentioned is more suitable for that. What can be its content? A table of contents, sections of articles, or a list of some events. The main page of a website can also be divided into sections – introductory information, which the new visitor must read, news and contact information. Tag section experts advise the use only if the content, located in it is clearly spelled out in the scheme of the page.

Example: Below are two sections containing the header. Each contains a statement of some sort.

<body>
  <section>
    <h1>Semantic elements of an HTML page and their variants</h1>
    <p>In addition to the logical structure, the HTML5 specifications include semantic markup.</p>
    <p>Semantic element firmly denotes its function to the browser and the creator of the site.</p>
  </section>
  <section>
    <h1>What are the new semantic markup elements in HTML5?</h1>
    <p>Most modern websites contain similar code.</p>
    <p>However, now the fifth version of HTML has a new specification.</p>
  </section>
</body>
Division of content with the tag section into two sections

Example: An article (tag article) has a header. It is also divided into two sections. Both also have subheadings and text.

<body>
  <article>
    <h1>Poems</h1>
    <section>
      <h2>Verse 1</h2>
      <p>First line<br>
        Second line<br>
        Third line<br>
        Fourth line</p>
    </section>
    <section>
      <h2>Verse 2</h2>
      <p>1st line<br>
        2nd line<br>
        3rd line<br>
        4th line</p>
    </section>
  </article>
</body>
Sectioning with the tag section

As the observant reader has probably guessed, the head tag was not used in the creation of this page. This is because the HTML Version 5 specifications do not require the head tag. However, it is always necessary to use the title tag – this is the title of the document the user will see in the tab. By the way, to display the text correctly, it is advisable to specify its language and encoding utf-8.

Tag article

This element has a standalone content. The article will be meaningful even if it is moved to another site, so it does not depend on other elements of the web page. Refers to categories: streaming content, sectional content.

This tag is used to group the main entries: blog posts, comments and articles. article is an independent block that can be used many times. It can be moved to another site and contain other tags similar in content to the main article. In the case where there is only one article with a title and some text in the document, it may not be wrapped in an article tag. It is better to use it only when its content is specified in the schema of the web page:

  • forum post;
  • blog post;
  • article in a magazine.

Example: The content in the article tag is represented by a title and two paragraphs.

<title>Semantic elements of html</title>
<body>
  <article>
    <h1>Semantic elements in HTML5</h1>
    <p>A semantic element hardwired to indicate its function to the browser and the creator of the site. Non-semantic elements include div or span tags - it's not clear from them what's inside. Tags form, article or table, on the other hand, are semantic elements, because they make clear what their content should be.  
    </p>
    <p> Before HTML version 5, the main markup tool was the div tag, which assigned classes and id's to make the markup code easier to read (e.g. div id="footer"). In this way, a HTML page was tagged with a header and footer (footer and header), sidebars, navigation bar, and all other parts of the document.
    </p>
  </article>
</body>
Content in an article: header with two paragraphs

Example: an article can have its own header and footer. The header is often wrapped by a font tag (h2) and the footer contains comments or additional links.

<title>Semantic html elements</title>
<body>
  <article>
    <header>
      <h2>Semantic elements of an HTML page and their varieties</h2>
    </header>
    <p>Semantic element firmly denotes its function to the browser and the creator of the site. Non-semantic elements can include tags div or span. Tags form, article or table are related to the semantic elements.
    </p>
    <footer>
      Posted in <a href="#">HTML</a><br>
      <a href="#">9 comments</a>
    </footer>
  </article>
</body>
Embedding the header tag in the article tag

The article and section tags are nested

The article contains self-contained content, while the section divides the web page into meaningful sections. They can also be nested inside each other. There are many HTML documents on the web with examples of such nesting: a sports newspaper may have a technical information section in every article. There are examples of using sections in which articles are nested with other article elements. The developer doesn’t have to mark up the document this way, but they have the option to do so. For example, the main content of a page is articles categorized under different headings, according to their topic. To emphasize this, each article in a section is wrapped in a separate section:

<title>Document Title</title>
<body>
  <section>
    <h2>First section</h2>
    <article>
      <h3>First article</h3>
      <p>The text of the first article.</p>
    </article>
    <article>
      <h3>Second Article</h3>
      <p>Text of the second article</p>
    </article>
  </section>
  <section>
    <h2>Second section</h2>
    <article>
      <h3>Third article</h3>
      <p>Text of the third article</p>
    </article>
    <article>
      <h3>Fourth article</h3>
      <p>Text of the fourth article</p>
    </article>
  </section>
</body>
Content arrangement using the article tag with an attachment to the section tag

Tag nav

This element of semantic markup indicates a list of navigational links. It’s important that all links in the document don’t have to be wrapped by this tag. Nav is only needed when the developer creates a main block of navigation links. Refers to categories: streaming content, sectional content.

It is used when a navigational block of an HTML document or the entire Internet resource is created, but nav is not required to be included in the title (header). There can also be several navigation blocks in a document. This tag is not a replacement for ul and ol, it only wraps them. All links do not need to be placed in nav – it is used to indicate the main navigation blocks or main sections.

Example: search engine navigation.

<h3>Menu</h3>
<nav>
  <ul>
    <li><a href="#">First page</a></li>
    <li><a href="#">Second page</a></li>
    <li><a href="#">Third page</a></li>
  </ul>
</nav>
Navigation by given sections

Example: a navigation block represented by simple links rather than a list. If needed, the header can be inside nav.

<nav>
  <h3>Navigation</h3>
  <a href="/html/">First</a> |
  <a href="/css/">Second</a> |
  <a href="/js/">Third</a> |
  <a href="/jquery/">Fourth</a>
</nav>
Navigation block with a header in the form of links

Tag footer

This is how the footer of a section or document is tagged. Often it contains information about the author, a link to the copyright owner, etc. If you mean the footer of the document, it says copyright, rules of use, contacts of administration and partners. Refers to the category of streaming content.

Each page can have several footers, for example, if the article has a separate footer. It may also have a footer for a quote, in which case it will indicate the source.

Example: a footer of an html document.

<body>
  <header>The header</header>
  <article>Contents (article)</article>
  <footer>
    Owner of the copyright
    <a href="mail"> contact </a>
  </footer>
</body>
Location of the footer tag in an html document

Example: footer of an article.

<body>
  <header>The header</header>
  <article>
    <h3>Article title</h3>
    <p>Article
    <p>
    <footer>
      author<br>
      Reviews
    </footer>
  </article><br>
  <footer>Site footer</footer>
</body>
Footer tag filling

Tag aside

It happens that the developer contributes data that supplement the main material of the page. Such footnotes are wrapped with an aside element. Refers to categories: streaming content, sectional content.

Aside gathers content into groups which directly relate to the surrounding content. Simply put, it’s a footnote. Usually aside is a sidebar and contains additional elements: ads, navigation, etc. However, it is not wrapped in the aside:

<section>
  <article>
    <header>
      <h2>Quotes from</h2>
    </header>
    <aside>
      <p> <i>The first one.</i><br>(Author)</p>
    </aside>
    <p>Second</p>
    <p>Third</p>
    <footer>
      <p><a href="comments"><i>Comments</i></a>...</p>
    </footer>
  </article>
</section>
Location in the code of the aside tag

This tag can be placed anywhere in relation to the main content. To do this, use CSS.

Figure and figcaption tags

These elements refer to the categories of stream content and root sectional content.

The figure tag is independent content that may not have a header, an independent part of the main thread. This element can be moved from article to footnotes or appendices without disrupting the flow of the page. Figure is used to add a description to graphic objects.

Example: a picture caption.

<figure>
  <img src="../img/nature.jpg" alt="Description" width="480" height="240">
  <figcaption>Advanced Description</figcaption>
</figure>
Using the figcaption tag if the alt in figure is not enough

Figure is a block element, stretching to the width of the container but including margin margins.

The figcaption tag is a descendant of figure but does not belong to any content category. It has the same width as the parent element and a default height of 18 pixels.

The img tag sets the image, and figcaption sets the caption. The result is a captioned image.

Tag main

This is the main content of the page, which should be unique and not repeated elsewhere on the Internet resource, except when the search form is the main content. Main can not be wrapped in anything. Refers to the category of streaming content.

<body>
  <header>
    <h3>The header</h3>
  </header>
  <section>
    <nav>Menu</nav>
  </section>
  <main>
    <h2>Content</h2>
    <article>Article</article>
  </main>
  <footer>Basement</footer>
</body>
The unique content of the resource located using the tag main

Tag adress

It wraps the contact information of the page or article. It can also contain the creator of the site if the tag is in body or the creator of the article if the element is in article. The browser writes this text in italics. The browser also separates this element from the rest of the content with a line break. Refers to the streaming content category.

Example: standard display options.

address {display: block;
font-style: oblique;}
<body>
  <article>
    <h3>Title</h3>
    <p>Article</p>
    <address>Author</address>
  </article>
</body>
<address>
  Creator <a href="mailto:[email protected]"> Autor</a>.<br>
  Contact Information:<br>
  https://domhtml.ru/en/<br>
  Abonet Box 9876543,<br>
  World<br>
</address>
Data available in the adress tag

Important!

  • does not wrap the mailing address if it is not contact information;
  • address is normally wrapped in the footer;
  • supports global HTML variables;
  • supports event variables.

Tag time

Sets the time and date in the Gregorian calendar in a given time zone. Refers to streaming and text content categories. The browser does not format the text in this element in any way. You can set the datetime variable to show the visitor a specific time and date:

<p>New Year's Day<time datetime="2021-01-1 00:00">January 1 is a holiday</time>.</p>
How to set parameters for the time tag

This tag does not show anything other than the specified date. Also, time can coordinate dates and times in a machine-readable way so that user-agents will suggest adding a reminder of an important date to the calendar, and for search engine optimization. The element is supported by all browsers.

Tag mark

If you wrap a text in this element, it will be highlighted in yellow (can be changed in the style sheet). Refers to categories of streaming and text content. It is used to highlight important fragments or keywords:

<p><mark>Bonus</mark> — a reward for buying a product by giving out money.</p>
Highlighting pieces of content with the mark tag

This element is also supported by all browsers.

Tags details and summary

The first element wraps additional information that the visitor can both hide and expand. It is used to create interactive widgets because any content can be included. By default the content is hidden, but if you pass the open attribute, it will be expanded when loaded.

Details supports global variables and event variables, but is not supported by all browsers. To specify a visible header details applies the tag sumary, when you click on it opens.

Sumary must be placed at the beginning of details. It also supports global variables and event variables.

<article>
  <h5>The header</h5>
  <p>Text</p>
  <details>
    <summary>Widget header</summary>
    Widget text
  </details>
</article>
Location of the summary tag for additional information in details

Validating HTML documents. Validators

After writing code, you need to check the validity based on the HTML version 5 specifications. Validity is the compliance of the code with the rules created by the World Wide Web Consortium or W3C. There are many methods to find an error. They are divided into online and local. The first checks the server on the Internet, while the second checks the developer’s computer.

https://validator.w3.org/ is the most popular validation service: they check the address, the local file and the code that was entered in the form.

Check by link: suitable for published sites. You are required to enter the page address into a special field and click Check. The system will answer whether the page contains errors. If errors are found, the developer will get a list of them with the lines.

Check files: if the page has not yet been published, you can upload the page file to the validator by clicking “Validate by File Upload”.

Source code input form: if the code has not yet been written at all, you can check it by typing in the appropriate field.

If your browser supports extensions, you can install one that does HTML validation.

Why semantic markup is necessary

In version 4 of HTML, site creators used to enter their own names to make the code clearer, but this prevented search algorithms from determining the correct content of a web page. In the fifth version there are standardized tags (header footer nav section article), which are known to search engines.

W3C claims that the semantic tags allow for reuse of data.

1 thought on “Semantic elements in HTML5”

  1. Asti

    Но следует понимать, что мы называем не все теги, которые входят в HTML5, а только те, которые отвечают требованиям, которые предъявляет браузер к семантике текста. Наличие этих тегов в HTML5 вызвано главным образом безопасностью и удобством использования.

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *