Course List
What is an HTML Element?
An HTML element is the basic building block of an HTML document. In simple terms, an HTML element typically consists of three parts: an opening tag, a closing tag, and the content between them.
For example: <p>This is a paragraph.</p>
<p>is the opening tag, indicating the start of a paragraph.This is a paragraph.is the content of the element.</p>is the closing tag, indicating the end of the paragraph.
Detailed Structure of an Element
1. Tags
Tag names are written inside angle brackets
< >, e.g.<div>,<h1>.Tags usually come in pairs:
<tagname>content</tagname>.The closing tag includes a forward slash
/before the tag name, e.g.</div>.
2. Content
Content can be plain text or other HTML elements (creating nesting).
Example:
<div><p>Nested paragraph</p></div>– here the content of the<div>is another element<p>.
3. Attributes
Attributes are written inside the opening tag and provide additional information about the element.
Format:
attribute="value", e.g.<a href="https://example.com">link</a>.Common attributes:
id,class,style,src,href, etc.
4. Void (self-closing) elements
Some elements have no content and do not need a closing tag; they are called void elements. In HTML5, the slash at the end is optional.
Examples:
<br>(line break)<img src="photo.jpg">(image)<input type="text">(input field)
Categorization of Elements
Based on display behavior and purpose, elements fall into two main categories:
Block-level Elements
By default, they take up the full width of their parent container and start on a new line, pushing subsequent elements to the next line.
Commonly used for page layout and large structural divisions.
Examples:
<div>,<p>,<h1>~<h6>,<ul>,<li>,<header>,<footer>.
Inline Elements
They take up only the width necessary for their content and do not force line breaks; they sit next to other inline elements horizontally.
Often used for text styling or small inline components.
Examples:
<span>,<a>,<strong>,<em>,<img>,<input>.
Common HTML Elements – Examples
| Element | Meaning | Typical Use |
|---|---|---|
<html> | Root element | Wraps the entire HTML document |
<head> | Head | Contains metadata, title, styles, etc. |
<title> | Title | Defines the title shown on the browser tab |
<body> | Body | Contains the visible page content |
<h1>~<h6> | Headings | Six levels of headings (1 largest, 6 smallest) |
<p> | Paragraph | Text paragraph |
<a> | Anchor (hyperlink) | Creates a link to another page or location, uses href attribute |
<img> | Image | Displays an image, uses src and alt attributes |
<div> | Generic block container | Layout and grouping, often used with CSS |
<span> | Generic inline container | Applies styles or scripting to a text fragment |
<ul> / <ol> | Unordered / ordered list | Creates list items with <li> |
<table> | Table | Displays tabular data with <tr>, <td>, etc. |
<form> | Form | Collects user input, used with <input>, <button> |
Nesting Rules
Block-level elements can contain inline elements and some block-level elements (depending on context).
Inline elements should generally not contain block-level elements (may cause layout issues).
Example:
<div><span>This is valid</span></div>✅<span><div>Not recommended</div></span>⚠️
Semantic Elements
HTML5 introduced elements with clear meanings (semantics), which make code easier to read and maintain, and improve SEO and accessibility (screen readers).
Examples: <header> (page header), <nav> (navigation area), <article> (independent article), <section> (document section), <aside> (sidebar).
Using semantic elements instead of generic <div>s is a recommended practice in modern HTML.
Summary
An HTML element = opening tag + content + closing tag (except for void elements).
Attributes are placed in the opening tag to provide extra information.
Elements are either block-level or inline, affecting layout behavior.
Using semantic elements appropriately improves code quality and page expressiveness.
HTML Practice
We will provide some examples and online editors in each chapter to help you better learn HTML!
Example
<!DOCTYPE html>
<html>
<title>Hello World </title>
<body>
<h1>My First Title</h1>
<p>My First Paragraph. </p>
</body>
</html>