Text, List, Link, and Navigation Attributes

This chapter groups the attributes you use most often with text, list, and navigation-related elements.

Attributes for Headings and Text Tags

Tags often used here:

• <h1> to <h6>
• <p>
• <abbr>
• <blockquote>
• <q>

Common useful attributes:

• id
• class
• title
• lang
• dir
• cite

Example:

<blockquote cite="https://example.com/article">
    Semantic HTML improves meaning and accessibility.
</blockquote>

Attributes for Lists

Tags:

• <ul>
• <ol>
• <li>

Important attributes:

• start on <ol>
• reversed on <ol>
• type on <ol>
• value on <li> in ordered lists

Possible type values for <ol>:

• 1
• A
• a
• I
• i

Example:

<ol type="A" start="2">
    <li>HTML</li>
    <li>CSS</li>
</ol>

Attributes for Links

Tag:

• <a>

Important attributes:

• href
• target
• rel
• download
• hreflang
• title

Possible target values:

• _self
• _blank
• _parent
• _top

Common rel values:

• noopener
• noreferrer
• external
• prev
• next

Example:

<a href="guide.pdf" download="html-guide.pdf">Download Guide</a>

Attributes for Navigation

Tag:

• <nav>

Useful attributes:

• aria-label
• id
• class

Example:

<nav aria-label="Course navigation">
    <a href="#intro">Intro</a>
    <a href="#forms">Forms</a>
</nav>

Good Practices

• use meaningful link text
• choose target="_blank" carefully
• combine it with rel="noopener noreferrer" for external tabs
• use aria-label when navigation meaning is not obvious