HTML Tags
HTML files consist of text, which is in turn subdivided into individual elements. HTML tags are used to mark up the source code of an HTML document. The type of tag used determines how the document is presented in a browser, for example.
Structure
Introductory HTML tags are always enclosed in angle brackets.
<introductory HTML tag>
Closing HTML tags contain a slash inside the brackets.
</ closing HTML tag>
HTML tags that do not require a closing part are called standalone tags. It is generally recommended to write all tags in lower case. That way there won’t be any problems with XHTML, where only lowercase characters are allowed.
Additional information about HTML tags are enclosed in quotation marks and introduced without commas.
Structure Example
<img src=“image URL“ align=“left“>
This image is from an online source, and is integrated into the document with a link.
Header elements
Structuring HTML tags
These HTML tags structure text.
<h1-6>…</h1-6>
This tag is used to mark up a header. In an HTML document, the order of header tags should be chronologically in ascending order. A header tagged with h1 should not be after a header tagged with h2.
<p>...</p>
This defines a complete paragraph within a text.
<div>…</div>
A general block element can be marked up with this.
<hr ….>
In this manner, a horizontal line is inserted into the HTML document. With additional information you can specify the size and thickness of the line and its position. Examples:
<hr align=“left“>
horizontal line left justified
<hr align=“center“ width=“150“ size=“2“ color=“#FBFBEF“>
centered dividing line in the length of 150 pixels and the thickness of two pixels in white
<div>…</div>
This is a complete block element that is inserted within these tags. These tags usually do not stand by themselves and you can specify the formatting of the entire block.
Example:
<div class style="font-family:sans-serif; font-size:11pt" align=“left“>
The size of the block is 11, the font is sans serif. The entire text is left-justified.
</br>
This tag inserts a line break. It can also get extended.
Example:
<br clear=“left“>
This ensures that the text flows left-justified with embedded images.
<pre>…
In this way, preformatted text can be copied exactly.
Tags for text and fonts
These tags format the font. Individual words can be displayed in bold or italic for example.
<span>…</span>
This allows you to define inline elements such as bold words, via CSS.
Example:
<span style="font-weight: bold;">bolded word</span>
<blockquote>…</blockquote>
The text within these tags is a quote from another source.
<font>…</font>
This tag configures the font color, font, and size according to the old HTML standard.
Example:
<font face=“Arial“ size=“2“>…</font>
The text within the tag is then written in Arial font size 2.
<b>…</b>
This tag is used for bolded words.
<dfn>…</dfn>
This marks a definition.
<cite>…</cite>
This cites the title of a work.
<code>…</code>
Computer code can be represented graphically with this tag.
<i>…</i>
Text that is within these tags is output in italics.
<u>…</u>''' or '''<ins>…</ins>
This allows you to underscore words.
<tt>...</tt>
If you want to imitate the font of a typewriter, use these tags.
<big>...</big>
This outputs very large fonts.
<em>…</em>
These tags highlight a text.
<small>...</small>
These tags make the font small.
<q>…</q>
Short quotations can be marked up this way.
<strike>...</strike>''' or '''<del>...</del>
You can strike out words with these tags. In blogs, this is a stylistic tool often used to highlight the previously written text or to show that the crossed-out words are no longer valid.
<sub>...</sub>''' or '''<sup>...</sup>
These tags allow you to subscript words.
Images tags
Even images can be integrated into documents with HTML tags and formatted.
<img src="URL">
This tag indicates the image source. There are other parameters that govern the image reproduction and image markup for formatting.
alt="..."
Describes the image content when a browser does not load the image
border=“…“
Puts the image in a frame
height=“...“ and width=“...“
This size information can help to ensure that images will load faster.
hspace=“...“ and vspace=“...“
Define the distance of the image to text
align=["top"|"middle"|"bottom"|"left"|"right"]
Arranges the image in relation to the following text
ismap/usemap="..."
You can embed a hyperlink in an image (reference-sensitive graphics)
area=“…“
Shows the regions of the image, where links are inserted
shape=“…“
Specifies the shape of the clickable area
<map name="...">
Specifies the name of a reference-sensitive graphics.
Tags for hyperlinks
Even hyperlinks are marked up with HTML tags.
<a href="URL">... code
These tags link text, an image or other element of the HTML code. If the document is to be opened in a new window, the tag is supplemented with target ="_ blank".
<a name="...">...</a>
This tag links destination anchor within a document.
<a href="#...">...</a>
With this tag you specify in the source code that the link has to direct to an anchor in the same document.
<a href="URL#...">...</a>
A hyperlink tagged this way, points to a specific text in another HTML document or a webpage.
<a href="mailto:...@...">...</a>
Hyperlink to an email address. For example,
<a href="mailto:MyName@MyProvider.com">E-Mail</a>
Tags for lists and tables
Using HTML tags complete lists can be displayed.
<dl><dt>...</dt><dd>...</dd><dt>...</dt><dd>...</dd></dl>
These tags are used for glossaries and definition lists.
<li>…</li>
These tags enclose individual elements of a list and select individual rows within the list.
<ol type=["1"|"I"|"A"|"a"] start=...> <li>...</li><li>...</li></ol>
You can produce a sorted list respectively arranged by numbers, roman numerals, uppercase or lowercase. “start” defines the starting value of the list.
Example:
<ol type=["1"] start=3> <li>...</li><li>...</li></ol>
This is a sorted list that starts with the number three.
<ul type=["square"|"disc"|"circle"]><li>...</li><li>...</li></ul>
An unordered list is marked up this way. All sub-items get the same bullet symbol (type).
<table>…</table>
These tags insert a table into the document. There are more options for the definition of the table similar to images. Moreover, you can insert backgrounds with background="...". Frame width and cell spacing can be defined with cellpadding/cellspacing="...".
<tr>...</tr>
This tag applies to all contents of a table row.
<td>...</td>
These tags define a single cell of a table.
Other HTML tags in alphabetical order
<!--...-->
You can insert a comment in an HTML document with these tags.
<!DOCTYPE>
You can define the document type with this.
<abbr>
This lets you specify an abbreviation.
<address>
This tag provides information about the creator or owner of the HTML document.
<article>
This tag defines an article.
<aside>
With this tag, content can be distinguished from the content of the document independently.
<audio>
This marks up audio elements.
<base>
This tag marks up the basic URL for all relative URLs within the document.
<body>…</body>
These tags define the document body.
<button>…</button>
A clickable button gets marked in the document with this tag.
<canvas>…</canvas>
These tags are used to include graphics with JavaScript.
<datalist>…</datalist>
This allows you to insert pre-defined options for entries.
<details>…</details>
Users can view or hide this information.
<dialog>…</dialog>
A dialog box is defined with these tags.
<embed>…</embed>
Other elements from an external source (such as YouTube videos) can be integrated into an HTML document.
<footer>…</footer>
These tags define the footer area of a webpage.
<form>…</form>
With these tags, a form is defined, in which a user can enter numbers or text.
<head>…</head>
Information about the document can be found between these tags. These elements are also called metatags.
<header>…</header>
You can define a header for a document with these tags.
<html>…</html>
The root of an HTML document can be fixed using these.
<iframe>…</iframe>
Documents can be enriched with content from iframes.
<link>…</link>
This defines the link between a document and an external source.
<main>…</main>
You can mark the main content of a website with this.
<meta>
This tag marks the meta specifications of an HTML document.
<nav>…</nav>
Navigation links can be marked up with these tags.
<noscript>…</noscript>
Alternative content for users whose browser cannot load specific scripts can be stored here.
<object>…</object>
Embedded objects can be defined.
<script>…</script>
This marks up a client-side script.
<source>…</source>
This way, various multimedia resources can be defined.
<time>…</time>
This tag notes a date and/or time for the document.
<title>…</title>
This stores a title for the webpage.
Benefits for search engine optimization
HTML tags are important for the on-page optimization of websites because usability and the flow of reading a website can be improved with text-structuring tags. Primarily, text-structuring HTML tags serve this purpose. At the same time, a clear markup of the content ensures that bots can crawl the website better and faster.
Elements such as page titles are also relevant to ranking. For this reason, this tag should get special attention in optimizing.
Web Links