Top 10 Types of HTML Elements- The Complete Guide
Did you know that almost 96% of websites use HTML as their markup language? HTML, or Hyper Text Markup Language, is the standard language used to create webpages. It is a markup language written in plain text that defines and organizes various elements of a webpage, allowing content to be displayed correctly on browsers.
HTML has been around since the early days of the internet and continues to be an essential part of creating websites today. In this blog, we will learn about various types of HTML elements.
What Are HTML Elements?
The foundation of HTML documents is HTML elements. They are used to specify a web page’s layout and content. A start tag, content, and an end tag are present in every HTML element.
1. Start Tag
It identifies the element’s type, whereas the end tag specifies where the element finishes.
For example, <html> is the start tag as it starts the HTML document.
2. Content
Text, photos, or other HTML components can all be used as an element’s content. The visual and interactive components of a website are created by developers by mixing various elements.
For example,
<p>This is a paragraph.</p>In this, the <p> tag starts the paragraph, which includes the content “This is a paragraph,” and closes the paragraph with the </p> tag.
3. End Tag
An end tag in an HTML element is the tag that marks the end of the element. The end tag has the same name as the start tag but with a forward slash (/) before the tag name.
For example, the end tag for the start tag <html> is </html>.
Join our Full stack developer course with placement and start your journey to becoming a professional full stack developer today and let us help you secure placement.
HTML Elements List
Let’s have a look at the elements present in HTML.
1. Root Element In HTML
It is the top-level element of any HTML document.
| Element | Description |
|---|---|
| <html> | It includes the entire document. All other elements fall under this. |
2. Document Metadata
Information about the page is contained in the metadata. This provides details about the styles, scripts, and data that software (such as browsers and search engines) can use to render the page.
| Element | Description |
|---|---|
| <head> | Represents the container for the HTML document’s head section, which includes metadata and other structural data. |
| <title> | Defines the HTML document’s title, which appears in the browser’s title bar or tab. |
| <base> | Specifies the base URL or target for all relative URLs in the document. |
| <link> | Establishes a link between an external source and the HTML document. |
| <meta> | It provides metadata information about the HTML document. |
| <style> | Contains CSS rules that specify how items in an HTML document should be presented and laid up. |
Learn web development to get a better understanding of Types of HTML elements.
3. Content Section
It helps in organizing the document in a logical order. With this, you can create a layout for your webpage and add sections you need. Let’s have a look at its elements.
| Element | Description |
|---|---|
| <body> | Shows the content of the whole HTML document. |
| <article> | It represents a self-contained piece of content. |
| <section> | It represents a section within an HTML document. |
| <nav> | Represents a section within the document that contains navigation links. It can be within the document and in other documents as well. |
| <aside> | Represents a part of the content that is indirectly related to the main content. |
| <h1>,<h2>,<h3>,<h4>,<h5>,<h6> | It represents the six levels of headings. h1 is the highest, and h6 is the lowest. |
| <hgroup> | It groups the headings into a single element. |
| <header> | Defines the header of a document, which typically contains the title and other information about the document. |
| <footer> | Defines the footer section of a page. |
| <address> | Shows the address of the owner of the document. |
4. Text Content
HTML text content elements are used to organize blocks or chunks of content that are positioned between the opening and closing body tags.
| Element | Description |
|---|---|
| <blockquote> | It shows a block of quoted content. |
| <dd> | Provides a description of the preceding term. |
| <div> | Defines and creates a block of content. |
| <dl> | Defines a description list. |
| <dt> | It specifies a term in the description list. |
| <figcaption> | It defines a caption for a figure. |
| <figure> | Represents self-contained content, such as images, diagrams, or code snippets. |
| <hr> | It inserts a horizontal line. |
| <li> | It represents a list item in an ordered or unordered list. |
| <menu> | It shows a list of commands or options. |
| <ol> | It defines a numbered list. |
| <p> | It defines a paragraph. |
| <pre> | Represents text that has been preformatted and is to be displayed precisely as it is written in the HTML file. |
| <ul> | It defines an unordered list. |
5. Inline Text Semantics
To specify the meaning, structure, or style of a word, line, or any other random piece of text, use the HTML inline text semantic.
| Element | Description |
|---|---|
| <a> | It shows a hyperlink anchor element. |
| <b> | It shows the bold text that is within a document. |
| <abbr> | It shows an abbreviation. |
| <bdi> | It isolates a part of a text that is formatted in a different way from the other content. |
| <bdo> | It overrides the current text direction. |
| <br> | It shows a line break. |
| <cite> | It shows the title of a creative work. |
| <code> | It represents a computer code. |
| <data> | It shows a relationship with computer code. |
| <em> | Represents an emphasized text. |
| <i> | It shows italicized text. |
| <kbd> | It represents text input from a keyboard. |
| <mark> | Represents text highlighted for reference purposes. |
| <q> | It shows a short inline quotation. |
| <rp> | Represents parentheses for browsers that do not support Ruby annotations. |
| <rt> | Represents the ruby text annotation for a ruby annotation. |
| <ruby> | It represents a Ruby annotation. |
| <s> | It shows text that is no longer accurate or relevant. |
| <samp> | It represents a sample output from a computer program. |
| <var> | It shows a variable in a computer program. |
| <u> | It represents text that should be stylistically rendered as underlined. |
6. Image and Multimedia
Images, audio files, and video files are all supported by HTML.
| Element | Description |
|---|---|
| <area> | It defines an area inside an image that can be clicked. |
| <audio> | It embeds audio content in a document for playback. |
| <img> | Inserts an image. |
| <map> | Defines an image map. |
| <track> | It provides a text track for videos, like subtitles. |
| <video> | It embeds video content in a document for playback. |
7. Scripting
HTML allows scripting languages, most notably JavaScript, to be used to build dynamic content and web applications.
| Element | Description |
|---|---|
| <canvas> | It is used for drawing graphics. |
| <nonscript> | It provides alternate content for scripts. |
| <script> | An element used to embed scripts. |
8. HTML Table Elements
The following list of HTML table elements is used to create and handle table data.
| Element | Description |
|---|---|
| <caption> | It shows the title of a table. |
| <col> | Defines the properties of a single column. |
| <colgroup> | It groups multiple elements together to define properties for multiple columns. |
| <table> | Defines a table structure. |
| <tbody> | It represents the body content of a table. |
| <td> | It defines a single cell in a table containing data. |
| <tfoot> | Defines the footer content of a table. |
| <th> | Represents a header cell within a table. |
| <thead> | Defines the header content of a table. |
| <tr> | Inserts a row in a table. |
9. HTML Form Elements
A variety of HTML components can be used to build forms that users can fill out and submit to a website or application.
| Element | Description |
|---|---|
| <button> | Represents a clickable element that triggers an action. |
| <datalist> | Shows several options to choose from. |
| <fieldset> | Groups several elements together. |
| <form> | It collects and submits user data. |
| <input> | It creates a field so that users can enter data. |
| <label> | It represents a description of an item. |
| <legend> | Provides a caption or title for a <fieldset> element. |
| <meter> | It represents a scalar value within a range. |
| <optgroup> | It creates a grouping of options within a <select> element. |
| <option> | Represents an option in a dropdown list, or <datalist>. |
| <output> | It shows the output of a user action. |
| <progress> | It shows the complete process of a task. |
| <select> | It creates a drop-down list of items for users to choose from. |
| <testarea> | It creates a longer text field for users to enter longer text. |
10. Interactive Elements
A variety of HTML components are available to create interactive user interface items.
| Element | Description |
|---|---|
| <details> | It shows some content that is hidden at the user’s request. |
| <dialog> | It is used to create a dialog box that can be dismissed. |
| <summary> | Specifies the summary, caption, or legend for the disclosure box of a details element. |
11. Block-Level Elements
A block-level element is an HTML element that typically starts on a new line and takes up the full width available on a web page.
| Element | Description |
| <div> | It is used to divide other elements. It is a container element and can be used to group elements together in order to style them with CSS. |
| <h1>…<h6> | It is used to create headings. It is generally used for main titles, such as the title of a page or the main heading of a section. |
| <p> | It is used to create paragraphs of text. It displays text content on a web page in separate blocks. |
| <ul> | This element creates an unordered list. This type of list does not have numbers or bullets but instead displays items in a simple list format. |
| <ol> | It creates ordered lists. It displays items in a numbered list format, with each item having a specific number. |
| <form> | It is used to create forms. This tag includes inputs, labels, and buttons, allowing users to interact with the website. |
| <table> | It is used to create tables. It allows the user to organize content in a tabular form with rows and columns. |
| <header> | It creates a header section. It is used to create the title of a page or the main heading of a section. |
| <footer> | It is used to create a footer section. It is typically used for page information, such as copyright information, contact details, links, etc. |
| <section> | It is typically used to create a section to group related content together. |
12. Inline Elements
Inline elements in HTML are elements that can be used within a block-level element to create a specific layout within the block. Common inline elements are given in the table below.
| Element | Description |
| <span> | This element is used to define a section within a text. |
| <img> | It is used to embed an image in the HTML document. |
| <a> | This is an anchor text element. It is used to create a link to another web page or to a different section of the current web page. |
| <em> | This element helps emphasize a text. It is typically used to draw attention to a word or phrase, making it stand out from the rest of the content. |
| <br> | It is used to insert a line break. It creates a new line in the text and can be used to separate sentences or paragraphs. |
| <input> | It creates an input field in an HTML form. The type of input field can be specified, such as a text field, a checkbox, or a drop-down list. |
| <code> | It is used to display code snippets, such as HTML, CSS, and Javascript, on a web page. It can also create interactive elements, such as buttons, forms, and menus. |
Conclusion
HTML is an incredibly powerful and versatile language for creating websites and applications. HTML element types offer a range of benefits, from providing structure to making it easier to read the text at first glance. While CSS, SASS, and JavaScript enable developers to further customize their webpages with interactive behavior or styling beyond what’s available in HTML alone, it plays a crucial part in the overall look and feel of a website.
Also, check out this blog on how to start learning HTML, which covers all the HTML basics.
FAQs
Inline elements in HTML are elements that are displayed within a line of text and do not take up the full width of the page. Some examples of inline elements are <a>, <abbr>, <b>, <img>, <input>, and <span>.
The root element of an HTML document is the <html> element, which contains all other elements.
Block elements in HTML are elements that take up the full width of the page and are used to structure a web page. Some examples of block elements are <div>, <h1>-<h6>, <p>, <ul>, <li>, <table>, <video>, etc.
The correct HTML element for playing video files on a web page is the <video> element.
Empty elements in HTML are elements that have no content and are used to insert elements into a web page without adding any text content. Examples of empty elements are <br>, <hr>, <img>, <input>, and <link>.
a. HTML elements are the building blocks of a web page, while HTML tags are the instructions used to create the elements.
b. HTML elements are written using HTML tags, which are written using angle brackets (<>).
c. The tags tell the browser how to display the elements, such as which element is a heading or a paragraph.
The purpose of an HTML element is to define the structure and content of a web page. HTML elements are used to create the building blocks of a web page, which include text, images, tables, links, and many other types of content.
