I just read about the header tag not being equal to section. The author says, header should not be used outside a section, but he doesn't tell us, how the sites header and footer have to look like. Are they sections? Divs maybe? Or does body count as a section and I can use header and footer like I used to?
The header is the page title. In HTML5, there is a new tag named <header> that is used to format this section. The header usually contains the site name and logo, maybe a notice, and sometimes the page name for simple, one-page sites. A <section> is a block of content in the page. A header is basically a special section with a tag just for it because it is so common in webpages, similar to how <nav> is a special section on the page just for navigation links, but is not put in a <section> tag.
From w3c
A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
From my understanding of this, headers just group together elements to identify them as part of a header. The appearance is determined by the elements within the header.
Related
Beginner here.
In HTML, I have tried leaving the main tag outside the body tag as opposed to the proper way with HTML5 to nest the main tag inside the body tag.
It looks the same to me when I opened the HTML file to compare the two.
<body></body>
<main></main>
<body><main></main></body>
I understand that in HTML5 main tag is supposed to be a part of the body tag but are there any others specific reasons why the main tag is supposed to be nested inside body tag?
What are the impacts if I just leave main outside body? How does it affect the functionality of my code?
The first sentence of the MDN page on <main> states
The <main> HTML element represents the dominant content of the <body> of a document.
So <main> is intended to be used as a part of <body>, hence within it.
The first example is completely invalid. The second is correct. Your content must be within the body of the document.
The <main></main> tag can only be used once per page, it represents the central topic or core content of the document body and is considered an HTML 5 block element.
The second is valid
<body>
<main>
</main>
</body>
The <body> tag is meant to contain all of the visible content of your web page. In contrast, the <head> tag contains meta data about your web page, or to help your web page render correctly (stylesheets, meta data, title, etc...).
As far as I know, there isn't really a good answer for why the content goes in the <body> tag, other than that's where is is supposed to go, so that's where search engines, browsers, and other bots expect it to be.
More information on the <body> tag:
https://www.w3schools.com/tags/tag_body.asp
The <main> tag is meant to contain the main content of your web page and should only appear once. Think of it as a <div> tag except it has some additional meaning to help search engines to better understand your web page.
More information on the <main> tag:
https://www.w3schools.com/tags/tag_main.asp
To answer your main question, if your HTML is not structured properly, it will likely still render as you expect it to (browsers are quite forgiving when it comes to visuals). However, search engines and other bots will have a more difficult time understanding your web page properly.
The body tag contains ALL the elements of your HTML code including your header, footer, navigation, etc. The main tag, as introduced in 2021 by Steve Faulkner, is a part of the body tag and cannot be placed elsewhere.
In addition, you cannot have several main tags either. Make note that you cannot place your header nor footer in the main tag. The main tag can only consist of essential elements and information. These elements and information cannot be repeated elsewhere in your code. The main tag helps developers understand where the actual code begins.
The HTML code validator would display an error if
the main tag is not placed correctly in the body
or, multiple main tags are used
or, if the header or footer is part of the main tag
or, if the main tag is a descendant of the header, nav, article, aside, or footer elements
as the main tag is not meant to be used to section content or otherwise. Therefore, all of the above would be semantically incorrect.
< html >
This element wraps everything (other than the doctype) in your web page.
< head >
This element designates the header portion of your document, which includes some information about your web page. The first detail is the title—open your page in a browser, and this title shows up as the caption on the tab.
< body >
This element holds the meat of your web page, including the actual content you want to be displayed to the world.
So your second one is the correct way to use because of the HTML5 Semantic Tags Structure:
<body></body>
<main></main>
Also, I found this article explain more about HTML tag: https://www.semrush.com/blog/semantic-html5-guide/
Concerning ARIA, it seems that the heading should come first, before the main tag, and focus the content of a particular webpage. Or should the main tag come before the heading?
The <main> tag specifies the main content of a document.
The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms. W3Schools main tag
I guess the heading is repeated content, so put that before the <main> tag.
Yet your title states before or after <h1> heading, it all depends on the value of <h1> (does it get repeated or not?)
I have a main image at the top of the page. For simplicity working with my stylesheet/layout, I have it in it's own section:
<section class="container page-intro boxed-none">
<figure>
<img class="width100" src="article-image.png" alt="Template Article" />
</figure>
</section>
When I use the W3C validator, it suggests that a section have a heading. Is it proper markup to have my HTML like this, or should it be modified?
It's suggested that you always use a heading in your <section> but if you want you don't have why to use it.
Here is some basic information on how each of the major HTML5 tags can/should be used (I suggest reading the full source linked at the bottom):
section – Used for grouping together thematically-related content.
Sounds like a div element, but it’s not. The div has no semantic
meaning. Before replacing all your div’s with section elements, always
ask yourself: “Is all of the content related?”
aside – Used for tangentially related content. Just because some
content appears to the left or right of the main content isn’t enough
reason to use the aside element. Ask yourself if the content within
the aside can be removed without reducing the meaning of the main
content. Pullquotes are an example of tangentially related content.
header – There is a crucial difference between the header element and
the general accepted usage of header (or masthead). There’s usually
only one header or ‘masthead’ in a page. In HTML5 you can have as many
as you want. The spec defines it as “a group of introductory or
navigational aids”. You can use a header in any section on your site.
In fact, you probably should use a header within most of your
sections. The spec describes the section element as “a thematic
grouping of content, typically with a heading.”
nav – Intended for major navigation information. A group of links
grouped together isn’t enough reason to use the nav element. Site-wide
navigation, on the other hand belongs in a nav element.
footer – Sounds like its a description of the position, but its not.
Footer elements contain informations about its containing element: who
wrote it, copyright, links to related content, etc. Whereas we usually
have one footer for an entire document, HTML5 allows us to also have
footer within sections.
Source:
http://www.w3schools.com/html/html5_semantic_elements.asp
Usually when I code HTML5 documents I use the following syntax:
<header class="site-header">
<hgroup class="site-brand">
<h1 class="brand-name">
Brand Name
</h1>
<h2 class="brans-slogan">
Awesome Slogan
</h2>
</hgroup>
</header>
<article>
<header class="article-header">
<h1 class="article-title">Article Header</h1>
</header>
[... content ...]
</article>
It seemed to be header the right tag for site header, but after reading the spec and outlining this code, I saw two drawbacks
header tag make its content first level, and article title 2nd
Site headers might not contain headings at all, since its purpose is to tell the user who the page belongs to.
What would be the best approach?
Your first problem is that you have two h1 tags. This is NOT proper semantic mark-up. You are correct about the header tag and it would be preferable to put you high level h tags in that area.
That being said, your original question is a design and content architecture problem. If you are going to use an h1 in your article body then you should choose a different tag to use in the header of you page.
The spec says,"The header element typically contains the headings for a section (an h1-h6 element or hgroup element), along with content such as introductory material or navigational aids for the section."
It does not have to, though. The h1 tag (and title tag) are your main semantic indicies for a page. You do NOT want 2 h1 tags or header tags, but these two tags do not have to go together ... but its nice if you can architecture it that way.
Your usage of header in this example is okay.
However, it's not really needed here. If you only include h1-h6 and hgroup, you don't need to specify that it's a header, because it is already clear by definition. header is useful if you want to include additional content for which it's not necessarily clear that it should belong to the header vs. the main content.
But there is no harm in using header for headings only, so go on with it if you like it, need it for CSS/JS hooks, might include additional header content in the future, etc.
header tag make its content first level, and article title 2nd
I don't understand what you mean by that. The header element doesn't influence the document outline. It's a way to differentiate between introductory content and main content.
Site headers might not contain headings at all, since its purpose is to tell the user who the page belongs to.
The header element doesn't have to contain a heading. E.g. this example would be fine:
<article>
<header>I visited Berlin last week and in this post I document what I liked about it.</header>
<p>…</p>
</article>
The footer element is similar, and for some content both elements could be suitable.
If you'd want to attribute the article author, it would go into a footer.
quick question: is it actually allowed to use the header tag twice? e.g. i have two important head-sections in my header.php where both could have header tag?
Yes, but with a catch. The W3 documents state that the tags represent the header and footer areas of their nearest ancestor section. I would recommend having as many as your want, but only 1 of each for each "section" of your page, i.e. body, section etc.
From W3
A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
=========================
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Here are links to their respective standard documentation: header and footer
Yes you can use multiple header elements in your documents, by virtue of the w3c documentation:
A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
However ensure that it is semantically correct.
There's no penalty for using two header tags, but make sure it makes sense.
Happy coding!
The <header> is used to mark the header of e.g. articles in newspaper, so if you have multiple articles you can use multiple <header>.
It's like using multiple <h1>. It does only make sense in some special case.
In some situation, it is posible put two <header> in single <article>/<section> like this, so why not.
<article>
<!-- Feature Image on the LEFT -->
<div class="position-left">
...featrue image...
<header>
...H1 title ...
</header>
</div>
<!-- Content on the RIGHT with subtitle, date, etc -->
<div class="position-right">
<header>
..date, sub-title, etc...
</header>
...content...
<footer>..</footer>
</div>
</article>
You can put two <header> tags in your document, sure. Semantically, however, it is incorrect. Why not use one <header> tag and use a different tag inside it?