HTML Elements
An HTML element is defined by a start tag, some content, and an end tag.
HTML Element Syntax
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag.
| Start tag | Element content | End tag |
|---|---|---|
<h1> | My First Heading | </h1> |
<p> | My first paragraph. | </p> |
<br> | none | none |
Nested HTML Elements
HTML elements can be nested (elements can contain other elements).
All HTML documents consist of nested HTML elements:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first <strong>paragraph</strong>.</p>
</body>
</html>
Empty HTML Elements
HTML elements with no content are called empty elements. The <br> tag defines a line break, and is an empty element without a closing tag:
<p>This is a <br> paragraph with a line break.</p>
Block vs Inline Elements
Block-level elements always start on a new line and take up full width:
<div>,<h1>-<h6>,<p>,<form>,<header>,<footer>,<section>
Inline elements only take up as much width as necessary:
<span>,<a>,<img>,<button>,<label>,<input>
Common HTML Elements
<!-- Headings -->
<h1>Largest Heading</h1>
<h2>Second Level</h2>
<h6>Smallest Heading</h6>
<!-- Text formatting -->
<p>A paragraph</p>
<strong>Bold text</strong>
<em>Italic text</em>
<mark>Highlighted</mark>
<code>Inline code</code>
<del>Strikethrough</del>
<!-- Lists -->
<ul>
<li>Unordered item</li>
</ul>
<ol>
<li>Ordered item</li>
</ol>
💡 Best Practice: Semantic elements (like
<article>,<nav>,<aside>) help search engines understand your content structure.