An HTML element builds every part of a web page. It holds the text or block you want the browser to show. Each part on a screen comes from one or more HTML elements.
Table of Content
You write them with tags and place them in the right spot to build a full layout.
Understand the HTML Element
An HTML element starts with an opening tag. Then it holds content. After that it ends with a closing tag. This full block tells the browser how to handle the content.
<html>
<head></head>
<body>
<p>Hello world</p>
</body>
</html>
The <html> tag begins the element. Inside it, other elements define the HTML. One <p> tag contains the text “Hello world” and places it in the center. The </p> tag closes that block. The browser uses these tags to read and show the page.
This structure repeats with almost every element. Some elements stand alone. Others wrap child elements.
A few only hold text without child tags. Each one works in a certain way. You must use it the right way or the page will break.
Tags like <div>, <h1>, and <a> hold other blocks or text. Void elements like <img> do not need an end. Raw-text elements like <title> only accept plain text. The type you use will depend on the job you want to do.
A tag only marks the start or end of an element. It does not hold content by itself. The element includes both tags and the part in the middle. Some people call them the same but that causes mix-ups.
<h2>Post Title</h2>The element here holds three parts. The first tag starts it. The second tag ends it. The text in between is the real content. This element wraps them all together.
A tag without content is not an element. It becomes one only when you pair it with content. The tag is part of the element. It cannot stand alone for most use cases. You always need all three parts to make a valid block.
Some elements do not need an end tag. They stand alone and do one thing. Others hold text and block extra tags. You must treat each type the right way.
<img src="map.png" alt="Map Image">
<br>
<meta charset="UTF-8">These are void elements. The browser does not expect an end. It reads the start tag and runs it at once. Do not try to close them with a second tag. That will break your layout.
How HTML Attributes Work With Elements
HTML elements accept attributes to add data or actions. You place the attribute inside the start tag. You give it a name and value. That value tells the browser what to do or show.
<a href="https://flatcoding.com">Visit Flatcoding</a>The href tells the browser where to go. The link text comes from the content. You do not place the value outside the tag. It always stays inside the first part.
Attributes fall into three main groups:
- Global: These work with most elements. Use them for class names or IDs.
- Element‑specific: These only work with certain tags. You cannot apply them to all blocks.
- Event‑driven: These run code when the user acts on the block.
Some attributes are required. Others are optional. You must check which ones matter for your element. You cannot skip required ones. The browser will fail if you do.
Build Page Layouts With Standard HTML Elements:
HTML layout starts with a base structure. You must use the right root elements. Then place content inside the right parts. Do not break the order.
<!DOCTYPE html>
<html>
<head>
<title>Flatcoding Course</title>
</head>
<body>
<h1>Start Here</h1>
</body>
</html>The doctype tells the browser this is HTML5. The html tag wraps the whole page. You must place the head and body inside. You cannot switch their order or place them outside.
Every element inside head handles settings or links. The body holds what the user sees. You place headings, lists, links, and media here.
Use h1 once per page. Then go down with h2, h3, and so on. You must not skip levels. That will confuse screen tools or readers.
Each nested block must sit in the right parent. Use child tags only inside the right container. Place lists inside ul or ol. Do not wrap a list in a p tag.
Write With Semantic Tags and Proper Nesting
Semantic tags tell the browser what type of content you place. They make your layout easy to read. They also help screen tools and bots read the page.
Use the following tags for layout:
<header>holds site or page headers<main>wraps main body content<nav>holds site links<section>breaks content into parts<article>holds a full post or topic<aside>shows side blocks<footer>marks the end section
<header>
<h1>Course Start</h1>
</header>
<main>
<section>
<h2>Lesson One</h2>
<p>Learn how to write HTML</p>
</section>
</main>Each tag adds meaning. You do not use them for style. You write them to mark the type of content. Browsers and tools use them to build a full map of your site.
Types of HTML Elements
HTML elements fall into three main types based on how they handle content and tags. Paired elements include both start and end tags and wrap content or other elements inside.
Raw-text elements also have start and end tags but only accept plain text as content. Void elements work alone with a single tag. They do not have end tags or hold any content.
Each type plays a specific role in building web pages and helps browsers understand how to display content.
| Element Type | Definition |
|---|---|
| Paired Elements | Have start and end tags. Wrap content or other elements inside. |
| Raw-text Elements | Have start and end tags. Accept only plain text inside. Do not allow nested HTML tags. |
| Void Elements | Single tags that do not have an end tag or content. Perform actions or display content alone. |
Here are examples for each one:
Paired Elements Examples:
<p>This is a paragraph of text.</p>The paragraph holds text content. It starts with <p> and ends with </p>.
<div>
<h1>Welcome</h1>
<p>Site introduction here</p>
</div>The div groups heading and paragraph. It wraps multiple elements with start and end tags.
<a href="https://flatcoding.com">Visit Flatcoding</a>The anchor tag holds link text. It uses a start and end tag to wrap the clickable text.
Raw‑Text Elements Examples
<title>My Website</title>The title sets the page title. It holds plain text only.
<script>console.log("Hello World");</script>The script tag holds JavaScript code as plain text. No nested HTML tags allowed inside.
<style>body { font-family: Arial; }</style>The style tag contains CSS rules. It holds raw text without child HTML elements.
Void Elements Examples:
<br>The br tag adds a line break. It has no closing tag.
<img src="logo.png" alt="Site Logo">The img tag loads an image. It does not wrap content or have an end tag.
<meta charset="UTF-8">The meta tag defines page metadata. It stands alone without content or a closing tag.
Examples
Full Article Block With Heading and Text:
<article>
<h2>Post Title</h2>
<p>This post shows how to use tags to hold text blocks</p>
</article>This example shows an article tag. It wraps a post with a heading and body. The article block helps bots and readers find full pieces.
Form With Input and Button:
<form>
<input type="text" name="user" placeholder="Your name">
<button type="submit">Send</button>
</form>This block holds a form. It adds a text input and a button. The form submits when the user presses send.
Mixed Span and Paragraph Use:
<p>Learn <span class="bold">HTML</span> with hands-on tasks and samples</p>The paragraph holds a sentence. The span wraps one word. You use this to style or mark that part in code.
Figure With Image and Caption:
<figure>
<img src="cat.png" alt="A black cat">
<figcaption>This cat image shows as part of the guide</figcaption>
</figure>This figure tag holds an image and a short caption. You write this to give context to the image on screen.
Wrapping Up
The HTML element is the core of web structure. They define layout, text, links, forms, and more. You write them with tags and place them in the right spot. Each one holds a role that the browser knows.
Here is what you now know:
- Tags start and end an element
- The HTML element holds tags and content
- Some elements need no end tag
- Raw-text tags block inner HTML
- Attributes add extra meaning
- Nesting must follow a tree shape
- Div and span help group content
- Semantic tags mark the meaning of content
FAQs
What is the difference between <div> and <span> in HTML?
<div>This is a block-level container</div>
<p>This is a <span>styled text</span> inside a paragraph.</p>
What are the most commonly used semantic elements in HTML?
- <header>
- <nav>
- <main>
- <section>
- <article>
- <aside>
- <footer>
<article>
<header><h2>Blog Title</h2></header>
<p>Content of the blog post.</p>
</article>
How do I create a basic HTML document structure using HTML elements?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
What is the difference between HTML elements and HTML tags?
Tag: <p> or </p>
Element: <p>This is a paragraph.</p>
Similar Reads
The <svg> tag in HTML helps you draw graphics that scale cleanly at any size. You can animate shapes and…
You use the <aside> tag to mark extra content in HTML. It does not replace the main text and shows…
You use the style attribute to add CSS to a single HTML element without using a stylesheet or class. What…
HTML select tag and option tags let users pick values in a form. You use them to create dropdowns. The…
The HTML figure tag links media with a caption. Use it to group an image, diagram, code block, or video…
HTML5 gave the web new elements that describe content with more meaning. Developers now use these elements to build pages…
In this article, you will learn how HTML legend works in the fieldset tag with examples. HTML fieldset and legend…
This guide shows how to build HTML with separate parts as components and how each part helps in reuse and…
The HTML span tag acts as a simple container for inline text or other inline elements. It groups text and…
A web page must follow a clear structure so browsers can read and show it correctly. This guide helps you…
