Getting Started with HTML Tags: Part One
CODE•HTML•7 min
Learning Content
Watch the video and follow along with the written guide
Remember if you know tags you know HTML. With this in mind we are going to cover important HTML tags you will frequently see on the internet.
Understanding the HTML tag: definition, purpose, and use cases.
This is the outermost tag you use to wrap all other tags. You will use it every time you use the HTML format. All websites have HTML even if they use a Javascript Framework for instance. Think of the <html> tag as the safe space where you can work on formatting your website.
Understanding the head and body tag: definition, purpose, and use cases.
Within your safe space (aka <html></html> tags) you will then have two tags the <head> tag and the <body> tag. They work together to provide details about your website. Picture an iceberg where you can only see the ice above the water, but you know there is ice underneath the water as well. That is essentially the same for the <head> and <body> tag. The <body> tag is what you see above the water: your website, your content, the images. Most of the tags you will learn about will be contained with the <body> tags. The <head> tag is what is below the water where you either do not see it or see it indirectly. We call the information in the <head> tag the metadata. This data provides details for Google crawlers such as your meta title and meta description (which you can see in a Google Search listing) as well as other descriptives for your website. The head tag also contains links to external files that work in tandem with HTML to build your website. A proper website will have multiple files and you will at times need to add links that reference these external resources. Just like the <html> tag, you will always have a <head> and <body> tag.
Understanding the header and footer tag: definition, purpose, and use cases.
With the fundamental tags in place we can now begin to structure our page (html document). As you are likely noticing, with HTML you have an outermost tag <html> and then slowly work inward as you build a webpage. You can refer to this as the document tree or Document Object Model. The <footer> tag are essentially opposites of one another. The <header> tag is for the top of your webpage and the <footer> tag is for the bottom of your website. You will always use them. The <header> tag will typically include your logo and navigation. The <footer> tag will typically include the copyright details and additional links to other parts of the website.
Understanding the nav tag: definition, purpose, and use cases.
The nav tag is used for your navigation on desktop or hamburger menu for mobile and is located within the
Understanding the main tag: definition, purpose, and use cases.
Next we have the main tag. This tag will work alongside the
Understanding the article and section tag: definition, purpose, and use cases.
Now to get even more nuanced you can then break up your
Some common uses of the
Whereas the
Understanding the aside tag: definition, purpose, and use cases.
The
Common use cases of the
Understanding the figure tag and figcaption tag: definition, purpose, and use cases.
To keep it simple, if you want to use a caption with an image on your webpage, then you need to wrap around your tag with
tag you can then use a
Note: The tag to provide a description for an image in the event the image does not load and to make your website accessible for screen readers. The
Understanding the mark tag: definition, purpose, and use cases.
The tag and the content it wraps is an inline element used to provide importance to text on a page. By default this text is highlighted in yellow similar to highlighting words in a book with a highlighter. This is similar to a tag, but unlike a span tag which has no semantic meaning, the tag has semantic meaning. Do not mistake the tag for the (italics) tag which only italicizes text but adds no meaning. Use it strategically and sparingly within your content.
Understanding the progress tag: definition, purpose, and use cases.
The progress tag is used whenever you want to use a progress bar on your website. For beginners this is not a common tag to use and not something frequent you will encounter.
Understanding the output tag: definition, purpose, and use cases.
The result of any calculations performed on your website should be wrapped with an output tag. A common use case would be within forms, for instance if you wanted users to be able to order a quantity of shirts and to then get back the total price based on quantity ordered. You will learn more about the
Code Sandbox
Write, run, and test your code in real-time
Ready to practice?