An in-page link

<!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 page structure</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 page structure</h3> <p>HTML has six heading levels, from h1 to h6. Text enclosed in a heading tag is a heading. Headings divide a page into logical sections: higher-level headings introduce major parts, and lower-level headings introduce subsections.</p> <pre><code>&lt;h1&gt;Food&lt;/h1&gt; &lt;h2&gt;Fruit&lt;/h2&gt; &lt;p&gt;Cool things&lt;/p&gt; &lt;h3&gt;Apples&lt;/h3&gt; &lt;p&gt;General&lt;/p&gt;</code></pre> <p>Use heading elements for headings that introduce parts of the content, rather than simply to make text large or bold. A subtitle or a short description below a heading can be a regular paragraph. Choose markup according to the text’s purpose.</p> <h3>The section tag</h3> <p>The section element can group a thematic part of a document. A section usually has a heading that identifies its topic. The following example explicitly groups the Fruit and Apples content, while the h1, h2 and h3 elements still express the heading levels.</p> <pre><code>&lt;h1&gt;Food&lt;/h1&gt; &lt;section&gt; &lt;h2&gt;Fruit&lt;/h2&gt; &lt;p&gt;Cool things&lt;/p&gt; &lt;section&gt; &lt;h3&gt;Apples&lt;/h3&gt; &lt;p&gt;General&lt;/p&gt; &lt;/section&gt; &lt;/section&gt;</code></pre> <h3>Heading levels</h3> <p>Earlier HTML proposals described an outline algorithm that would infer heading levels from nested section and article elements. That idea could make sections easier to move around, but it is not a model to rely on when choosing heading tags. Choose the levels explicitly, as in this example:</p> <pre><code>&lt;h1&gt;Food&lt;/h1&gt; &lt;section&gt; &lt;h2&gt;Fruit&lt;/h2&gt; &lt;section&gt; &lt;h3&gt;Apples&lt;/h3&gt; &lt;/section&gt; &lt;/section&gt;</code></pre> <p>A section or article does not automatically turn an h1 inside it into an h2 or h3. Use the heading elements to express the relationships between the parts of the page, rather than relying on nesting alone.</p> <p>Use h1 for the page’s main heading, h2 for major sections, and h3 for their subsections, continuing with lower levels when needed. Keep the heading levels clear so that the structure makes sense without the visual layout.</p> <h3>It is not all quite that simple</h3> <p>Hold on. I can add a class to a div to make it look like the biggest heading, and another class to make a different heading look smaller. The visual difference will be clear. So why bother choosing heading levels when we can control the appearance with CSS?</p> <pre><code>&lt;div class="big-black"&gt; Free fruit &lt;/div&gt; &lt;div class="small-grey"&gt; Fruit for sale &lt;/div&gt;</code></pre> <p>CSS can create a visual hierarchy: large black text can look more prominent than small gray text. That helps readers who can see the page, but appearance alone does not describe its structure to everyone.</p> <p>Two kinds of software also use information from your markup: screen readers and search-engine crawlers. Meaningful headings help communicate the page’s organization. Screen-reader users can navigate by headings, while search engines use headings alongside other clues to understand page content. A large styled div does not provide the same heading structure by appearance alone.</p> <p>People who cannot see a page, or have difficulty seeing it, may use a screen reader. VoiceOver, NVDA and JAWS use information about the page’s content and structure to help users read and navigate it. Generic div and span elements do not, by themselves, identify headings or page regions. A page built only from generic containers can therefore be harder to navigate, like a newspaper with no clearly marked headlines.</p> <p>Imagine reading that newspaper! “Hang on. I’m building an isomorphic single-page application, not a poster. My app has component states—why do semantics matter when there’s no text?” That’s a good question.</p> <p>Screen readers can read page content in reading order, but users do not always have to listen from beginning to end. They can jump between headings, links and page landmarks to find what they need. This avoids working through the same header and navigation on every page. Meaningful markup, including elements such as header, nav and main, helps identify those regions and makes this navigation possible.</p> <p>Reading a list of headings helps users understand the page’s structure without seeing its layout. They can then jump to a section by selecting its heading. Clear headings for areas such as navigation, search, a directory, settings or login can make those parts of an application easier to find and navigate.</p> <pre><code>— Instagram — Feed — Sunset — Latte — Settings — Profile</code></pre> <p>Sometimes a design has no visible headings for important page regions: a menu or search area may look clear without one. You can still give the region a meaningful heading for screen-reader navigation. If it must be hidden visually, use a “visually hidden” technique that keeps the text available to assistive technology. Do not use “display: none” for this purpose, because it also hides the text from screen readers. The aim is to preserve the page’s structure for users who cannot see its layout.</p> <p>Think about both the appearance and the organization of your page. CSS controls how it looks; headings should describe its content and make the structure clear. Keep both in mind when building a page or application.</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>