Structuring your HTML
You may have noticed in our intro or while inspecting these webpages how we used the head and body tags to seperate invisible and visible content. These are examples of HTML structure, since the head and body tags themselves serve the purpose of seperating your code which influences the visual appearence of the webpage from that which does not. Today, we will cover some other important organizational HTML tags.
So what does semantic mean? Semantic HTMl tags are tags which describe the meaning of the elements they encompass. For example, a nav tag is an example of a semantic tag because it tells you that the content inside of it are links to other pages of the website.
Every organizational element has both an opening and closing tag since they all denote a section for certain code to be written in.
Big idea: an organizational HTMl tag is a tag which does not affect the visual appearance of a page, but creates structure in your code.
Here is a quick run-down of some important organizational HTMl tags:
<html>
(this element closes with </html>)
This is our first example of an organizational HTML tag. The HTML tag itself does not change the visual appearence of the webpage, but allows us to let the browser know that it's looking at an HTML document.
<head>
(this element closes with </head>)
Check the intro tab again if you want a reminder on what this element is used for
<body>
(this element closes with </body>)
Check the intro tab again if you want a reminder on what this element is used for
<main>
(this element closes with </main>)
This element holds the content which is the most important on a specific page and unique to that page
<nav>
(this element closes with </nav>)
This element holds the links for the navbar of a webpage. For example, look at the top of this one (you can inspect to check it out!). Almost all of the time these are heavily styled with CSS, which we will get to soon!
<header>
(this element closes with </header>)
nav tags are typically placed in these; they hold introductory content such as headings or logos
<footer>
(this element closes with </footer>)
Used to define a footer, usually with copyright notices or extra information
<section>
(this element closes with </section>)
Used to divide content within a document (may be confusing for now, but we will look at an example)S
When we talk about CSS, we will get into another tag which is similar to the section tag but more commonly associated with design known as the div tag
Challenge #3: All of these tags can be a little confusing out of context, so let's check out an example which makes use of many of them to create a clear, hierarchical structure; for this challenge, head over to Plain Vanilla Web and try to find 5 examples of organizational HTML tags. You will be asked to share!