- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The website of a beginning coder</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<p>Blog</p>
<nav>
<a href="index.html">Return to home</a>
</nav>
</header>
<main>
<article>
<h1>Day Thirteen. I found an article.</h1>
<p>I decided that it would be useful.</p>
<h2>Why do we need headings?</h2>
<!-- Add the content identifier to this heading -->
<h3>Table of Contents</h3>
<ul>
<li>
<!-- Add the #intro address to this link -->
<a>Introduction</a>
</li>
<li><a>Headings and implicit sections</a></li>
<li><a>The section tag</a></li>
<li><a>Heading levels</a></li>
<li><a>It is not all quite that simple.</a></li>
</ul>
<article>
<!-- Add the identifier intro to this heading -->
<h3>Introduction</h3>
<p>When HTML was invented many years ago, the world was a completely different place. The authors of the specification took their inspiration from text documents, where paragraphs, lists, tables, images and, of course, headings were presented in one continuous stream. Just as is true of your essays and term papers, the largest heading is the title, and the smaller headings mark section or chapter divisions.</p>
<h3>Headings and implicit sections</h3>
<p>Since then HTML has had six levels of headings: from h1 to h6. Everything that is enclosed in heading tags is headlined, and they are used to form what are called implicit sections. These are the logical parts of a page. They are implicit because they end only when the next heading appears.</p>
<pre><code><h1>Food</h1>
<h2>Fruit</h2>
<p>Cool things</p>
<h3>Apples</h3>
<p>General</p></code></pre>
<p>Due to this system of implicit sections, the specification strongly recommends against using the h* elements for the captions that are written under headings. These are regular paragraphs, but the heading should designate a separate part of the content. The specification includes a chapter with examples on how to lay out complex elements, such as captions, breadcrumbs, and dialogs. You should read it.</p>
<h3>The section tag</h3>
<p>But it is better to declare sections explicitly using the section element. These two fragments are identical in terms of their semantics, but this one is much clearer, although it is more verbose.</p>
<pre><code><h1>Food</h1>
<section>
<h2>Fruit</h2>
<p>Cool things</p>
<section>
<h3>Apples</h3>
<p>General</p>
</section>
</section></code></pre>
<h3>Heading levels</h3>
<p>OK! Once we have inserted our explicit sections, it is easy to determine the relationships between parts by the nesting level of the tag. So perhaps the browsers themselves will guess what level headings are needed? We can count: h1, h2, ah… I lost track. Thus, it would be easier to change parts of the code in places. The same idea occurred to the authors of HTML5, and they described an outline algorithm in the specification. It permits the use of only h1 on the page, and the importance of such structural elements as article and section is indicated by the degree of nesting of the tag.</p>
<pre><code><h1>Food</h1>
<section>
<h1>Fruit</h1>
<section>
<h1>Apples</h1>
</section>
</section></code></pre>
<p>Developers really liked the idea, and many even rushed to introduce it. But here’s the problem: the outline algorithm has yet to be implemented by any browser, screen reader or search engine. On these pages, all of the headings scream out that they are no. 1 and the most important. But if everything is important, then nothing is important.</p>
<p>That isn’t the way to go. The specification itself mentions this problem. You need to keep track of the heading level yourself. In fact, this is not so difficult: on a typical page, it is unlikely that there will be more than 3 levels of structural divisions. So don’t be lazy.</p>
<h3>It is not all quite that simple</h3>
<p>No, wait. I will assign the class for the div, and everyone will see everything at once. This is the biggest heading. I will assign another class in order to make the header smaller, as you can see. So why then do we have to deal with this nonsense of having to calculate levels if we have CSS?</p>
<pre><code><div class="big-black">
Free fruit
</div>
<div class="small-grey">
Only for money
</div></code></pre>
<p>Of course you are right: styles are used to create a visual model of importance: large black text is more important, and small gray text is not important at all. But you can only see the visual hierarchy if you look at the page.</p>
<p>There are two important groups of users who will read your page in accordance with the markup tags. They don’t see how big and black your div is: in order to find the most important thing on the page, they will search for the h1 tag. These are screen readers and robots. Everything is clear about robots: these are search engines that need assistance in order to understand your pages.</p>
<p>Screen readers are used by people who have difficulty seeing your user interfaces, cannot see them at all, or cannot control the browser in the usual way. VoiceOver, NVDA, and JAWS read your webpage content, and they are guided solely by the semantic tags. The div and span elements have no semantic meaning, regardless of the classes or styles that you add to them. A website that is formatted using these tags is like a newspaper without headlines: it is just a mess of text.</p>
<p>Imagine reading such a newspaper! Wake up. It is 2017, and I’m creating an isomorphic one-page application, and not a wall newspaper. I have here component states – what’s the point of semantics when there is no text? That’s a very good question.</p>
<p>All screen readers read through the webpage tag by tag, from the first one to the last one. And they read everything inside the tags in sequence. This process is extremely inefficient: each page starts with a header, and as you go through it, you forget what it was you just read. Therefore, screen readers have special modes that read aloud only the important parts of the page. These include the structural elements, such as the header, nav, main and other tags, all links, and all headings.</p>
<p>If you display all of the headings and read them, you will create a mental model of the page as opposed to a visual one. And then you can grasp and go to the desired section by selecting its heading. Menu, search, directory, settings, login – you can assign headings to all of these parts of your application in order to make it easier to access them.</p>
<pre><code>— Instagram
— Feed
— Sunset
— Latte
— Settings
— Profile</code></pre>
<p>But it can sometimes happen that you will not have headings for the important parts of your page in your web page design. The designer draws the layout, and everything is clear to him: a hamburger menu, a search field, and so on. But this should not prevent you from making the interfaces accessible. Arrange the desired headings, and then hide them in an accessible fashion. How do you do this? Just don’t use “display: none”. Screen readers ignore it. The “visually hidden” pattern also exists. You can find out more about it in the video description.</p>
<p>Don’t just think about what your layout looks like. You should also pay attention to how logical and organized your layout is. Also don’t forget about headings: let the styles visually format your page, but the headings should describe your pages or applications.</p>
<p>
<!-- Add the #content address to this link -->
<a>Go to the Table of Contents</a>
</p>
</article>
</article>
<aside>
Your ad could go here
</aside>
</main>
<footer>
Website footer
</footer>
</body>
</html>
CSS
body {
padding: 0 30px;
font-size: 14px;
line-height: 22px;
font-family: "Georgia", serif;
color: #222222;
}
h1 {
font-size: 20px;
line-height: normal;
}
aside {
margin: 20px 0;
color: #c4c4c4;
}
a[href] {
color: #0099ef;
text-decoration-line: underline;
}
article {
width: 400px;
}
h2 {
font-size: 18px;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Add the address
#introto text linkIntroductionin the Table of Contents. - Add the attribute
idwith the valueintroto the headingIntroductionin the article. - Click the link
Introduction. - Add the address
#contentto text linkGo to the Table of Contentsat the end of the article. - Add the attribute
idwith the valuecontentto the headingTable of Contentsat the beginning of the article. - Click the link
Go to the Table of Contents.
Comments