HTML5 outline – page header with heading arround the logo - html

I've been wondering whats the best practice for using a heading tag arround my logo on my website, especially with HTML5 sectioning tags.
I've read on many website and forums that I should do the following, if I want to add a heading arround my logo:
<!DOCTYPE html>
<html>
[...]
<body>
<div id="outer-wrapper">
<header id="header" class="main-header clearfix">
<h1>
<img src="logo" src="[...]" alt="text goes here" />
</h1>
</header>
<div id="inner-wrapper">
[...]
</div>
</div>
</body>
</html>
But now, every page on my website has as its main title the text specified on the logo's alt attribute, which I could imagine, is not ideal. I mean, the H1 tag is intended to provide the «main topic of the document», but that's most of the time not the text I specified on the logo's alt tag.
However, if the logo's alt tag contains the name of a company (because it's the comapanys logo), I would like to have it somewere in a heading (to give it some relevance and importance), just not in the h1 heading.
Do you think, the following is a valid solution for this problem:
<!DOCTYPE html>
<html>
[...]
<body>
<div id="outer-wrapper">
<header id="header" class="main-header clearfix">
<h2>
<img src="logo" src="[...]" alt="text goes here" />
</h2>
</header>
<div id="inner-wrapper">
<article>
<h1>Main topic</h1>
</article>
</div>
</div>
</body>
</html>

Both snippets are semantically the same. If using sectioning elements, the heading ranks often (but not always) don’t matter anymore.
You can test it yourself, check these two snippets in an HTML5 outliner (e.g., in this online demo):
<body>
<h1>document heading</h1>
<article>
<h2>main content heading</h2>
</article>
</body>
<body>
<h2>document heading</h2>
<article>
<h1>main content heading</h1>
</article>
</body>
They produce the same outline:
1. document heading
1. main content heading
However, the HTML5 specification encourages authors to use heading elements of the correct rank, so you should stick with the first snippet.
The HTML5 spec does not define that the (first) h1 element would be especially important or that it should be used for the "main topic" of the document. The spec defines the rank, not importance.
I think you should use a heading for the logo if this logo represents the site (which is typically the case), and it makes sense to have this as the first heading (i.e., the heading of the sectioning root body), and the following sections should be in scope of it.

Related

Should an <article> image go inside article's <header>?

Use case is a blog post:
<article> element is used inside <main>, to encase an article on a post page.
<header> is in use within <article>, containing <h1> title and meta including author, datestamp etc.
<article class="card bg-white">
<header>
<div class="card-img-top p-0">
<img width="1414" height="1011" src="image.jpg 1200w" sizes="(max-width: 1414px) 100vw, 1414px">
</div>
<h1 class="entry-title" itemprop="headline">
Article title
</h1>
<div class="entry-meta">
<span class="author vcard" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><span itemprop="name">Joe Bloggs</span></span>
<span class="meta-sep"> | </span>
<time class="entry-date" datetime="2022-03-14T14:28:33+00:00" title="March 14, 2022, 2:28 pm" itemprop="datePublished">14 March 2022</time>
<meta itemprop="dateModified" content="14 March 2022">
</div>
</header>
<div class="entry-content" itemprop="mainEntityOfPage">
<meta itemprop="description" content="Excerpt for article">
<p>Article text.</p>
<p>Article text.</p>
<p>Article text.</p>
</div>
</article>
Each post has a feature image. Does this image belong semantically to <header>, or does it not matter (ie. anywhere in <article>)?
I wish to present the image above the meta info, ie. the existing <header>. Visually, I guess it would sort of comprise the header area (ie. the stuff before the post body), but it would not necessarily communicate meta information about the post. If the lead image should not be part of <header>, this would mean it is also above <header>.
(Despite presence of a <header> at top of page, multiple in-page <header>s are permitted where semantically justified).
However, found documentation tends to pertain to the top-of-page header use of <header> alone:
The <header> element represents a container for introductory content
or a set of navigational links.
A <header> element typically contains:
one or more heading elements (<h1> - <h6>)
logo or icon
authorship
As you've quoted, a header element "represents introductory content" of a sectioning element. If you consider an article's main image to be part of its introductory content, it would make sense to place it within the header element.
I've omitted schema structured data for readability.
<article>
<header>
<img alt="A kitten." src="/images/kitten.jpg" width="100" height="100">
<h1>The cutest kitten</h1>
<ul aria-label="Article metadata.">
<li>Author: Katrina Wisquer</li>
<li>Published: <time datetime="2022-03-14T14:28:33+00:00">14 March 2022</time></li>
</ul>
</header>
<p>There once was a cute kitten who...</p>
</article>
However, if you want to visually place an image before the header content, but still keep it after the header content in the document flow, you can use CSS to change the position it's rendered in. An easy way to do this would be with the order property and CSS Flexbox or CSS Grid. This will change the visual presentation order, but keep the document flow the same. Assistive tech will present content in the order of the document flow.
This may be the best solution, because generally one expects to encounter the title of an article first, before anything else.
article {
display: flex;
flex-direction: column;
margin: 1rem;
padding: 1rem;
border: 1px solid black;
}
.article-image {
order: 1;
}
.article-header {
order: 2;
}
.article-body {
order: 3;
}
<article>
<header class="article-header">
<h1>The cutest kitten</h1>
<ul aria-label="Article metadata.">
<li>Author: Katrina Wisquer</li>
<li>Published: <time datetime="2022-03-14T14:28:33+00:00">14 March 2022</time></li>
</ul>
</header>
<img class="article-image" alt="Kittens." src="https://placekitten.com/200/100" width="200" height="100">
<div class="article-body">
<p>There once was a cute kitten who...</p>
</div>
</article>
Additional notes:
Don't forget an alt attribute on the image
Marking up article metadata in an unordered list is more semantic than a <div> with spans.
It seems you are both overusing and misusing the title attribute

