liveBook · Manning

Anchor element

As explained in Web Design Playground

An HTML element that represents a hyperlink and, in markup, is typically rendered with anchor syntax.

An anchor element creates a hyperlink: a clickable path to another page or another place on the current page. In HTML, it uses an opening <a> tag and a matching </a> closing tag. The letter a means “anchor,” a name connected with links that can guide readers to different parts of a page. section 2.22 section 16.32

Build a basic link in three small pieces:

  • Put the destination in the href attribute. href means hypertext reference. section 2.22
  • Place the words that visitors should see between the opening and closing tags. section 2.23
  • Use a local filename for another page on your site, or a full URL for a page elsewhere. section 2.22

A link in action

<a href="wordplay.html">Explore wordplay</a> The browser displays “Explore wordplay” as the link, while href points to the local page named wordplay.html. For a remote page, replace the filename with its full URL, such as http://wordspy.com/index.php. Enter URL letters and capitalization carefully: an incorrect case can lead to a 404 Not Found error. section 2.22 section 2.23

Where do new words come from? Sometimes we&rsquo;re lucky enough to know the answer. For example, the word 
<a href="http://www.etymonline.com/index.php?term=scofflaw">scofflaw</a>     #1    #2    #3  
originated as a contest winner and 
<a href="https://wordspy.com/index.php?word=frankenfood">Frankenfood</a>     #1    #2    #3  
came from a letter to the editor of a newspaper.

See complete anchor examples linking selected words, including the opening tag, href destination, visible text, and closing tag. section 2.23

How Web Design Playground covers it

How deep it goes
Explains opening and closing tags, href destinations, link text, URL types, and capitalization risks, while deferring in-page implementation.
Examples
Uses wordplay.html, wordspy.com, etymonline.com, and wordspy.com word links as concrete anchor examples.
What it assumes
Assumes familiarity with basic HTML tags and page structure while explaining anchor syntax from its visible parts.
What you can do after
Apply it via HTML markup to connect visible text with local filenames or remote URLs.
How it connects
Connects HTML elements with hyperlinks, URLs, href attributes, local links, remote links, and in-page links.

Also explained in

Compare how 4 books explain anchor element →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground. The section links point to the parts of the book it draws on.