Elements

Published Aug 4, 2021Updated Nov 24, 2023

Elements are discrete components within an HTML document that generally consist of at least one tag but can have two tags with optional content. The tag name determines how the element will be rendered in the HTML document. Elements can also have any number of attributes.

Syntax

Elements can be grouped, whether or not they can support content. Elements that can’t have any content are void and self-closing elements. If an element has attributes, attributes must be attached to the opening tag of the element.

HTML Element with Content

<opening-tag> content </closing-tag>

Most HTML elements include opening and closing tags, enclosing the element’s content. The content of an element is optional and can be any of the following:

Text content, which creates raw text elements. For example <title>, <i>, <label>, <li> elements can only hold text content.
Other elements, creating nested elements (see below). Nested elements can also have text content along with the elements.
Comments only or in combination with text content and nested elements.

In rare cases, the opening tag can be omitted. For example, the opening tag of <head> and <body> can be left out if they are empty.

Void HTML Element

<void-element-tag>

Some elements cannot have content; therefore, they do not require a closing tag. These elements are called void or empty elements.

Self-Closing HTML Element

<self-closing-tag />

Adding a closing slash (/) at the end of the void element’s opening tag is allowed, which creates a self-closing element. Turning void elements into self-closing is up to personal preference, but it improves compatibility with XHTML. The following elements are void elements:

Nested Elements

HTML elements can be nested, meaning that elements can contain other elements inside or nested. All HTML documents consist of nested HTML elements.

The following example contains four HTML elements: <html>, <body>, <h1>, and <p>:

<!DOCTYPE >
<html>
  <body>
    <h1>Blog Post</h1>
    <p>My first paragraph.</p>
  </body>
</html>

The image below shows these HTML elements as they appear in the browser:

Screenshot of rendered HTML elements

Elements

<a>: Creates a link to another page or to a location in the current page.
<abbr>: Indicates an acronym or abbreviation of a longer word or phrase.
<acronym>: Creates text that will be displayed when hovered over.
<applet>: Used to embed Java applets in HTML documents but is no longer supported.
<audio>: Represents an interface for adding audio content to the page.
<b>: Used to draw attention to a section of text, usually rendered in boldface.
<basefont>: Used to be used to set the font of text. This is now deprecated.
<blink>: Used to make text flash on and off and is now obsolete, deprecated, and non-standard.
<blockquote>: Represents a section of a document which contains a longer quotation, usually spanning multiple lines.
<br>: Represents a break in text. It is used when text needs to span multiple lines rather than being in-line, such as in an address.
<button>: Represents a button meant to be clicked by the user.
<canvas>: Creates graphics and animations in the page for JavaScript and WebGL to interact with
<center>: Displays its contents centered horizontally in the containing element. This is now deprecated and CSS should be used instead.
<cite>: Represents a citation to a referenced work such as a book, a song, or a painting.
<code>: Represents source code contained in the text.
<col>: Creates properties for table columns, including styling and attributes, often used within a <colgroup> to apply them to multiple columns simultaneously.
<datalist>: Displays pre-defined values to a user while typing into an input box.
<dd>: Describes details found inside a <dl> element. It usually comes with at least one corresponding <dt> term tag.
<del>: Shows text that is to be removed from a document, usually rendered in strike-through text.
<div>: Represents a generic division of content. It has no semantic meaning, but will separate its contents from the rest of the document.
<dl>: Displays terms and details, commonly for metadata purposes.
<dt>: Describes a term found inside a <dl> tag. It usually comes with at least one corresponding <dd> details tag.
<em>: Represents text which is emphasized. Browsers will show the enclosed text in italics, by default."
<embed>: Inserts external content such as a video, image, page, and more.
<font>: Used to be used to set the font characteristics of a text. This is now deprecated.
<form>: Represents an interface to collect and submit user supplied information. This can include open ended text inputs, radio buttons, calendar information, and more.
<h1> - <h6>: Represents a text heading for a section of content, with <h1> being the highest level of heading and <h6> being the lowest.
<head>: Represents a collection of metadata related to the current document. It is an immediate child of the `<html>` element and may include other tags such as <title>, <link>, <style>, and <script>.
<hr>: Represents a semantic, horizontal line break between text elements.
<html>: Represents the entire HTML document.
<i>: Used to set off HTML text for some reason, as idiomatic, technical, taxonomical and so on. Typically rendered as italic.
<iframe>: Represents a container used to embed a second web page inside the current one. It can be used for content from the same domain as the parent, or even from a second domain.
<img>: Displays an image on the web page.
<input>: Creates an interactive element, usually used within a form to allow user input. It can be used to make text boxes, color pickers, date pickers, and other UI elements.
<kbd>: Emphasizes characters to look like keys on a keyboard.
<label>: Identifies captions for other elements in an HTML document.
<li>: Represents a single item in a list of items. It and the other list items must be wrapped in an <ol>, <ul>, or <menu> tag.
<link>: Connects the current page with an external file.
<menu>: Represents an unordered list of items with more semantic meaning than a regular ul element.
<meta>: Represents an interface to provide metadata pertaining to the document. Metadata is data that is used to describe the document that contains it.
<noscript>: Displays content within if JavaScript is disabled in the browser or not supported.
<object>: Represents an external resource such as an image, a nested browsing context, or content to be handled by a browser plugin.
<ol>: Represents an ordered list of items.
<option>: Represents one option in a dropdown created by the select tag.
<output>: Displays the result of a calculation or user action.
<p>: Contains and displays a block of text that defines a paragraph.
<param>: Used to pass parameters to a resource defined in an object tag.
<picture>: Represents multiple possible image sources to be applied to different devices and screen-sizes.
<q>: Used to represent a brief inline quotation.
<s>: Represents strike-through text that is no longer need, accurate, or correct.
<script>: Used to insert runnable code into a document, usually JavaScript. Can be used both to include a script within the HTML document, or to load an external script from another source.
<select>: Creates a drop-down list for the user to select from a number of option elements.
<source>: Represents an interface for adding source content to the page.
<span>: Used for grouping related text or elements for styling and scripting.
<strong>: Used to identify text that is very important, or urgent.
<style>: Applies CSS styles to an HTML document.
<table>: Represents an interface for adding tabular data to the page. Tables are two dimensional, made up of rows and columns, and can contain many types of content.
<textarea>: Displays multi-line plain-text input.
<track>: An HTML element that specifies subtitles, closed captioning, and other text files for media elements.
<u>: Displays HTML text with a non-textual annotation. The default rendering of this is a solid underline.
<ul>: Represents an unordered list of items.
<video>: Represents an interface for adding video content to the page.