This is your home page, also known as the index.html page. On this page we will discuss how to code navigation and links with examples.
Link Best Practices
As with all of the code on your page, how you write it can affect whether ot not your page is usable and accessible. There are some basic things to keep in mind with links.
-
The text inside of your link should tell the user what will happen when they click on it
- Link text should never say something like "click here"
- Bad: Click here to submit our form
- Good: You can contact us by submitting a message through our form
- Test your links to make sure they work, from every page
- Use the appropriate type of link when adding one to your page
About 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.
About Links
You will be learning about and creating six types of hyperlinks:
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 asu.edu.
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.
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: tdmcdan1@asu.edu
Telephone Number Hyperlinks
Telephone number hyperlink functionality depends on the device. If you click on this type of link from a smartphone, it will open the phone application and dial the call. If you are on a different type of device, whether or not the link will work properly depends on the software installed and device functionality. Often this type of link is only displayed on mobile screens, but you will add one in the footer below for practice.
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, or on a single-page website where the navigation links to different sections of the page below.
Combining Relative and Fragment Hyperlinks
Yes, you can use a fragment link to jump to a specific part of a page, and you can use a relative link to navigate to another page on your site, but you can also combine them! Linking the user to a specific page and section on that page can make it easier for them to find the information they need. We will add one of these in the footer of our pages.
Using a Link Fragment to Return to Top of Page
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.
Back to Top ⇧