Is it considered 'bad practice' to use multiple header tags?

Is using multiple header tags common practice when it comes to separating a main-header and a sub-header, or should you divide one header into two sections using divs?
For example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header class="header--main-header">
</header>
<header class="header--sub-header">
</header>
</body>
</html>
As opposed to:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<div class="header--main-header">
<!-- Main-Header Content -->
</div>
<div class="header--sub-header">
<!-- Sub-Header Content -->
</div>
</header>
</body>
</html>
Would either of these methods be the "best-practice" way to achieve a website header and sub-header, or is there another approach that I'm missing?
You can use as many headers as you like. We tend to use a main header at the top of our HTML containing our h1, navigation, utilities etc. But headers can also be used for the head of a section.
For instance:
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
<article>
<header>
<h2>Title of this article</h2>
<p>By Richard Clark</p>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>
It is the head tag that should only be used once per page.
The header tag element represents a container for introductory content or a set of navigational links.
A header tag element typically contains:
one or more heading elements (h1 - h6)
logo or icon
authorship information
You can have several elements in one document.
Convention in HTML is that generally there is one header tag. Sub-headers can be seperated by any element you wish, div for example like you have.
You can check out some of the example usage of header here and here.
Usually the header tag, followed by the nav or div tag itself. It is best-practice to use the nav tag.

HTML5: Should I use h2's or h3's for content inside of an aside element?

I've been poking around online but I can't seem to find a definitive answer on this. Given the following HTML5 structure below, should I be using h2's or h3's inside of my aside element for content titles?
I know it's okay to use multiple h1's as long as they are inside a section and/or article element. But i'm not sure what I should do within my aside? I think I should stay away from multiple h1's in an aside but im not sure about h2's and h3's.
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Heading Tags</title>
</head>
<body>
<section>
<header>
<h1>Main Section</h1>
</header>
<article>
<h1>Article Title 1</h1>
<div>Some Content Here</div>
</article>
<article>
<h1>Article Title 2</h1>
<div>Some Content Here</div>
</article>
<article>
<h1>Article Title 3</h1>
<div>Some Content Here</div>
</article>
</section>
<aside>
<header>
<h1>Side Bar Heading</h1>
</header>
<div>
<h2>Side Content Title 1</h2>
<div>Some Content Here</div>
</div>
<div>
<h2>Side Content Title 2</h2>
<div>Some Content Here</div>
</div>
<div>
<h2>Side Content Title 3</h2>
<div>Some Content Here</div>
</div>
</aside>
</body>
</html>
According to MDN:
Sections in HTML5 can be nested. Beside the main section, defined by the element, section limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within <body>, <section>, <article>, <aside>, and <nav> tags.
Each section can have its own heading hierarchy. Therefore, even a nested section can have an <h1>.
So the way you've done it -- with one <h1> and multiple <h2> inside your <aside> -- is appropriate.
You really shouldn't be using multiple <h1>s on a page. The h tags are primarily used to dictate document structure. The Web Content Accessibility Guidelines (WCAG) 2.0 standard shows examples that the h1 tag should title the page. Most states (Illinois, for example) have their own outlines on Accessibility standards. Illinois' in specific outlines that there should only ever be one h1 tag on a page and that it's contents be similar to the <title> tag. While this can be, and probably will be, argued, it makes semantic sense to only use one h1 tag and let the other 5 layers sit nested correctly.
Really, common sense plays a big role in structuring your other h tags. Imagine looking at your site in an 'outline mode' when you're done. Does it make sense?
For example, say you want the outline of your site to look like this:
Page Title
Content
- Article
- Sub-article
- Article
Sidebar
- Weather
- Local News
Then this is how your heading tags should be working:
<header>
<h1>My News Website</h1>
<nav></nav>
</header>
<section>
<article>
<h2>Article Title</h2>
<p>Blah Blah Blah.</p>
<h3>Sub-heading in Article</h3>
<p>More blah blah blah.</p>
</article>
<article>
<h2>Article Title</h2>
<p>Blah Blah Blah.</p>
</article>
</section>
<aside>
<h2>Weather</h2>
<p>Weather information.</p>
<h2>Local News</h2>
<ul>
<li>News Item</li>
<li>News Item</li>
</ul>
</aside>
As long as things you want at the same level share the same heading number, then you're on the right track. Things that relate to a heading that contextually make sense to be "under" said heading should increment the heading number by one.
Lastly, you can have an outline of your completed site shown to you by using the HTLM 5 Outline. Check it out here: http://gsnedders.html5.org/outliner/
State of MDN Apr 21, 2022:
Using more than one is allowed by the HTML specification, but is not considered a best practice. Using only one is beneficial for screenreader users.
The HTML specification includes the concept of an outline formed by the use of elements. If this were implemented it would enable the use of multiple elements, giving user agents—including screen readers—a way to understand that an nested inside a defined section is a subheading. This functionality has never been implemented; therefore it is important to use your headings to describe the outline of your document.

