Understanding HTML Tags and Elements
A Guide to HTML Tags and Elements
Simple guy learning web development
HTML (HyperText Markup Language) is the standard language used to create the structure of web pages. We use it to tell the browser exactly what each piece of content is, whether it's a heading, a paragraph, or a clickable button.
What is an HTML Tag?
Think of an HTML tag as a set of instructions or "labels" for the browser. They act like bookends that tell the computer where a specific type of content starts and ends.
The Anatomy of a Tag
Most tags come in pairs:
Opening Tag: <tagname> — This tells the browser, "Start the effect here."
Content: The actual text or media you want to display.
Closing Tag: </tagname> — Note the forward slash /. This tells the browser, "Stop the effect here."
Tag vs. Element
These terms are often used interchangeably, but there is a subtle distinction:
The Tag is just the individual marker.
The Element is the entire package: the opening tag, the content inside, and the closing tag.
For example, in the above picture, the paragraph tag is a HTML tag, <p> is opening tag, </p> is closing tag, text between them is content, and the entire line is a HTML element.
Self-Closing (Void) Elements
Not every element needs to wrap around text. Some elements simply "plop" an object onto the page. These are called Void Elements and they do not have a closing tag.
Common examples include:
<img/>: For displaying images.
<br/>: For a simple line break.
<hr/>: For a horizontal rule.
Block-Level vs. Inline Elements
The way elements sit on a page generally falls into two categories. Understanding this is the "Aha!" moment for most beginners.
1. Block-level Elements
These elements always start on a new line and take up the full width available.
- Examples: <div>, <h1> - <h6>, <p>, <ul>.
2. Inline Elements
These elements only take up as much width as necessary and stay on the same line as the content around them (like a word in a sentence).
- Examples: <span>, <a>, <strong>.
Commonly used HTML Tags
