Links and Navigation

Links

You will be learning about four types of hyperlinks.

• absolute
• relative
• fragment
• email

Absolute Hyperlinks

Absolute hyperlinks are used when links are needed to another website. You would use an absolute link if you wanted to code a link on your website to cnn.com.

Relative Hyperlinks

Relative hyperlinks are used when links are needed to a page within your own website. When coding navigation, relative links are used because the links are to other pages within the same site.

Fragment Hyperlinks

Fragment hyperlinks are used when links are needed to jump to or from a specific area of the same web page. An example might be when a site is very long and a "back to top" button is needed. While this site is not long enough to really require a back to top button, one has been created at the bottom of this page for your coding practice.

E-Mail Hyperlinks

Email hyperlinks will automatically launch the user's default mail program. Unfortunately, sites that have coded email hyperlinks may have an issue with spam. The trend today is to use contact forms rather than email addresses, or include the address in the website as content rather than an email link. However, for practice, code your name linking to your ASU email address here. TU_CORREO@asu.edu

Navigation

Navigation is coded using an unordered list because navigation is a list of web pages. As mentioned above, relative hyperlinks are used when coding navigation. When you view your navigation html in a browser, you will notice that by default it is vertical and has bullets. This is because the navigation is created in an unordered list. The appearance of the navigation can be changed to be horizontal with styling, but for now we are interested in understanding how to code semantic navigation with links.

Back to Top