Multiple <header> and <footer> in a HTML5 document

Is it fine to use multiple <header> and in HTML 5, if yes then isn't semantically incorrect and won't it confuse mobile readers?
I saw many site uses like
<body class="home">
<header class="hd1">
<hgroup>
<h1>HTML5 Documnet</h1>
<h2>tagline</h2>
</hgroup>
</header><!-- .hd1 -->
<div class="main">
<section class="hs1">
<header>
<h1>This is a Page Sub Title</h1>
</header>
<p>Some content...</p>
<h2>Demonstrating EM and STRONG</h2>
<p><strong>This text will have more importance (SEO-wise and contextually)</strong></p>
<footer>
<p>Author: <cite>Louis Lazaris</cite></p>
</footer>
</section>
</div><!-- .main -->
<footer class="f1">
<p>copyright © year</p>
</footer><!-- .f1 -->
</body>
Yes, multiple <header> and <footer> elements are fine. They aren't used the same as <div id="header"> as most people use them for. Technically speaking, header and footer represent a header and footer of a section. A section being a piece of the page such as an article that contains header tags like <h1> and then content, then footer stuff like copyrights, citations, references, etc.
From the horses mouth:
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.
And
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.
Directly from the spec at: http://dev.w3.org/html5/spec/Overview.html
Note that as I said these are not used to create sections like people did with <div id="header/footer"> it mentions this confusion in the spec:
The footer element is not sectioning content; it doesn't introduce a
new section.
So, again, "technically" speaking, that last footer you have there introduces a new section and isn't semantic. From the spec's point of view anyways.

How to use h1 to h6 within header, section, article, etc.. in html5?

In xhtml 1.0 hn (h1 to h6) must represent document structure, like chapters in a book, and they all descend from the body.
In html5 there are section, article, header, hgroup, and it seems that hn tags descend from one of these tags, and then are not relative to the body element.
like
<html>
<body>
<h1>My personal homepage</h1>
<section id="resume">
<header>
<h1>My resumre</h1>
<p>A brief description of my skills</p>
</header>
<!-- bla bla bla -->
</section>
</body>
In xhtml 1.0 I would have done:
<html>
<body>
<h1>My personal homepage</h1>
<div id="resume">
<h2>My resumre</h2>
<p>A brief description of my skills</p>
<!-- bla bla bla -->
</div>
</body>
Does it make sense? Or should I follow the same rules as in xhtml 1.0 and disregard section, header, etc... and make hn tags relative to the body elements?
Advises and answers concerning semantics and SEO are the most valuable for me.
The best SEO is to have good content, simple as that! Semantically what you have illustrated here is fine. What is new in HTML5 is that containers like <footer>, <header>, <section> and <article> have their own internal structure, as it were. So the outline of your first example would be:
My personal homepage
1. My resume
If you were to change the markup to this:
<html>
<body>
<h1>My personal homepage</h1>
<h2>Introduction</h2>
<p id="intro">...<\p>
<h2>About me</h2>
<section id="resume">
<header>
<h1>My resume</h1>
<h2>Overview</h2>
</header>
<p>...</p>
</section>
</body>
The outline would be:
My personal homepage
1. Introduction
2. About me
1. My resume
1. Overview
See section 4.4.11 of the draft for an explanation. Geoffrey Sneddon has made the HTML 5 Outliner tool for checking the outline of a page.
Semantically, what you're doing is fine. Maybe the section should be an article.
SEO is probably ok but I couldn't say for certain.