HTML Fundamentals
Problem Statement
After learning the basics of HTML, including tag and document structure, you might be wondering what else is available to use to build out full webpages. How do you display an image? How do you add a readable list of topics? How do you link page elements beyond text? Now you're ready to explore these fundamental tools. Here's a high-level overview before you dive into practicing with the labs.
Objectives
Identify ordered, unordered and definition lists
Identify images
Identify links
Identify HTML validation tools
Identify ordered, unordered and definition lists
When we want to present a list of items in a clear, readable format, we turn to the HTML unordered list, represented by the the ul tag.
If it's important to distinguish a particular order of the items (as for a recipe or ranking), we use an ordered list, or the ol tag.
Notice the nesting of our items within the lists. Each li is a list item contained in the larger ul or ol container.
Another type of list we can use is a definition list, which defines specific types of items.
Identify images
To include an image in our page, we use an img tag.
There are two notable things about the img tag. The first is that it has no closing tag. This tag closes itself. Secondly, it handles a lot of attributes. Our alt attribute provides descriptive text the browser can display if it can't find the image file. The browser can also display the title text to give the user more information about the image. The width and height attributes define the size of the image that shows up in the browser.
Identify links
You might be familiar with basic link structure already, but here are other ways we can power them up.
We begin with a standard text hyperlink.
What if we want to link an image instead of text? We can replace the text within the a tags with our image tag.
Or what if we want a link that will direct to an email address?
Sometimes we might want to link to another, specific location on the same webpage. We can then target an element that we identified or classified earlier.
When considering what location links point to, you will choose between relative or absolute links. A relative link directs to content within the same website.
An absolute link, on the other hand, links to external content and requires a fully defined URL path. This is likely the type of link you see most often.
Identify HTML validation tools
Resources
Conclusion
Now that you've taken a first look at these new HTML elements, you'll be better prepared to practice them in labs, where you'll learn more about each one and how to use it effectively.
Last updated