HTML Links & Navigation

14. Query Parameters and Navigation

A query string can pass information in a URL. It begins with a question mark and can contain key-value pairs.

Example

<a href="/courses/?category=html&level=beginner">
    Beginner HTML Courses
</a>

Here:

• category=html specifies a category.
• level=beginner specifies a difficulty level.
• & represents the ampersand character in HTML source.

The destination application decides how to interpret the query parameters. HTML alone does not filter database records or validate submitted information.

15. Percent-Encoding and Special Characters

URLs sometimes need percent-encoding for characters that are not permitted in a particular context or that have a reserved meaning.

Examples

For example, a path containing a space might be represented as:

<a href="/courses/html%20basics.html">
    HTML Basics
</a>

Percent-encoding must be applied to the appropriate URL component. Reserved characters such as /, ? and # can have structural meanings, so encoding or decoding them indiscriminately may change a URL's meaning.

16. Accessible Link Text

Link text should communicate the destination or action clearly, even when users encounter the link outside its surrounding paragraph.

Weak Example

<p>To learn HTML, <a href="/courses/html.html">
click here</a>.</p>

Better Example

<p>
    Learn HTML through our
    <a href="/courses/html.html">
        complete HTML beginner course
    </a>.
</p>

Additional best practices:

• Use descriptive link text rather than repeated vague labels.
• Ensure links can be identified and activated with a keyboard.
• Do not use an empty anchor when a meaningful link is required.
• Use accessible names for navigation landmarks.
• Indicate when a link opens a new tab if that behavior may surprise users.
• Do not rely on color alone to distinguish links from ordinary text.

17. Links Versus Buttons

Links and buttons serve different purposes.