The most important HTML tags in an overview
IONOS editorial team9 mins
HTML tags or commands are used when building a website and they store the most important information for all browsers. In addition to HTML tags for the basic structure, there are also some that you can use to include media, create forms, or set the typeface.
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. The HTML commands are used to pass information to the different browsers. This way the website is structured in the best possible way and can be displayed by every browser due to the information stored.
HTML tags are represented by a start and an end tag. The HTML commands are placed in angle brackets and contain the desired information, with the end tag being marked by a slash. The combination of start tag, information and end tag is called an element. It is possible to assign an HTML attribute to the element, which contributes further information.
Here you can see an example of the structure of an HTML tag:
<h1>This is a headline</h1>.The HTML tag <h> distinguishes headlines.
There are numerous different HTML tags, and you probably won’t need them all. In addition, some HTML tags are no longer in use since HTML 5 and later HTML 5.1 were introduced. This is another reason why it is helpful to always have an overview of the most important HTML commands at hand. Below you will find the most common HTML commands in table form, sorted by categories.
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 determines the type of the document. |
| <html> | This HTML tag defines a document as an HTML document. |
| <head> | The <head> area stores metadata about the document. |
| <title> | This HTML command stores the title of the document, which is also displayed in the title bar of the browser. |
| <body> | <body> is the main area and includes the content that is displayed in the browser. |
| <nav> | This is the navigation section of a website. |
| <section> | <section> allows elements to be grouped together. |
| <article> | <article> is the content area of a website. |
| <header> | <header> defines the header area of a page or section. |
| <footer> | <footer> defines the footer area of a page or section. |
The basic structure of a website with HTML tags
The basic structure of a website can look like this, for example:
<!DOCTYPE html>
<html>
<head>
<title>The title of your website</title>.
</head>
<body>Here 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 the different h tags. The smaller the number, the larger the headline. |
| <p> | A paragraph is marked by <p>. |
| <br> | The HTML tag <br> is used to force a line break. |
| <hr> | <hr> creates a visual separator line that appears between two pieces of content. |
HTML tags for the structure of a document
An example for the use of structural HTML tags:
<body>
<h1>Here is a heading</h1>.
<p>Here is space for body text</p>.
<h2>A subheading organizes the content</h2>.
<p>More text and in between<br> a break.</p>
</body>HTML commands for the typeface
You can use various HTML commands to change the typeface of your document.
| HTML tag | Description |
| <b> | Single words, sentences or paragraphs are written in bold. |
| <i> | Single words, sentences or paragraphs are displayed in italic. |
| <u> | The enclosed part is underlined. |
| <s> | The considered font is crossed out. |
| <sup> | The HTML tag <sup> can be used to superscript characters, such as 1st. |
| <sub> | Use <sub> to display subscript characters, such as with H2O. |
Adjust the text in your document
An example of adjustments to the typeface using HTML commands:
<body>
<p>Here is a sample text and <i>this part is italicized</i>.</p>
</body>To change the color of the font, it is best to use CSS. A comprehensive 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> | Use <strong> to highlight specific sections. |
| <em> | Use <em> to accentuate text fragments. |
| <q> | Use <q> to mark quotations within a text. |
| <blockquote> | <blockquote> marks an entire paragraph as a quotation. |
Formatting with an HTML tag
Here is an example of how to use these HTML commands:
<body>
<p>This is body text. <strong>This part is highlighted</strong>.</p>.
</body>Creating 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> is used to define a table. |
| <caption> | <caption> defines the title of a table. |
| <tr> | <tr> is used to label table rows. |
| <td> | <td> defines a specific cell in a table. |
| <th> | <th> is used to define the header cell of a table. |
| <ol> | <ol> is used to create a list of ordinal numbers. |
| <ul> | <ul> is used to create an unordered list with bullets. |
| <li> | <li> represents the individual entries in the list. |
| <dl> | <dl> indicates a definition list. |
| <dt> | <dt> defines a term or position in a definition list. |
| <dd> | <dd> is a definition description within a list. |
A list in HTML
This is what an (unnumbered) list looks like in an HTML document:
<body>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</body>Embedding 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 tag <img> specifies an image. |
| <map> | A map can be incorporated into the document via <map>. |
| <audio> | <audio> allows you to include audio content. |
| <video> | Use <video> to add video content. |
Insert an image with an HTML command.
If you want to include media content, you must also use the HTML attributes src for the source and alt for the alternative text. It will look like this:
<body>
<img src="img/sampleimage.png" alt="description of 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> | Use <form> to create a form. |
| <input> | <input> is used for the input control. |
| <button> | Use <button> to add a button. |
| <select> | With <select> you create a selection list. |
Create form
In practice, you create a form like this, for example:
<body>
<form method="post" action="mailto:mail@example.com">
Name: <input type="text" name="name" />
Password: <input type="password" name="password" />
</form>
</body>Insert button
You insert a button like this:
<body>
<h2>Place the button here</h2>.
<button type="button">Click</button>
</body>Inserting links in HTML
Use these HTML tags to build links into your document:
| HTML tag | Description |
| <a> | Use <a> to specify the hyperlink. |
| <link> | <link> establishes the link between the document and an external source. |
| <nav> | By using <nav>, the links for the navigation are created. |
Linking by HTML tag
This is how you link in an HTML document:
<body>
<h2>Contact</h2>
<p>Feel free to contact us <a href="mailto:mail@example.com">by email</a>.</p>
</body>Other important HTML tags
There are numerous other HTML tags that you can use, for example, in an HTML editor that will make your work easier. This is a small selection:
| HTML tag | Description |
| <style> | With the HTML tag <style> you insert CSS codes that define the appearance of your website. |
| <div> | The HTML tag <div> is used to define sections of a document. |
| <label> | The HTML tag <label> is used with the <input> tag and defines a text field for it. |
| <iframe> | The HTML tag <iframe> allows you to embed external content into your website. |
| <!-- … --> | <!-- ... --> allows you to include comments in the HTML code. |
Individual instead of ordinary: With the Website Builder you can design your own website exactly as you want it. If you need help with this, our team of experts is happy to assist you.
