HTML Headings, Text Formatting, Links, and Lists: h1-h6, Anchors, and ul, ol, dl

Headings, formatting elements, links, and lists are the four tools HTML gives you for describing what content is, and each one is chosen by meaning rather than appearance. <h1> through <h6> rank sections of a page, <strong> and <em> add importance and emphasis that <b> and <i> deliberately do not, an <a> element with an href points at a destination that can be another site or an id further down the same page, and <ul>, <ol>, and <dl> describe three genuinely different kinds of grouping. CSS handles how all of it looks.

Headings rank content; they do not set text size

The six heading elements express rank. <h1> is the top level and normally names the whole page, much as <title> does; a page is generally expected to have a single <h1>. Each higher number nests inside the nearest preceding lower one, so an <h3> is a subsection of the <h2> above it.

Two habits keep this clean. First, start at <h1> and do not skip levels going down: follow <h2> with <h3>, never <h4>. Screen reader users navigate by jumping between headings and hear the levels as an outline, so a gap reads as a missing piece of the page. Coming back up is fine — an <h3> can be followed by an <h2> that opens the next major section. Second, never choose a heading for its default size; that is what the CSS font-size property is for.

Wrapping content in <section> does not renumber anything. The "document outline algorithm" that was supposed to demote headings nested inside sectioning elements was never implemented by any browser or assistive technology and is no longer part of the HTML standard, so an <h1> inside a <section> is still announced as a level-1 heading. Nesting <h1> elements that way was allowed in older versions of the standard and is now non-conforming — pick the rank explicitly instead.

Formatting elements that carry meaning

<strong> marks importance, seriousness, or urgency. <em> marks stress emphasis — the word you would lean on when reading a sentence aloud, which can change what the sentence means. Their look-alikes exist for different jobs: <b> draws attention without conveying extra importance, and <i> sets text apart by convention, such as a species name, a technical term, or a phrase in another language. None of the four is deprecated; they simply mean different things. If all you want is bold or italic pixels, reach for the CSS font-weight and font-style properties instead.

Links, fragments, and targets

An <a> becomes a link once it has an href. That value can be an absolute URL, a site-relative path, a scheme such as mailto: or tel:, or a fragment. A fragment begins with # and names the id of an element in the document, so <a href="#gear"> scrolls to <h2 id="gear">. Ids must be unique within the page and cannot contain whitespace; the empty fragment href="#" — and href="#top" when nothing on the page carries that id — points at the top of the current document.

The target attribute says which browsing context opens the URL: _self (the default), _blank (usually a new tab, though a user can configure a new window), _parent, and _top. rel="noopener" stops the opened page from reaching back through window.opener; browsers now apply that behavior implicitly for target="_blank", so writing it out is belt-and-braces rather than essential. rel="noreferrer" is the separate keyword that suppresses the referrer header, and it blocks window.opener as well. For the wider picture of where this fits, see the WGU D276 Web Development Foundations study guide.

Three kinds of lists

Use <ul> when reordering the items would not change the meaning, and <ol> when it would — steps, rankings, legal clauses. Use <dl> for name-and-value groups such as a glossary or a specifications table, pairing <dt> terms with <dd> descriptions. Both <ul> and <ol> accept only <li> children (plus the script-supporting <script> and <template>), which is why a nested list has to live inside an <li>.

A worked example

Here is a small page that uses every piece correctly. Read the structure before the details.

<h1>Trail Guide: Cascade Loop</h1>

<nav>
  <ul>
    <li><a href="#gear">What to bring</a></li>
    <li><a href="#route">Route</a></li>
  </ul>
</nav>

<h2 id="gear">What to bring</h2>
<dl>
  <dt>Shell</dt>
  <dt>Hardshell jacket</dt>
  <dd>Waterproof outer layer. <strong>Required</strong> above the tree line.</dd>
</dl>

<h2 id="route">Route</h2>
<h3>Day one</h3>
<ol>
  <li>Park at the ranger station.</li>
  <li>Follow the blue blazes north.
    <ul>
      <li>Water at mile 3</li>
    </ul>
  </li>
</ol>

The headings run h1, h2, h2, h3 with no gaps. The nav is an unordered list because the two links have no required order, while the day-one directions are an ordered list because reversing them sends you the wrong way. Two <dt> elements share one <dd> because "Shell" and "Hardshell jacket" name the same item. The nested list sits inside the second <li>, and each fragment link matches an id exactly.

Choosing the list type

Mistakes people actually make

• Putting non-list content directly inside a list. A stray <p> or a nested <ul> placed between two <li> elements is invalid. Anything that belongs to an item goes inside that item's <li>.
• Writing start="iv". The start attribute and the <li> value attribute are always plain integers, no matter what type is set to.
• Using <dl> for indentation or dialogue. If the content is not a set of name-and-value groups, it is not a description list — the HTML standard rules out dialogue explicitly, and indentation is a job for the CSS margin property.
• Confusing noopener with noreferrer. Both block window.opener; only noreferrer also suppresses the referrer header.
• Choosing headings by size. Decide rank from the outline first, then style.

Reasoning through the tricky cases

When <ol reversed> is used, numbering counts down and starts at the item count unless start overrides it. When an <li> carries value="7", that item is numbered 7 and the ones after it continue from there — 8, 9, and so on; the same attribute has no meaning inside a <ul>. Prefer the CSS list-style-type property over the type attribute unless the marker itself is referenced in the text, as in a numbered clause, and note that type on an individual <li> is deprecated outright. If you are unsure whether a list is ordered, shuffle it mentally: if the meaning survives, use <ul>.

Check anything uncertain against the primary source — MDN on heading elements and MDN on the anchor element — then run more D276 practice questions.