HTML elements are the basic units of HTML code that define the structure and content of a web page. They are written using tags, which are enclosed in angle brackets (< >).
<p> is a tag that represents a paragraph element.
An HTML element usually consists of a start tag, an end tag, and some content in between. The end tag has a slash (/) before the tag name.
<p>This is a paragraph.</p> is an HTML element that contains a paragraph of text.
Void Elements
Some HTML elements are self-closing, which means they do not need an end tag. They are known as void elements. They are also called empty elements or self-closing elements. They are written with a slash (/) at the end of the start tag, or without a slash in HTML5.
<br/>
or<br>
is a void element that represents a line break.
Void elements are used to insert external content or resources into the document such as images, videos and audio.
Tag | Description |
<img> | This element displays an image on the web page |
<video> | This element embeds a video on the web page |
<audio> | This element embeds an audio on the web page |
<hr> | This element creates a horizontal line on the web page |
<br> | This element creates a line break on the web page |
Nested Elements
HTML elements can be nested inside other elements which means they can have parent-child relationships. The element that contains another element is called the parent element and the element that is contained by another element is called the child element.
<div><p>This is a paragraph inside a division. </p></div> This is an HTML element that has a <div> element as the parent and a <p> element as the child.
Metadata Elements
These elements provide information about the document such as its title, language and character set. They are usually placed inside the <head> element which is a container for metadata elements. Some examples of metadata elements are:
<title>, <meta>, <link>, <style>, and <script>.
Sectioning Elements
These elements define the logical sections or regions of the document, such as headings, chapters, articles, etc. They help to organize the content and create an outline for the document. Some examples of sectioning elements are:
<h1> to <h6>, <section>, <article>, <nav>, and <aside>.
Grouping Elements
These elements group together related content or elements, such as paragraphs, lists, tables, figures, etc. They help to create a layout and format the content. Some examples of grouping elements are:
<p>, <div>, <span>, <ul>, <ol>, <li>, <table>, <tr>, <td>, <th>, <caption>, <figure>, and <figcaption>.
Text-level Elements
These elements define the style or semantics of a part of text, such as bold, italic, underline, link, citation, etc. They help to enhance the meaning and presentation of the text. Some examples of text-level elements are:
<b>, <i>, <u>, <a>, <em>, <strong>, <cite>, and <code>.
Embedded Elements
These elements embed external content or resources into the document, such as images, videos, audio, etc. They help to enrich the content and provide multimedia features. Some examples of embedded elements are:
<img>, <video>, <audio>, <iframe>, and <object>.
Form Elements
These elements create interactive forms that allow users to input data or perform actions on the document, such as text fields, buttons, checkboxes, radio buttons, etc. They help to collect user feedback and submit data to a server. Some examples of form elements are:
<form>, <input>, <label>, <select>, <option>, and <button>.
Difference Between Block-level Elements and Inline HTML Elements
All elements are divided into two categories:
- Block-Level Elements
- Inline Elements
1. Block-Level Elements
Block-level elements are HTML elements that start on a new line and take up the full width available on the web page. They create blocks of content or structure on the web page such as paragraphs, headings and sections. Block-level elements are used to organize and format the content on the web page. Some examples of block-level elements are:
<p>, <h1> to <h6>, <div>, <ul> and <ol>, <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, , <header>, <hr>, <li>, <main>, <nav>, <noscript>, <output>, <pre>, <section>, <table>, <tfoot>, and <video>
2. Inline Elements
Inline elements are HTML elements that do not start on a new line and only take up as much width as necessary on the web page. They are included as part of the text or content on the web page such as links, images and spans. They can only contain other inline elements or text as children.
Inline elements are used to style or modify a part of the text or content on the web page. Some examples of inline elements are:
<a>, <acronym>, <b>, <bdo>, <small>, <big>, <br>, <cite>, <code>, <dfn>, <em>, <textarea>, <i>, <img>, <input>, <kbd>, <abbr>, <label>, <map>, <button>, <q>, <samp>, <script>, <select>, , <span>, <strong>, <sub>, <sup>, <time>, <tt>, <var>, <object>
Conclusion
HTML elements are the building blocks of web pages that define their structure and content. By using different types of HTML elements and their attributes, you can create web pages that are informative, attractive and interactive.
If you want to learn more about HTML, you can check out HTML Introduction: This article gives you an overview of what HTML is and how it works.