Chuck's Academy

Basic HTML

Links and Navigation

Link Tags (<a>)

The <a> tag is used to create links, allowing users to navigate to other pages or sections of the same page. The <a> tag requires the href attribute to define the destination URL.

html
"Here we have a simple link. The a tag, with the href attribute, redirects to the example.com page."

Internal and External Links

Links can be internal (within the same website) or external (to other websites). Internal links use relative paths, while external links use absolute paths.

html
"This code shows an internal link, which uses a relative path, and an external link to Wikipedia, which uses a full absolute path and opens in a new tab."

Email Links

To create email links, we use mailto: followed by the email address. Clicking the link opens the user's default email client with the address already filled in.

html
"This email link uses mailto to open the user's email application with the email address ready to send."

Link Attributes (title, target, etc.)

Besides href, the <a> tag can include several useful attributes. For example, title shows a tooltip when the user hovers over the link, and target defines how the link will open.

html
"This link includes the title attribute, which displays text when hovering over it. It also includes target, which allows opening the link in a new tab."

Creating Navigation Menus

We can use unordered lists (<ul>) and list items (<li>) to create navigation menus. These menus organize multiple links into a structured and user-friendly format.

html
"This code displays a navigation menu with three links organized in a list. We use ul and li to structure the menu within a nav tag."

Chapter Conclusion

With these tools, you can now create links and navigation menus, facilitating movement within your website and between different pages. In the next chapter, we will learn about inserting images and multimedia content in HTML.


Ask me anything