Understanding HTML Tags and Elements: The Skeleton of the Web
Focused on building robust web applications and understanding the underlying infrastructure of the internet.
Welcome to the foundation of everything you see on the internet! As part of your journey in web development, the first and most important language you'll encounter is HTML (HyperText Markup Language).
If a website were a house, HTML would be the foundation and the wooden frame. It doesn't provide the paint (CSS) or the electricity (JavaScript), but without the skeleton, there is no house.
What is HTML and Why Use It?
HTML is the standard language used to create the structure of web pages. It tells the browser what a piece of content is. Is it a paragraph? A heading? A button? Without HTML, your browser would just see a giant, unorganized wall of text. By using HTML, we "mark-up" the content to give it meaning and structure.
What is an HTML Tag?
Think of a tag as a set of instructions for the browser. Most tags come in pairs: an opening tag and a closing tag.
Opening Tag:
<p>(Tells the browser: "Start a paragraph here.")Closing Tag:
</p>(Tells the browser: "End the paragraph here.") The forward slash/is what distinguishes the end from the beginning.
The Difference: Tag vs. Element
This is a common point of confusion for beginners, but the distinction is simple:
The Tag: Just the labels (
<p>or</p>).The Element: The entire unit. This includes the opening tag, the content inside, and the closing tag.
Analogy: If you have a cardboard box, the Tags are the cardboard sides, and the Element is the entire box including the stuff you put inside it.
Attributes: Adding More Info
Tags can also carry extra information called Attributes. These sit inside the opening tag and usually look like name="value".
For example, a link uses the href attribute to tell the browser where to go:
<a href="https://google.com">Click me</a>
<a>is the tag.hrefis the attribute name."https://google.com"is the attribute value.
Self-Closing (Void) Elements
Not all elements follow the "opening and closing" rule. Some elements are "lone wolves" that don't need a closing tag because they don't hold any text content—they represent an object or a command.
<img>: Used to put an image on the page.<input>: Creates a field where users can type.<br>: Used for a simple line break.<hr>: Used for a horizontal thematic break (a line).
Block-Level vs. Inline Elements
How elements sit on the page depends on whether they are "Block" or "Inline." This is the key to understanding how to layout your page.
1. Block-Level Elements
These elements are "greedy." They always start on a new line and take up the full width available to them, from left to right.
- Examples:
<h1>to<h6>,<p>,<div>,<ul>,<section>.
2. Inline Elements
These elements are "polite." They only take up as much width as necessary and allow other elements to sit right next to them on the same line.
- Examples:
<span>,<a>,<strong>,<em>,<img>.
The Boilerplate: The Essential Structure
Every HTML file needs a basic "skeleton" to work correctly. Without these tags, the browser might get confused about how to render your page.
HTML
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first paragraph.</p>
</body>
</html>
<!DOCTYPE html>: Tells the browser this is an HTML5 document.<html>: The "root" element that wraps everything.<head>: Contains metadata (info about the page, like the title) that isn't shown to the user.<body>: Contains all the visible content like text, images, and links.
Commonly Used HTML Tags
Here are the "Daily Drivers" you will use in almost every project:
| Tag | Name | Use Case |
<h1> - <h6> | Headings | Titles and subtitles (h1 is the most important). |
<p> | Paragraph | For standard blocks of text. |
<a> | Anchor | To create hyperlinks to other pages. |
<img> | Image | To display pictures. |
<ul> / <li> | Unordered List | To create bulleted lists. |
<div> | Division | A generic container used to group other elements. |
<span> | Span | A generic inline container for styling parts of text. |
Pro Tip: The "Inspect" Tool
The best way to learn HTML is to see it in the wild. Right-click anywhere on this page and select "Inspect" (or press F12). You can see the exact tags and elements that make up the website you are currently looking at!
