What an HTML element is
Opening, closing & self-closing tags
Block vs inline elements
How to nest elements correctly
Void, empty & non-void elements
HTML5 semantic elements
What is an HTML Element?
An HTML element is the fundamental building block of every webpage. It is made up of a start tag, content, and an end tag. Together they tell the browser what type of content to display and how to structure it.
Case Insensitive: HTML tags are not case sensitive — <P> works the same as <p>. However, always use lowercase — it is the modern HTML5 standard.
Anatomy of an HTML Element
Every HTML element has three core parts:
Syntax
The general syntax of an HTML element:
<tagname> Content goes here... </tagname>
<tagname> — The opening tag. Marks where the element begins.
Content — Text, images, or other HTML placed between the tags.
</tagname> — The closing tag. Has a forward slash before the tag name.
Block vs Inline Elements
All HTML elements are either block-level or inline. This is one of the most important distinctions in HTML.
Block-Level Elements
Always start on a new line and take up the full width available.
<div><p><h1>–<h6><section><article><header><footer><ul><li>
Inline Elements
Stay within the flow of text. Only take up as much width as their content.
<span><a><strong><em><img><code><button><label>
Block vs Inline — Visual Demo
This is a <div> — takes full width (block)
This is another <div> — starts on new line (block)
This is a <p> with <span> inline and <strong> inline — they flow within text.
🟡 Yellow = block elements | 🔵 Blue = inline elements
HTML5 Semantic Elements
HTML5 introduced semantic elements — tags with meaningful names that describe the purpose of their content. They replace meaningless <div> tags and make code more readable and SEO-friendly.
Why semantic elements matter: Search engines understand your content better. Screen readers help visually impaired users. Other developers understand your code instantly.
<header>
Top section — logo, nav, title.
<nav>
Navigation links and menus.
<main>
Primary content — only one per page.
<section>
Thematic grouping with a heading.
<article>
Self-contained content like a blog post.
<aside>
Side content — sidebars, tips.
<footer>
Bottom — copyright, links, contact.
<figure>
Media with optional <figcaption>.
<body>
<header>
<h1>TipsInLearning</h1>
<nav><a href="/">Home</a></nav>
</header>
<main>
<article>
<h2>HTML Basics</h2>
<p>Learn HTML from scratch...</p>
</article>
<aside><p>Related: CSS Course</p></aside>
</main>
<footer><p>© 2026 TipsInLearning</p></footer>
</body>
Nested HTML Elements
Nesting means placing one element inside another. The rule is simple: always close inner tags before closing outer tags.
<html>
<head>
<title>My Page</title>
</head>
<body>
<main>
<article>
<h1>My Heading</h1>
<p>My paragraph.</p>
</article>
</main>
</body>
</html>
<p> Bold <strong> text </p></strong>
<div><span>Text</div></span>
<p> Bold <strong> text </strong></p>
<div><span>Text</span></div>
When is an End Tag Required?
Not all HTML elements need a closing tag. HTML5 defines three types:
Void Elements
Cannot contain content. No closing tag — ever.
<br><img><input><hr><meta><link>
Non-Void Elements
Can contain content. Must have opening and closing tags.
<p><div><h1><section><article>
Optional Closing Tags
Some elements have optional closing tags — always close them for clean code.
<li><tr><td><th>
1HTML elements = opening tag + content + closing tag
2Block elements start on new lines; inline elements flow in text
3HTML5 semantic elements give meaning to your page structure
4Always close inner tags before outer tags when nesting
5Void elements like <br> and <img> never need a closing tag
6Always write tags in lowercase for clean, modern HTML5 code
Frequently Asked Questions
Common questions beginners ask about HTML elements:
What is the difference between a tag and an element?
A tag is just the code marker — like <p> or </p>. An element is the complete combination of the opening tag + content + closing tag. So <p>Hello</p> is a paragraph element, while <p> alone is just a tag.
Can I put a block element inside an inline element?
Generally no — you should not put block elements inside inline elements. For example, putting a <div> inside a <span> is invalid HTML. Block elements should go inside other block elements or the <body>. Inline elements go inside block elements.
What happens if I don't close a tag?
Modern browsers are forgiving and will try to fix unclosed tags — but the result can be unpredictable. Styling may break, layout can collapse, and JavaScript may not work as expected. Always close your tags properly. Use a code editor like VS Code which highlights missing closing tags automatically.
What is the difference between <div> and <section>?
<div> is a non-semantic container — it has no meaning to browsers or search engines. <section> is a semantic element that tells browsers the content is a thematic grouping. Use <section> when the content has a heading and a clear purpose; use <div> only for styling purposes.