HTML Elements

HTML Elements are individual components that make up a web page. Elements usually start with an opening tag <tagname> and end with a closing tag </tagname>. Examples include, <table>, <div>, and <img>.

HTML Tutorial

Example

An <article> element with nested <h3> and <p> elements.

The Palace Museum

The Palace Museum is a national museum housed in the Forbidden City at the core of Beijing, China. It was established in 1925 after the last Emperor of China was evicted from his palace, and opened its doors to the public.

<article>
  <h3>The Palace Museum</h2>
  <p>
    The Palace Museum is a national museum housed in 
    the Forbidden City at the core of Beijing, China. 
    It was established in 1925 after the last Emperor 
    of China was evicted from his palace, and opened 
    its doors to the public.
  </p>
</article>

Common Elements

Some commonly used elements:

Element Description
<a> Creates a link (hyperlink) to another page
<aside> Creates an area for content that is related to the primary content on a page
<audio> Creates a player for sound such as music, sound effects, or others
<br> Creates a line break
<button> Creates a clickable button that can contain text or an image
<div> Creates a division or section on a page
<form> Defines a data entry area that contains input elements
<h1>-<h6> Defines text headings in 6 different sizes
<img> Displays an image
<input> Creates an input field in which users enter data
<label> Creates a label or brief description before input elements
<ol> Creates a numerically or alphabetically ordered list
<p> Creates a paragraph
<script> Adds JavaScript to a page. Either server-side or client-side
<section> Defines an area for content that can stand on its own
<select> Creates a dropdown control
<span> A container for inline text elements
<table> Creates an HTML table with rows and colums, much like a spreadsheet
<textarea> Creates a multi-line text input control, for example for messages
<title> Specifies the page title that will display in the browser's tab
<video> Creates a video player on a page

For a complete list see our HTML Tag List.

Tip:  There are about 100 HTML tags in total.


Example HTML Element

In HTML, images are defined with the <img> tag.

Van Gogh Self-Portrait
 <img src="/img/html/vangogh.jpg" alt="Van Gogh Self-Portrait" />

The <img> tag is self-closing, meaning it does not have a separate closing tag.

The alt value displays if the image cannot be found or has an error.

Tip:  Tags are not case-sensitive, but the convention is to write them in lower-case.

Below are more examples of common HTML elements.

HTML Paragraph

In HTML, a paragraph is defined by an opening <p> tag and a closing </p> tag.
It formats the text as a paragraph with space between other paragraphs.

Two <p> elements.

The Louvre Museum is the world's largest art museum and a historic monument in Paris, France. A central landmark of the city, it is located on the Right Bank of the Seine in the city's 1st arrondissement (district or ward). Approximately 38,000 objects from prehistory to the 21st century are exhibited over an area of 72,735 square meters (782,910 square feet). In 2019, the Louvre received 9.6 million visitors, making it the most visited museum in the world.

The museum is housed in the Louvre Palace, originally built as the Louvre castle in the late 12th to 13th century under Philip II. Remnants of the fortress are visible in the basement of the museum. Due to urban expansion, the fortress eventually lost its defensive function, and in 1546 Francis I converted it into the primary residence of the French Kings.

<p>
  The <b>Louvre Museum</b> is the world's largest art museum and a 
  historic monument in Paris, France. A central landmark of 
  the city, it is located on the Right Bank of the Seine in 
  the city's 1st arrondissement (district or ward). Approximately 
  38,000 objects from prehistory to the 21st century are exhibited 
  over an area of 72,735 square meters (782,910 square feet). 
  In 2019, the Louvre received 9.6 million visitors, making it 
  the most visited museum in the world.
</p>
<p>
  The museum is housed in the Louvre Palace, originally built 
  as the Louvre castle in the late 12th to 13th century under 
  Philip II. Remnants of the fortress are visible in the basement 
  of the museum. Due to urban expansion, the fortress eventually 
  lost its defensive function, and in 1546 Francis I converted it 
  into the primary residence of the French Kings.
</p>

Note:  Paragraphs are displayed in block, meaning they start and end with a new-line.
If you want to use inline text -- without a new-line -- use the <span> tag.

For more information about paragraphs, see our HTML p Tag Reference Guide.


HTML Link

In HTML, links (hyperlinks) are defined with an 'anchor' tag: <a>.

Link to Google.
Link to <a href="https://google.com" target="_blank">Google</a>.

Note: The href attribute specifies the page or site the user will be redirected to.


Email Link

The <a> tag can also link to email.
This link opens your email client, such as, Outlook.

Send email to Deborah Walker
Send email to <a href="mailto:debbie@company.com">Deborah Walker</a>

Note: The mailto: prefix indicates that an email must be sent instead of page redirection.

For more information on the link or <a> tag, see our HTML anchor tag Reference Guide.


HTML Heading

In HTML, headings have different sizes starting from <h1> (largest) to <h6> (smallest).

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6
  <h1> This is heading 1 </h1> 
  <h2> This is heading 2 </h2>
  <h3> This is heading 3 </h3>
  <h4> This is heading 4 </h4>
  <h5> This is heading 5 </h5>
  <h6> This is heading 6 </h6>

Each <h1> - <h6> tag has a default font size, but you can change this with CSS.

Tip:  A web page can have only one <h1> tag, but multiple <h2> - <h6> tags.

For more information on heading tags, see our HTML heading Reference Guide.


Nested Elements

Some HTML elements are placed inside other tags.
In this example, the <th>, <td>, and <tr> tags (table columns and rows) are placed inside a <table> tag.

FIRST NAME LAST NAME
Denice Hobermann
Paulo Cornell
<style>
  table.tb { width:300px; border-collapse: collapse; }
  .tb th, .tb td { border: solid 1px #777; padding: 5px; }
</style>

<table class="tb">
  <tr>
    <th>FIRST NAME</th>
    <th>LAST NAME</th>
  </tr>
  <tr>
    <td>Denice</td>
    <td>Hobermann</td>
  </tr>
  <tr>
    <td>Paulo</td>
    <td>Cornell</td>
  </tr>
</table>
  • <table> defines the table element.
  • <tr> defines a row element within a table.
  • <td> defines a column element within a row.

Elements and Tags

Most elements require a begin tag and end tag.

Some elements require only a single tag, such as <img />, <br /> and <hr />.

These are called self-closing tags.

Some HTML elements may display correctly without an end tag - but don't rely on this.

For a complete list of all tags, see our HTML Tag List.


HTML Comments

Comments can be added to the HTML code. Developers use these for documentation purposes.
These comments are defined using a <!-- comment --> tag. Users do not see the comments.

This paragraph is visible. The above comment is not.

  <!-- Comments are not displayed in the browser -->
  <p>This paragraph is visible. The above comment is not.</p>

Next is an example in which an entire block of code is 'commented out', i.e. nothing will show.
Developers frequently use this technique when they are in the process of creating a new page.

<!--
This is a block of comments.
<p>This element will not be displayed.</p>
-->

For more information on HTML comments, see our HTML comment Reference Guide.


Did you know?

Did you know?

Creating custom HTML tags

Many developers are unaware of this, but you can create your own tags.
Here's how to do it: first, define the new tag's attributes in CSS, like so:

product {
  color: #f45d49;
  font-size: 16px;
  padding: 15px;
  ... 
}

With this, you can use your custom tag freely. It will render according to your CSS.

 <product>Biscuits</product>

Tip:  Although browsers do support custom tags, it's not officially supported by the HTML5 standard. For this reason, it is better not to use it.


You may also like

Guides