HTML and CSS Reference
For example, clicking the text “Shay,” which is wrapped inside the anchor element with
the href attribute value of http://shayhowe.com , will take users to my website (see
1. <a href="http://shayhowe.com">Shay</a>
Figure 2.7 “Shay” used as hyperlink text referencing http://shayhowe.com
Wrapping Block-Level Elements with Anchors
By nature the anchor element, <a> , is an inline element, and, according to web
standards, inline-level elements may not wrap block-level elements. With the in-
troduction of HTML5, however, anchor elements specifically have permission to
wrap either block-, inline-, or any other level elements. This is a break from the
standard convention, but it's permissible in order to enable entire blocks of con-
tent on a page to become links.
Relative & Absolute Paths
The two most common types of links are links to other pages of the same website and links
to other websites . These links are identified by their href attribute values, also known as
Links pointing to other pages of the same website will have a relative path , which does not
include the domain (.com, .org, .edu, etc.) in the href attribute value. Because the link is
pointing to another page on the same website, the href attribute value needs to include
only the filename of the page being linked to: about.html , for example.
Should the page being linked to reside within a different directory, or folder, the href at-
tribute value needs to reflect this as well. Say the about.html page resides within the
pages directory; the relative path would then be pages/about.html .
Linking to other websites outside of the current one requires an absolute path , where the
href attribute value must include the full domain. A link to Google would need the href
attribute value of http://google.com , starting with http and including the domain,
.com in this case.