Understanding HTML Tags and Elements
What HTML is and why we use it ?
HTML (HyperText Markup Language) is a markup language that tells web browsers how to structure the web pages you visit.
HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way. The enclosing tags can make content into a hyperlink to connect to another page, italicize words, and so on.
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
Syntax : <tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
| Start tag | Element content | End tag |
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> | none | none |
The anatomy of our element is:
The opening tag: This consists of the name of the element (in this example, p for paragraph), wrapped in opening and closing angle brackets. This opening tag marks where the element begins or starts to take effect. In this example, it precedes the start of the paragraph text.
The content: This is the content of the element. In this example, it is the paragraph text.
The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This marks where the element ends. Failing to include a closing tag is a common beginner error that can produce peculiar results.
HTML Elements
Every web page are a lists all the HTML elements, which are created using tags. They are grouped by function to help you find what you have in mind easily.
Such as, <html> element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.
The Difference Between a Tag and an Element
These terms are often used interchangeably, but there is a distinct difference:
Tag: These are the individual labels used to mark the beginning and end of a piece of content. They are wrapped in angle brackets, like
<p>(opening tag) and</p>(closing tag).Element: This is the entire package. It includes the opening tag, the content inside, and the closing tag.
The Anatomy:
<p>(Tag) +Hello World!(Content) +</p>(Tag) = An HTML Element
Self-closing (void) elements
While most HTML elements are like boxes (they have an opening tag, some content inside, and a closing tag), void elements are more like standalone stamps. They don't contain any text or other tags, so they don't need a closing tag.
Examples
Here are the void elements you will encounter most often:
<img>(Image): Used to display a picture.<img src="cat.jpg" alt="A cute cat">(There is no such thing as</img>)<br>(Line Break): Used to force a new line within text.Line one <br> Line two<hr>(Horizontal Rule): Used to create a thin horizontal line across the page.Section Alpha <hr> Section Beta<input>(Input Field): Used for typing text in a form.<input type="text" placeholder="Your Name">
Block level vs Inline Elements
Think of elements as having different "personalities" regarding how much space they take up on a screen.
Block-Level Elements →
These are the "greedy" elements. They always start on a new line and stretch out to take up the full width available, like a long wooden plank.
Behavior: Stack on top of each other.
Examples:
<div>,<h1>through<h6>,<p>,<ul>.
Visual Layout: [ --- Block Element 1 --- ] [ --- Block Element 2 --- ]
Inline Elements →
These elements are "polite." They only take up as much width as necessary for their content and sit side-by-side with other elements, like beads on a string.
Behavior: Stay in the same line as the surrounding text.
Examples:
<span>,<a>,<strong>,<img>.
Visual Layout: [ Inline A ] [ Inline B ] [ Inline C ]
Commonly Used Tags
The Structural →
<h1>to<h6>(Headings): These define the hierarchy of your titles.<h1>is the most important (the main title), and<h6>is the least.- Example:
<h1>My Awesome Blog</h1>
- Example:
<p>(Paragraph): Your go-to for any standard block of text.- Example:
<p>This is where the story begins.</p>
- Example:
<div>(Division): A generic block-level container. It doesn't do anything visually on its own, but it’s used to group other elements together for styling.- Example:
<div> [Image] [Heading] [Text] </div>
- Example:
<span>(Span): A generic inline container. It’s used to wrap a specific word or phrase within a larger sentence to change its style.- Example:
<p>The sky is <span style="color: blue;">blue</span> today.</p>
- Example: