HTML What are the most important HTML tags? An overview
With HTML commands, you build a website clearly and store the most important information for all browsers. Besides HTML tags for the basic structure, there are also some for embedding media, creating forms, or determining the font style.
- Intuitive website builder with AI assistance
- Create captivating images and texts in seconds
- Domain, SSL and email included
What are HTML tags?
If you want to learn HTML or write your own HTML code, HTML tags are probably your most important and effective tool. HTML commands are used to convey information to different browsers. This structuring optimally organizes the website, allowing it to be displayed by any browser through the embedded information.
HTML tags are typically represented by a start tag and an end tag. The HTML commands are placed in angle brackets and enclose the desired information, with the end tag marked by a slash. The combination of start tag, information, and end tag is called an element. It’s possible to assign an HTML attribute to the element, which provides additional information.
Here you can see an example of the structure of an HTML tag (for headings):
<h1>This is a headline</h1>Not every HTML element consists of a start and an end tag. Self-closing tags (also called empty tags) are HTML elements that don’t require content between a start and end tag. Therefore, they consist only of a single tag, like <br> for a line break. They close themselves and are syntactically complete without a separate end tag.
There are numerous different HTML tags, and you probably won’t need all of them. Additionally, some HTML tags have become obsolete since the introduction of HTML 5 and later HTML 5.1. Therefore, having an overview of the most important HTML commands on hand is helpful.
Below you will find the most common HTML commands in table form, sorted by categories. The commands shown here are all supported in the current HTML version 5.2 as well as in the HTML Living Standard. The latter reflects the current state of web technologies and is continuously updated.
HTML tags for the basic structure of a document
The following HTML tags structure the website and form the framework for all other elements within the document.
| HTML tag | Description |
|---|---|
<!DOCTYPE>
|
This HTML tag specifies the type of the document. |
<html>
|
This HTML tag defines a document as an HTML document. |
<head>
|
In the <head> section, metadata about the document is stored.
|
<title>
|
This HTML command stores the title of the document, which is also displayed in the browser’s title bar. |
<body>
|
<body> is the main section and encompasses the content displayed in the browser.
|
<nav>
|
This is the navigation section of a website. |
<section>
|
Through <section>, elements can be grouped together.
|
<article>
|
<article> is the content section of a website.
|
<header>
|
<header> defines the header section of a page or a section.
|
<footer>
|
Through <footer>, the footer section of a page or a section is defined.
|
The basic framework of a website could look like this, for example:
<!DOCTYPE html>
<html>
<head>
<title>The title of your website</title>
</head>
<body>This is space for text or images.</body>
</html>HTML commands for the alignment of a website
There are numerous HTML tags that you can use to divide and build up individual sections or the entire page.
| HTML tag | Description |
|---|---|
<h1> to <h6>
|
Headlines are created with different h-tags. The smaller the number, the larger the heading. |
<p>
|
A paragraph is indicated by <p>.
|
<br>
|
The HTML tag <br> forces a line break.
|
<hr>
|
<hr> creates a visual separator that appears between two pieces of content.
|
<div>
|
The HTML div tag allows related content to be grouped together in blocks. |
An example of using structural HTML tags:
<body>
<h1>Here is a headline</h1>
<p>Here is space for a continuous text.</p>
<h2>A subheading structures the content</h2>
<p>Further text and in between <br> a line break.</p>
</body>HTML commands for text formatting
With various HTML commands, you can change the typography of your document.
| HTML tag | Description |
|---|---|
<b>
|
Individual words, sentences, or paragraphs are displayed in bold. |
<i>
|
Individual words, sentences, or paragraphs are displayed in italics. |
<u>
|
The enclosed part is underlined. |
<s>
|
The considered text is struck through. |
<sup>
|
With the HTML tag <sup>, characters can be superscripted, like in 1st.
|
<sub>
|
With <sub>, subscript characters can be displayed, like in H2O.
|
An example of adjustments to typography using HTML commands:
<body>
<p>Here is a sample text and <i>this part is written in italics</i>.</p>
</body>To change the font color, it’s best to use CSS. An extensive CSS tutorial can be found in the Digital Guide.
Highlighting and marking sections
The following HTML tags are most used to format or markup sections:
| HTML tag | Description |
|---|---|
<strong>
|
With <strong>, you can highlight specific sections.
|
<em>
|
With <em>, text fragments are accented.
|
<q>
|
With <q>, quotations within a text can be marked.
|
<blockquote>
|
<blockquote> marks an entire paragraph as a quotation.
|
<code>
|
<code> formats a section as code.
|
Here is an example of using these HTML commands:
<body>
<p>This is a paragraph of text. <strong>This part is emphasized</strong>.</p>
</body>How to create tables and lists with HTML tags
You can also create tables and lists in an HTML document. These are the appropriate HTML tags:
| HTML tag | Description |
|---|---|
<table>
|
The HTML tag <table> defines a table.
|
<caption>
|
<caption> defines the title of a table.
|
<tr>
|
<tr> labels table rows.
|
<td>
|
<td> defines a specific cell in a table.
|
<th>
|
<th> defines the header cell of a table.
|
<ol>
|
<ol> creates an ordered list with numbers.
|
<ul>
|
<ul> creates an unordered list with bullet points.
|
<li>
|
<li> stands for individual entries in the list.
|
<dl>
|
<dl> denotes a definition list.
|
<dt>
|
<dt> defines a term or an item in a definition list.
|
<dd>
|
<dd> is a definition description within a list.
|
Here’s how a (unnumbered) list looks in an HTML document:
<body>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</body>How to embed media in HTML
Various HTML tags allow you to include images, videos, and audio files in a document and format them. The media is usually accessed via a URL. These are the most common HTML commands:
| HTML tag | Description |
|---|---|
<img>
|
The HTML img tag defines an image. |
<map>
|
With <map>, you can incorporate a map into the document.
|
<audio>
|
<audio> allows you to incorporate audio content.
|
<video>
|
With <video>, you add video content.
|
If you want to embed a media content, you must also use the HTML attributes src for the source and alt for the alternative text. It looks like this:
<body>
<img src="img/example-image.png" alt="Description of the image" />
</body>HTML tags for a form
If you want to include a form on your website, use the following HTML commands:
| HTML tag | Description |
|---|---|
<form>
|
With <form>, you create a form.
|
<input>
|
<input> is used for input control.
|
<button>
|
With <button>, you add a button.
|
<select>
|
With <select>, you create a dropdown list.
|
<option>
|
<option> represents an element within a dropdown list.
|
Create a form
In practice, you create a form as shown below. Note that additional attributes are used to specify the desired HTTP request (in our case, POST).
<body>
<form method="post" action="mailto:mail@example.com">
Name: <input type="text" name="name" />
Password: <input type="password" name="password" />
</form>
</body>Insert a button
You insert a button like this:
<body>
<h2>This is where the button will be placed</h2>
<button type="button">Click</button>
</body>How to insert links in HTML
Use these HTML tags to build links into your document:
| HTML tag | Description |
|---|---|
<a>
|
The <a> tag defines the hyperlink.
|
<link>
|
The <link> tag establishes the connection between the document and an external resource.
|
<nav>
|
The <nav> tag creates the navigation links.
|
Additionally, the href-attribute is used in the link to specify the target address. This is how you link in an HTML document:
<body>
<h2>Contact</h2>
<p>Feel free to write us <a href="mailto:mail@example.com">via email</a>.</p>
</body>Other important HTML tags
There are numerous other HTML tags that you can use in an HTML editor to make your work easier. Here is a small selection:
| HTML tag | Description |
|---|---|
<style>
|
Use the HTML style tag to insert CSS codes that define the appearance of your website. |
<label>
|
The HTML tag <label> is used with the <input> tag and defines a text field for it.
|
<iframe>
|
The HTML iframe tag allows you to embed external content into your website. |
<!-- … -->
|
<!-- … --> lets you add comments to the HTML code.
|
Individual instead of ordinary. With the website builder, you can design your website exactly the way you want it. If you need help, our expert team is ready to assist you.
- Professional templates
- Intuitive customizable design
- Free domain, SSL, and email address