Correct HTML5 page structure, new semantic tags

06.07.18 IT / Html 7153

With the advent of a new version of HTML, it has become possible to layout pages in a new way. Namely, HTML5 introduces new semantic tags that clearly highlight parts of the page and make its structure completely transparent. What are these tags and why is it important to use them in layout?

Previously, a page could be laid out in any way, for example, by simply placing divs. In this case, the semantic meaning was calculated by search engines and other services using classes and identifiers. Nowadays, the latest tags are solving this problem. In addition to semantics, tags help build the look of a modern web application or site more completely.

According to the HTML5 specification , each new tag is assigned to a specific category (0 or more) of content. Let's list these content categories:

• Meta,
• Header,
• Text,
• Streaming
• Sectional,
• Inline,
• Interactive.

As you can see, there are very few categories. These conditional divisions into categories are necessary for a clearer structuring of tags. Let's list the tags themselves: header, nav, article, section, aside, footer, address, main, figure, figcaption, time, mark, bdi, wbr . In addition to these tags, you also need to remember about the elements for describing East Asian characters: ruby, rb, rt, rtc, rp . Below is a quick look at the new tags, with the title and content category in parentheses.

Header tag (streaming)

This tag allows you to group navigation and introductory elements. You can place at will, as many of these tags or none, in any part of the page. You cannot nest within the footer and address tags, or within the header tag itself.

The nav tag (streaming, sectional)

As you can see from the name of the tag, it is used to create a navigation block, various menus and link blocks. Can be used multiple times on a page.

The article tag (streaming, sectional)

The tag is intended for grouping articles on a page, it should be used if several articles are placed on one page, but if there is only one article, then you can not use this tag.

The section tag (streaming, sectional)

The tag is intended for dividing the page into parts and sections, highlighting certain sections on the page. For example, you can create an article section, a comment section, a gallery section, etc. on one page.

The aside tag (streaming, sectional)

This tag allows you to highlight any page content into a separate logical part, for example, you can use it to create a side column, like in a book.

The footer tag (streaming)

The tag is used to create a footer on the site, the place where information about the site is usually placed, copyright, etc. Can be used multiple times on a page.

The address tag (streaming)

The tag is useful for creating a block with address information, especially important for promotion in search engines. Content in this tag is usually italicized by browsers.

The main (streaming) tag

The element can be used to define the main body of the page, cannot be a descendant of tags: article, aside, footer, header, nav .

The figure tag (streaming, root)

This tag is used to highlight offline content, for example, it can be used to create a block containing a photo and a description for it.

The figcaption (-) tag

tag is a descendant of the figure tag and allows you to place a description or caption, as well as other information to the desired element on the page.

time tag (streaming, text)

An important tag that allows you to enter a date and time. This can be useful for search engines as well as users. With the advent of this tag, it became possible to set the date in standard time formats.

The mark tag (streaming, text)

The tag allows you to highlight content on the page with color, like a marker on paper. This is usually yellow, but you can change the color with styles.

The bdi tag (streaming, text)

The tag separates text that can be read from left to right and vice versa.

The wbr tag (streaming, text)

A single tag allows you to specify where the browser can break a long line.

Thus, the new tags allow for efficient page layout, which is extremely important for search engine promotion and for the use of web pages in various services.