just wondering, is it bad practice to place a <header> tag inside a div tag when designing a site that mostly uses html5 elements and the doctype is for html5? Thanks!
Also, should I place the Nav outside the header or inside, or does it really matter?
I do not believe that it is a bad practice. However, still make sure you have it placed int the general area where it should be.
Here is a link that might help you understand the location of your header.
No, as long as you respect the content semantics and that your header contains header information. You can wrap it in a div with no SEO drawbacks.
No, not strictly, but there are some contextual semantics that are implied by embedding the header under elements other than the body. Depending on how you structure the document, you may run into unexpected behaviours. See below.
HTML5, as far as I can tell, is a DTD-less document type. Which does not apply strict rules as it pertains to document structure validation. According to the W3C document on HTML5 the:
... header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids. [1]
Basically, what this seems to indicate is that, if the header element is directly under the body of the document, it applies to the page as a whole, but if contained under another element which identifies a section the header applies more specifically to the nearest ancestor.
Bear in mind though that a <div> is not a sectioning element as pointed out by Tomasz Zielinski. Originally I had thought it was. If you want your header to apply only to a specific section of the page, it is best to use one of the defined sectioning elements to encompass the header, as defined here: http://www.w3.org/TR/html5/sections.html
E.g.
<div>
<section>
<header>...</header>
</section>
</div>
Related
I am trying to code a website in html and am looking for ways to structure my code (without spams of divs)
And I was wondering, are you able to have a <main> tag inside another <main> tag? If so, it is good pratice?
Thanks in advance.
According to the W3C specification of <main>:
The main element represents the dominant contents of the document.
A document must not have more than one main element that does not have the hidden attribute specified.
A hierarchically correct main element is one whose ancestor elements are limited to html, body, div, form without an accessible name, and autonomous custom elements. Each main element must be a hierarchically correct main element.
As per The main element (HTML.Spec)
See also a more simplified version of the above:
One important facet of is that it can only be used once per page.
As per The main element (HTML5 Doctor)
If you're still unclear why this matters, please read more on Semantic / Non-Semantic Elements in HTML:
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
In answer to your question:
You cannot nest <main> elements, as per the W3C specifications and also have valid HTML
You may only have one <main> tag per page
Does that answer your question?
Is it an acceptable practice to use section tag as a child anywhere in the page
or it should be always a main tag???
For example:
<section class="software-development">
<h2>
<span>Software</span>
<span>Development</span>
</h2>
<div class="development-areas">
<section class="web-apps">
<h2>Web Applications</h2>
<p>dolor ipsum........</p>
</section>
<section class="mobile-apps"></section>
<section class="desktop-apps"></section>
</div>
</section>
You can use almost any HTML tag for anything you want, but the idea of semantic tags is to give meaning to the content of your page.
In this particular case, you can use the section tag (or even the article) to define any self-contained part of your page, there's nothing wrong with that, in fact it IS a section after all with its own title. Don't think of the use of the tags as a hierarchy all the time; think of what the element your creating actually is in the page and use the appropiate tag;
This is a great article that can help you clear everything regarding semantic tags:
https://www.lifewire.com/why-use-semantic-html-3468271
Just a quote from the same article:
Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational, because people know what paragraphs are and browsers know how to display them.
More information for the section tag based on Mozilla's Docs:
Each should be identified, typically by
including a heading (<h1>-<h6> element) as a child of the
element.
If it makes sense to separately syndicate the content of a <section>
element, use an <article> element instead.
Do not use the <section> element as a generic container; this is what
<div> is for, especially when the sectioning is only for styling
purposes. A rule of thumb is that a section should logically appear in
the outline of a document.
You can read more in this question as well: https://stackoverflow.com/a/53229971/8437694
No, not anywhere. The specs say the following (emphasis mine):
The section element represents a generic section of a document or
application. A section, in this context, is a thematic grouping of
content, typically with a heading.
Examples of sections would be chapters, the various tabbed pages in a
tabbed dialog box, or the numbered sections of a thesis. A Web site's
home page could be split into sections for an introduction, news
items, and contact information.
Authors are encouraged to use the article element instead of the
section element when it would make sense to syndicate the contents of
the element.
The section element is not a generic container element. When an
element is needed only for styling purposes or as a convenience for
scripting, authors are encouraged to use the div element instead. A
general rule is that the section element is appropriate only if the
element's contents would be listed explicitly in the document's
outline.
So <section> could easily be put almost anywhere without fighting against its semantics.
Technically, you can use <section> anywhere "where flow content is expected".
According to the HTML5.1 spec, as outlined in the link below, every page should only have one h1 element. Naturally, I feel that the h1 element on the homepage should be a title describing the website itself. This raises the question, how do you correctly deal with h1 headers on subpages if the h1 element used on the homepage is used in header?
For instance, let's assume we are building a website for Adam's Sweet Shop, we create the layout and we create our header:
<header>
<h1>Adam's Sweet Shop</h1>
...[other header elements]
</header>
Now, that works fine for the homepage. But as we delve into the subpages, we are left with two options. We create a different h1 element describing that page and delegate the header h1 into a different tag. This would seemingly satisfy the requirements of the HTML5.1 spec, but it almost seems 'hacky', plus for templates this would require two different header files.
The second option is to create two h1 elements, one describing the website in the header, the other within the main element describing the page.
<header>
<h1>Adam's Sweet Shop</h1>
...[other header elements]
</header>
<main>
<h1>About Adam's Sweet Shop</h1>
...[other body elements]
</main>
This obviously goes against the HTML5.1 spec, but seems less hacky. I originally built a site using second approach, but received a warning message from the W3C validator.
Are either of these approaches correct, and if not, what is a better approach, for instance, an ARIA label describing the 'real' h1?
https://www.w3.org/TR/html51/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements
If it works better in your site design to have an h1 in the header and another h1 in the main, then that’s what you should do. Neither the canonical HTML spec nor the W3C copy of it say you shouldn’t use more than one h1 element per document if that’s what meets your needs. And the W3C HTML checker won’t report any errors or warnings for the markup example in the question.
As far as any accessibility concerns, it’s true screen readers will report both those h1 headings as being at the same (top) level, but that also seems appropriate for this particular case—it isn’t an absolute problem to have a couple top-level headings. (Though in contrast it would be a problem for screen readers if you marked up every section in your entire document with an h1—and that’s why the HTML emits warnings for that case (which is very different from your case).
HTML 5.1 has no restriction about having only one h1
The only requisits are:
The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.
This means that :
you must start with a h1,
you have to respect the h1>h2>h3... hiererarchy,
an heading starts a new section,
but you can perfectly start a new section at the same level as your first one
So having one h1 in both main and header sections is fine, according to the HTML specs,
it's possible, but it's (often) bad design.
You should always consider that your h1 is expected to be the webpage title (while the <title> element may already contain your website title). It makes no sense of having two titles for the webpage, for various reasons including SEO and accessibility.
So it's technically possible, HTML can be used for formatting complex multi-documents, but if you can avoid it, keep it simple.
edit
After reading through some discussions, I would no longer recommend using multiple h1 tags if you care about assistive technologies or browser outlining until the implementations are standardized.
My original answer should be valid in the future and for SEO purposes, but there is no guarantee for that.
original answer
You can have multiple h1s on a single page with the right sectioning. In HTML5, document outlines are created differently from previous versions.
Before HTML5, the whole page was considered the "root document", and the h1 was used to describe this root. It was a simple one-to-one relationship between HTML files and documents in the outline. This is important for SEO as engines use these outlines to guess what your page is about, and confusing them is a bad idea.
HTML5 introduced sectioning content such as article, section, header, footer, etc. According to the specs,
Sectioning content is content that defines the scope of headings and footers.
Each sectioning content element potentially has a heading and an outline.
This means you can use a h1 tag for every new outline created this way, because
Certain elements are said to be sectioning roots, including blockquote and td elements. These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.
so if you use a h1 in a "child" outline created for example by nesting it in an article, it won't interfere with the outline (and thus SEO) of your parent outline.
So for all intents and purposes,
<html>
<head>
</head>
<body>
<h1>
My awesome collection of articles
</h1>
[ ... some content ... ]
<article>
<h1>
My awesome article
</h1>
</article>
</body>
</html>
is a valid use of headers and sectioning in HTML5. Also, this article does a great job at visually explaining all of this using nearly your example.
It is not entirely clear to me what the best usage of the <header> tag is.
I have had this minor discussion with someone at my internship and he said you would only like to use the <header> tag inside an <article> tag element. I told him it would not be wrong to use it as the element containing the navigation etc. After talking about this, I am still not sure wether I should use it the way I thought it can be used or the way he tried telling me. On school I also learned that HTML5 is turning to a more semantic way of describing ones document. Is the <header> tag not supposed to be a part of that?
Take a look at the official documentation.
The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.
When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.
The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
A sectioning content can be <article>, <aside>, <nav> or <section> (https://www.w3.org/TR/html5/dom.html#sectioning-content-0)
It isn't mandatory to use it on an <article> section. Even the examples provided shows that:
<header>
<p>Welcome to...</p>
<h1>Voidwars!</h1>
</header>
Regarding you saying
I told him it would not be wrong to use it as the element containing the navigation etc
the definition tells us that is absolutely ok to use it for navigational aids (aka <nav>).
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.
Source
http://www.w3schools.com/tags/tag_header.asp
Here it even says that the header tag is new in HTML5.
And it is used in articles.
The example here uses article:
http://www.w3schools.com/html/html5_semantic_elements.asp
But it is possible to use it within other semantic tags like nav
My colleague who work with me and is responsible for SEO on pages slightly force me to use <div id="footer"> instead of new <footer>, cause saarch robots supposedly works better with the <div id="footer">.
I won't ask what is better to use cause I don't want to have question which doesn't fit SO rules.
I better ask what are advantages and disadvantages of these two approaches?
My research:
I think <footer> is better from Semantic Web view hence it's better.
I read some articles about HTML5 and new elements which brought me to use <footer> instead of <div id="footer">.
The only possible logical reason I can see why this could possibly be true is if Google see "<footer>" as a footer, but "<div id='footer'>" the same as other content on the page.
As a footer should just be part of the template, rather than the content, they may use that tag to say that they should not index text within it as that page's content.
However, even if that is true, I can't see how that would impact on SEO.
It seems many SEOs like to tweak things with no rationality or evidence. Other SEOs would no doubt tell you that the footer is duplicate content and so should be removed altogether.
It should really be up to your SEO to give reasoning why it works and why it is worth the impact upon code quality.
Semantic code should help search engines index your pages correctly - it tells them what everything is.
I know this is old, but the <footer> element (to quote spec):
The <footer> element represents a footer for its nearest ancestor <main> element or 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.
A <footer> element can also contain entire sections representing appendices, indexes, long colophons, verbose license agreements, and other such content.
When a <footer> element’s nearest ancestor sectioning root element is the <body> element, and it is not a descendant of the <main> element or a sectioning content element, then that <footer> is scoped to the <body> element and represents a footer for the page as a whole.
TL:DR; A footer element can be in any element. It can be an article footer, and is only treated as a main site footer when it's parent element is the body tag. It also means you can have more than 1 footer element in a site.
Adding id="footer" identifies it as the footer for the main site, and not an article footer. Not sure how it being a div or a footer tag affects seo however, as I suspect seo parsers look for an element with "footer" as the id, and ignore the container type if it's found.