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.
<html></html>
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.
<html> <head></head> <body></body> </html>
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.
<header></header> <footer></footer>
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 <header> and <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.
nav tag: definition, purpose, and use cases.<header> <nav></nav> </header>
The nav tag is used for your navigation on desktop or hamburger menu for mobile and is located within the <header> tag. You will always use this to specify your navigation menu. Your logo will not be included within the <nav> tag.
<main></main>
Next we have the main tag. This tag will work alongside the <header> tag and the <footer> tag. The <main> tag will NOT be within those tags. To keep it simple the <main> tag wraps the purpose of the page. For the Home page the main tag will serve as the outer tag to wrap basically everything the <header> and <footer> do not wrap including your hero section, any welcome text, and more. For a Blog List Page, which lists a selection of blog posts to choose from, the main tag will wrap the list of blogs. For a Blog Post page the main tag will wrap the blog post. Use the main tag in tandem with the <header> and <footer>, and remember that the <main> tag wraps the purpose of the page and you will be fine.
<head></head> <body> <main> <article></article> <section></section> </main> </body>
Now to get even more nuanced you can then break up your <main> in different content units with the <article> and <section> tag. Back to our blog post example, the article tags will wrap around the blog post. The <section> tags will wrap around supplementary content to the blog or even to break up different parts of the blog post. So the <section> tag can work in tandem with the article tag to organize the content with the <main> tag or the <section> tag can be used to organize the content within the <article> tag.
Some common uses of the <section> tag include a related blog posts section, a comments section, an author summary section. Notice how I refer to each of these as a section. Each will have their own set of <section> tags that wrap around them. They will not all be wrapped by the same section tags.
Whereas the <main> tag is more required, the <article> and <section> tags can be used at your discretion and depending on the size of the page and amount of content. Generally the more clarity the better but I would say there is no need to go overkill or overthink this.
<aside></aside>
The <aside> tag is used for supplemental content on a webpage. You can think of it as a sidebar on a webpage. It generally is within the <main> tag but can also be outside the <main> tag. When the content in the <aside> tags is related to the purpose of the page then put it in the <main> tag. When the content in the <aside> tag is NOT RELATED to the primary purpose of the page then put the <aside> tags and content outside of the <main> tags.
Common use cases of the <aside> tag is to include navigation links and advertisements. If the links are not related to the purpose of the page and are more general links referencing site-wide, then you would put the <aside> tags outside the <main> tags. The same goes for advertisements.
To keep it simple, if you want to use a caption with an image on your webpage, then you need to wrap around your <img> tag with <figure> tags. Within the <figure> tag and below the <img> tag you can then use a <figcaption> tag.
Note: The <figcaption> tag is different from the alt attribute that you can add within an <img> 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 <figcaption> tag is used for content below an image to provide a summary or details about the image that serves as another piece of content on your webpage.
<p>This is a <mark>paragraph</mark>.</p>
The <mark> 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 <span> tag, but unlike a span tag which has no semantic meaning, the <mark> tag has semantic meaning. Do not mistake the <mark> tag for the <i> (italics) tag which only italicizes text but adds no meaning. Use it strategically and sparingly within your content.
<progress></progress>
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.
<output></output>
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 <form> tag and its elements in a later blog post.
That wraps up the most important tags you will use to broadly structure your webpage. In the next blog post you will learn more about the tags used to organize your text within your webpage.
No fluff. Just real projects, real value, and the path from code to cash — one useful build at a time.