Understanding HTML Tags and Elements
HTML stand for Hyper Text Markup Language a standard language for develop web. It is not a programming language. It is a markup language that tells the browser:
what content to show
how that content is structured
A website is divided into three main parts HTML, CSS, JavaScript. HTML is the structure of a website, by the help of CSS you can make website bellyful, and JavaScript is gives the functionality to the website.
In a website HTML decide:
→ Where the heading is
→ Where test appear
→ Where links forms, images placed
HTML is important for browser a browser can not the content of a website without HTML. A browser first read the content of website that is written in HTML then then it will show the website to client.
In simple words we can say that HTML is the skeleton of the website.
HTML tags
Most HTML tags consists three main parts Opening Tag, Content, Closing Tag. HTML tags are used to mark up content like text, images, links, buttons, etc. There are five types of tags in a webpage:
Structure Tags
These define the "bones" of the entire document.
<html>: The root element that wraps everything.<head>: Contains metadata (title, character set, CSS links).<body>: Contains all the visible content.
Text Formatting
<h1>to<h6>: Headings (H1 is the most important).<p>: Defines a paragraph.<strong>or<b>: Makes text bold.<em>or<i>: Makes text italicized.
Lists & Links
<a>: Creates a hyperlink (uses thehrefattribute).<ul>/<ol>: Unordered (bulleted) or Ordered (numbered) lists.<li>: Defines an individual list item.
Containers (Layout)
<div>: A generic block-level container used for styling or layout.<span>: A generic inline container for small bits of text.
HTML Elements
when we talk about elements we can say that it is an package of the opening tag, the attributes, the content, and the closing tag.
1. Visualizing the Element
Every element follows a specific syntax that the browser reads to render your page correctly.
Opening Tag: The name of the element (e.g.,
p,h1,div) wrapped in angle brackets< >.Attributes: Special modifiers located inside the opening tag that provide extra info (like
class="header").Content: The actual text, images, or other elements nested inside.
Closing Tag: Identical to the opening tag but with a forward slash
/.
2. Block vs. Inline Elements
Elements generally fall into two categories based on how they sit on the page. Understanding this is key to mastering layout.
Block-level Elements
These always start on a new line and take up the full width available (stretching out to the left and right as far as they can).
Examples:
<div>,<h1>-<h6>,<p>,<ul>,<section>.Behavior: Imagine them as large building blocks stacked on top of each other.
Inline Elements
These do not start on a new line. They only take up as much width as necessary for their content.
Examples:
<span>,<a>,<img>,<strong>.Behavior: They sit side-by-side with other content, like words in a sentence.
The “EMity” or void Elements
Not every element follows the "sandwich" rule. Some elements don't have content and therefore don't need a closing tag. These are called Void Elements.
| Element | Purpose |
<img> | Embeds an image. |
<br> | Inserts a single line break. |
<hr> | Creates a horizontal thematic break (a line). |
<input> | Creates a form field for user input. |
<meta> | Provides metadata about the HTML document. |
4. Nesting Elements
Elements can be placed inside other elements. This creates a "Parent-Child" relationship (the Document Object Model, or DOM).
Crucial Rule: You must close tags in the reverse order they were opened.
Correct: <div><p>Hello!</p></div>
Incorrect: <div><p>Hello!</div></p>
