HTML Elements Explained: The Essential Structure of the Web
Behind the every beautiful website HTML plays a crucial role by builing the cor structure of the site. HTML (HyperText Markup Language) works as the Skeleton of a website. It does not handle the styling and logic part of the site but makes the entire structure of the website. It decides where the texts, images and headings render.
What is an HTML Tag?
Think of a Tag as a set of instructions for the browser. A tag tells the browser that the text inside here should be treated as a specific type of content. Such as if it is a heading then it will be treated as a heading.
Most tags come in pairs:
Opening Tag (
<p>): Tells the browser where the instruction starts.Closing Tag (
</p>): Tells the browser where the instruction ends (notice the forward slash/).Content: The actual text or image sitting between the tags.
Tag vs. Element: What’s the Difference?
These terms are often used changeably but there is a bit different:
The Tag is just the piece of code like
<p>or</p>.The Element is the whole package: the opening tag + the content + the closing tag.
Self-Closing (Void) Elements
Remember every element doesn’t need a closing tag. But some elements don't contain any text; they just "exist" as a single instruction. These kind of elements are called Void Elements.
- Example: The
<br>tag (for a line break) or the<img>tag (for an image). You don't need to say "stop image" because the image is just a single point on the page.
Block-Level vs. Inline Elements
This is the most important concept to understand how your website will actually look in the browser.
Block-Level Elements
These elements always start on a new line and take up the full width available. They are like big boxes stacked on top of each other.
- Examples:
<div>,<h1>to<h6>,<p>,<ul>.
Inline Elements
These elements do not start on a new line. They only take up as much width as necessary and sit "in line" with other content. Inline elements doesn’t acquire the entir with of the line.
- Examples:
<span>,<a>,<strong>.
Conclusion
When you start writing HTML code you will use these tags 90% of the time:
<div>: A generic container (Block).<span>: A generic container for text (Inline).<h1>-<h6>: Headings for your titles.<p>: For your standard paragraph text.<a>: For creating links to other pages.
