HTML Tags

HTML Tags form the building blocks of HTML documents, they add semantic meaning, to the text and objects of a document. Tags are used in a number of markup languages from HTML and XHTML to MathML and SVG, and they also exist in a slightly different way in most documents.

A tag delimits the semantic meaning of an object, a simple way to understand this, is to envisage a paragraph, which is normally delimited by some space around the paragraph, the first letter begins with a capital, and a paragraph contains a number of sentences with the last character generally being a full stop. Whilst, these characteristics help us to see what a paragraph is, they are not hard and fast. A paragraph doesn't have to being with a capital letter, and it doesn't have to contain sentences that are ended with a full stop. Ambiguity is removed by using a defined format to delimit a paragraph that a computer system can easily recognise. Another way to understand tags is to imagine what happens when you make a selection of text bold. The internal representation of the text generally does change, instead an opening bold marker is placed at the front (opening tag) and when the bold effect stops a closing market is placed at the end (closing tag). Humans then just see the bold text and not the invisible marks, the computer also renders the text in bold which is a different representation of the text (a different numerical value is associated with a bold glyph on display, it is a different glyph to the same normal character).

Understanding HTML Tags

The format of HTML tags is fairly simple, but it can be quite complicated to explain how they work in just words, so an example is a good way of gaining understanding about HTML tags.

Understanding HTML Tags Example

My dear dear lord,
The purest treasure mortal times afford
Is spotless reputation-that away,
Men are but gilded loam, or painted clay.
A jewel in a ten-times barr'd-up chest
Is a bold spirit in a loyal breast.

Richard the Second Shakespeare 1592.

<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html
dir  = 'ltr'
lang = 'en'
><head
>
<meta
content    = "text/html; charset=UTF-8"
http-equiv = "Content-Type"
>
<title
>Understanding HTML Tags Example</title>
</head><body
id    = "understanding_html_tags_example"
title = "Understanding HTML Tags Example"
><!--
Understanding HTML Tags Example follows
--><blockquote
title = "Blockquote Tag and Bold Tag Example"
><p
title = "Richard the Second - Shakespeare 1592"
>My dear dear lord,<br
>The purest treasure mortal times afford<br
>Is spotless reputation-that away,<br
>Men are but gilded loam, or painted clay.<br
>A jewel in a ten-times barr'd-up chest<br
>Is a <b
title = "bold"
>bold</b> spirit in a loyal breast.</p>
</blockquote>
<!--
End of Understanding HTML Tags Example
-->
<p
title = "Richard the Second - Shakespeare 1592"
class = "citation"
><cite
title = "Richard the Second"
>Richard the Second</cite> Shakespeare 1592.</p>
</body>
</html>

The HTML markup above, demonstrates the use of both the blockquote tag and the bold (b) tag. To give the example some extra interest I have used some Shakespearian prose from Richard the Second, and that has necessitated the use of an extra tag, namely the line break (br).

The blockquote tag is a block tag, as it is contained with in another tag (body) it is placed against the body opening tag ending angle bracket, to avoid the introduction of a space character. The blockquote text is then contained between the ending angle bracket of the opening blockquote tag, and the beginning angle bracket of the closing blockquote tag. The bold (b) tag also follows the same convention. The line break (br) tag is used to break the line, it doesn't contain any information it just expresses a line break, as the new line character is converted into a space character in most of an HTML document, the exception being the pre formatted text tags. The p tag is used because the blockquote tag can only directly contain other block tag.

The HTML Coding Style used above is one that has been developed over a number of years by Poised Solutions, the style is fairly flexible but not widely adopted and may not be familiar to most, so there is an HTML Coding Style section to this site to explain the reasoning of, and how this HTML Coding Style works.

Anatomy of an HTML Tag

The anatomy of an HTML tag is fairly simple, the general form of <tag-open attribute = "value">contained items</tag-close> and for single non containing tags it is <tag/>. A tag is how an HTML is described when talking about all tags of that type, but when a tag is in a document it is referred to as an element.

Anatomy of an HTML Tag

Tag: is the entirety of the tag construct.
Element: is a tag introduced into a document.
Opening Tag: the part of the tag at the beginning of tag.
Attribute: is placed inside the opening tag and follows the construct of attribute name followed by equal sign (=).
Attribute Value: follows the equals sign of an attribute, and is enclosed in double quotes.
Closing Tag: the part of the tag at the end of a tag.

HTML Tag Sections

There are a large number of HTML tags, to make finding and understanding the tags a little simpler, they have been separated here into their default general display types.

HTML Tag Display Types

All Tags: Full list of HTML and XHTML tags. A brief description of each tag is given, and the headings link to the full tag descrption page.
None Tags: Tags with a display type of None, tend to be the extra tags that either bring in scripts, styles, or describe meta information that is not for direct display in a browser.
Block Tags: Tags with a display type of block, tend to create a new line at the end of the block (bottom right hand corner) and a new line if necessary at the start of the block (top left hand corner). Block tags tend to be enclosing tags of some magnitude, and can be considered atomic or molecular in regards to the information they encapsulate.
Inline Tags: Tags with a display type of inline, don't create new lines, they are designed to fit in with the flow of a document, and emphasis sub atomic elements of a document, e.g. the bolding of a word, or a placement of a hyperlink.
Table Tags: Tags with a display type involving tables, relates to the table construct in HTML. Tables are used extensively to show obviously tabulated data, and in layout.
List Item Tags: Tags with a display type of list item, tend to incorporate an inline elemnt and a block element. The inline element is the bullet, and the block encapsulates that to create a list item.

Discovering Display Types

Discovering display types can be done in a couple of ways, the DTD or Schema of a markup language can be examined for the declaration of the default display type, or the tags can be directly examined as elements in the browser using JavaScript and to display their default computed style or current style values.