Understanding HTML Tags and Elements
Aspiring Full-Stack Developer
To simplify things, I like to group HTML elements into three informal categories:
Meta-related elements
Content-related elements
Layout-related (semantic) elements
These aren’t official HTML categories. They’re just a heck to make learning feel less overwhelming.
Meta Elements: Setting Up the Page
Every HTML file starts with a few elements that don’t show up on the page but tell the browser what it’s dealing with.
The very first thing is the doctype. This tells the browser,
“Hey, this is an HTML5 document.” HTML has gone through multiple versions, and this line makes sure the browser uses modern rules.
Next comes the <html> tag. It wraps your entire document. It might feel redundant after all, you just told the browser it’s HTML but computers like things to be very explicit.
Inside <html>, you’ll always see two important sections: <head> and <body>.
The head contains extra information about the page. Think of it like metadata in a photo. Your phone stores the location, time, and camera settings, but you don’t see that when viewing the image. The head works the same way.
One of the most important things inside the head is the <title>. This is what appears in the browser tab and in search results. It’s not visible on the page itself, but it’s still extremely important.
This is also where CSS usually lives, either inside a <style> tag or linked from an external file using a <link> tag.
The body is where the actual content of your page goes. Everything users see lives here.
Content Elements: Describing What the Content Is
Once you’re inside the body, you start working with content-related elements. These tell the browser what kind of content something is.
The most basic one is the <p> tag. It represents a paragraph of text.
Then come the heading tags: <h1> through <h6>. These are not just for making text bigger or bold. They define the structure of your document.
Think of headings like a table of contents in a book.
<h1>is the title of the page. You should usually have only one.<h2>creates major sections.<h3>creates sub-sections inside those sections, and so on.
Using headings correctly helps search engines, screen readers, and even you as a developer understand the structure of the page.
Lists are another essential part of HTML.
You’ll mostly use:
<ul>for unordered (bullet) lists<ol>for ordered (numbered) lists
Each item inside the list uses an <li> tag. The list defines that a list exists, and the list items define what’s inside it.
For inline text emphasis, HTML gives us <strong> and <em>.
<strong> means strong importance, not just bold text.<em> means emphasis, not just italics.
These elements have semantic meaning. Screen readers change how they read the text, which makes your site more accessible.
Links are created using the <a> tag, also called the anchor tag. It “anchors” text to another location either another page or another spot on the same page using IDs.
Images use the <img> tag. You simply tell the browser where the image is, and it shows up.
Finally, there’s the <span> tag.
It has no default styling and no semantic meaning. Its job is simple: select part of text so you can style it with CSS. It’s incredibly useful when you want fine control over small pieces of content.
Layout & Semantic Elements: Organizing the Page
As your pages grow, you’ll need elements that describe how content is grouped.
The <main> element represents the main content of the page. You should have only one per page.
The <header> usually appears at the top and often contains things like logos and navigation.
The <footer> usually appears at the bottom and contains things like copyright info or extra links.
Navigation menus belong inside a <nav> tag. This should be used for important site navigation, not just random groups of links.
Then there are <article> and <section>, which often confuse beginners.
An article is a standalone piece of content. If you took it out of the page and placed it somewhere else, it would still make sense on its own. Blog posts, recipes, and news items are great examples.
A section is used to group related content together. Sections usually depend on the surrounding content and help organize a page into logical parts.
Headers and footers can also exist inside articles, which is very common for blog posts.
The Div
Finally, there’s the <div>.
A div has no semantic meaning. It exists purely for layout and styling. You’ll see divs everywhere, especially when working with CSS layouts.
As a general rule, try to use semantic elements like section, article, or main first. But when none of them make sense and you just need a container for layout, using a div is perfectly fine.