HTML semantic markup

Semantic is called markup, using tags to structure html documents that divide the code into logical blocks (explicitly showing their role and content in the structure of the web page). This kind of markup became available with the advent of HTML5, its new tags play a big role in creating an explicit logical structure of the document.

To begin with, to understand how these elements are used, we suggest that you study one of the possible page layouts:

<header>

<nav>

<h3>

<aside>

<section>

<h1>Title</h1>

<article>

<footer>

Semantic layout differs from block only by tags used in structuring the page, but unlike the semantic tags used in semantic layout, the HTML div tag, which is the main element used in block layout, does not convey a clear sense of the content contained in it, since it is just a container for grouping content.

We offer a little more detail to consider the tags that were used in the layout:

<section>

The HTML <section> tag defines the section of the page where the logically related information is located, usually having its own header.

Each section can have its own <header> and <footer> tags, which include their own headers.

<header>

The HTML <header> tag defines the top of the page or section. It can contain headers, but it is not mandatory. There is only one restriction on the use of <header> it should not contain itself and the <footer> tag.

<nav>

To create a navigation menu on a web page, a <nav> tag was added to HTML5. It is designed to contain hyperlinks leading to other pages or another part of the document.

<article>

The HTML <article> tag is used to divide a section of a page into logical blocks, the block must be linked to a common partition, but have its own meaning and be a separate logical unit of the page.

<aside>

To create a small area on the page, aside from the general content, use the <aside> tag. It is necessary for making information in a separate block, its content usually does not belong to the main topic of the page, but only gives additional information to any part of it.

<footer>

The HTML <footer> tag is used to define the footer of a page or section. It can not contain a <header> tag and define a footer in itself.

Using new tags

Although new HTML tags can be used now, they will not always be understood by older versions of browsers. In older browsers, the new HTML tags used for semantic markup are not properly supported and can be displayed as inline elements. To eliminate this problem, you will need to explicitly indicate that they are block elements:

<style>
  section, header, nav, article, aside, footer { display: block; }
</style>

In newer versions of browsers, this code will not have any effect on displaying tags on the web page, but it will serve as a backup option for correctly displaying tags in older versions of browsers, which, as practice shows, can be used by users for a long time.

Unfortunately, the presented CSS code will not be able to help Internet Explorer 8 browser and its earlier versions correctly display semantic tags. For correct processing of new semantic tags in all older versions of IE, we will have to resort to the help of JavaScript. Just add the following code to the <head> element, and the old versions of IE will correctly handle the new elements:

<script>
  document.createElement("section");
  document.createElement("header");
  document.createElement("nav");
  document.createElement("article");
  document.createElement("aside");
  document.createElement("footer");
</script>

With this theme look:

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011 - 2021 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen