All geek questions in one place

HTML5 semantics: where does the main content belong?

Every time I create an HTML5 page, I struggle with where to put the title of the main page. All the seams to handle it differently ...

Here is the situation:

Say I have a website called Meo Adventures. On this site there is a page called "Abracadabra Semantics" with a subtitle, which is not important, for example, "lorem ipsum delor"

There is also a navigation system located on top of the site, a footer and some content.

In HTML 4.0, I would do it like this:

- div.header + div.nav + a.siteName: "Meo frontend adventures" - div.contents + h1.pageTitle: "Abracadabra Semantics" + strong.lead: "lorem ipsum delor" - div.cn + h2 + p + etc.. + div.footer +ul.footerNav

Now in HTML5 basically every element of the structure gets H1 . Where should I put the title of the actual page?

I would do this:

 - header + h1.siteName: "Meo frontend adventures" + nav - section.contents - header -hgroup + h1: "Abracadabra Semantics" + h2: "lorem ipsum delor" - article - header +h1.ArcticleTitle + p + etc.. - footer + nav

I am not sure whether to put the title of the actual page in the main section or if it should be in the title of the document. I just did it from my old thinking of HTML4.

It would be more logical for me to put it in the title of the document, since this page is devoted to this topic. But in every example I found, the page title is in the main section, and the website title is in the title.

In HTML 4, it's easy to solve: H1 = theme name. But this is not very clear to me in HTML5.

How does Google or a screen reader determine what a content title is? What structure would you use?

+6
source share
3 answers

An interesting question to which I will contrast the answer: how do you view the title?

Let's say that the question in question refers to a common document. In this case, we semantically place this text in the title of the document. However, the page name may be different. If we consider the title of the page that will be associated with the content (for example, if Abracadabra Semantics leads the article itself), then it belongs not as a child of the page, but as a child of the article or section. So, in this case, our HTML code might look like this:

 <!-- Head stuff here --> <body> <header> <h1>Meo frontend adventures</h1> <h2>Lorem Ipsum Dolor Sit Amet...</h2> <nav> <!-- ul of navigation items --> </nav> </header> <section> <header> <h1>Abracadabra Semantics</h1> <h2>Lorem Ipsum Dolor Sit Amet...</h2> <!-- optional introductory text --> </header> <article> <p>Lorem Ipsum Dolor Sit Amet...</p> </article> <!-- Other potential related articles --> </section> <!-- Possible footer --> </body>

Semantically, we organize a page in a hierarchy. The tag above tells us what this header belongs to (or a child tag of any kind). In this case, we can have two header elements (one of which contains an introduction to the site, and the other contains an introduction to the section).

However, not everyone views this set of semantics in the same way. For example, they may treat a single page as the section in question, so they may include the page title in the title. Or their separation may be their dominant element, and the title may be the first child of the section. This is a point of view on your assessment of the content. Screen readers organize a site based on what order you put in the document; however, not everyone will do it the same way. HTML4 has forced some screen reader developers to consider CSS positioning, but HTML5 is trying to fix this by adding more semantic elements to reorganize your site.

In any case, now that you have been shown what you can do and how it works, you can make your own decision. Think about how you understand your content in the relationship with the content around it and organize it accordingly.

Just to help you a little further, take a look at the spec: http://www.w3.org/TR/html-markup/header.html

+5
source

The title of the actual page should remain at the top of every other title.

Then, if you have different headings for different paragraphs or sections of the page, you can write them before the relevant content, following the text stream.

Basically, you can place tags so that even without formatting, the text would still be correctly readable. For example, the title of the page first, then the title of the paragraph and the text of the paragraph, repeated for each paragraph.

0
source

It is interesting to read on this topic: http://www.iheni.com/html-5-to-the-h1-debate-rescue/

Using HTML5, each element can have its own H1 and, in turn, the hierarchy and nesting of each section element determines the header level of each H1. Looking at the example above, H1 inside the rank will be higher than H1 contained within it.

0
source

Source: https://habr.com/ru/post/895950/

More articles:


All Articles