a

Lorem ipsum dolor sit amet, elit eget consectetuer adipiscing aenean dolor

The Geekiest One

The Basics to HTML Tags

 HTML5 does not require the following. However, it is recommended that:

  • tags are written in lower-case
  • all tags, should be followed by their corresponding end delimiter tag e.g. paragraphs should be delimited by <p> ... </p> except for empty tags e.g. <hr> and <br>
  • all tag attributes should be enclosed between quotes e.g. <input type="text" name="surname">
  • tag delimiters should be given in order e.g.
    <p><strong><em>My strongly emphasized paragraph</em></strong></p>

In addition, indentation should be used to make the code readable and hence maintainable.

Introduction

HTML (HyperText Markup Language) is a markup language which consists of tags embedded in the text of a document. The browser reading the document interprets these markup tags to help format the document for subsequent display to a reader. However, many of the decisions about layout are made by the browser. Remember, web browsers are available for a wide variety of computer systems.

The browser displays the document with regard to features that the viewer selects either explicitly or implicitly. Factors affecting the layout and presentation include:

  • The markup tags used.
  • The physical page width.
  • The fonts used to display the text.
  • The colour depth of the display.

The browser ignores extra spaces and newlines between words and markup tags when reading the document. Thus, the following three text fragments will be formatted identically.

Fragment 1 Fragment 2 Fragment 3
The browser will ignore
new lines and extra
spaces in the text.
The browser will
ignore new lines and
extra spaces in the text.
The browser will
ignore new lines and
extra     spaces in the text.

to produce the following:

The browser will ignore new lines and extra spaces in the text.

 

The html content then begins with the tag <html> and ends with the tag </html>. The document is the divided into two sections:

  • the head, bracketed by <head> and </head>
  • the body, bracketed by <body> and <body>

The head of an HTML document contains identifying and control information that is not part of the displayed text. Such information can be the document title, bracketed by the <title> and <title> tags.

The body of the document is where the user-readable text is stored and usually accounts for the bulk of the document. Various control tags are there to tell the browser where to insert line breaks and how to format the document.


The markup language is made up of tags such as <b> which requests text that follows to be drawn attention to (usually by displaying hte text in bold face) without marking it up as important. This formatting is turned off by the inverse markup tag </b>.

The basic layout of an HTML document and the resultant information displayed by a browser such as Firefox, Chrome, Safari or Opera is shown below:

The meaning of the <b> changed with HTML5. Prior to HTML5, <b> was a simple formatting tag used to turn text to bold. The new definition for the <b> element is: “The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede” . A similar redefinition took place for the ielement. The <i> tag that used to specify a span of text to be displayed in italic now “represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.” .

Displayed by browser HTML markup required
An example of a simple web page.
<!doctype html>
<html>
 
<head>
  <meta charset="UTF-8">
  <title>Title of the web page </title>
</head>
  
<body>
  <!-- this is a comment that will not be displayed -->
  An example of a simple <b>web</b> page.
</body>

</html>

The tags used are:

HTML Markup Meaning
<!doctype html> Indicates that this is an HTML5 document
<html> </html> Defines the extent of the HTML markup text
<head> </head> Contains descriptions of the HTML page. This meta information is not displayed as part of the web page.
<title> </title> Describes the title of the page. This description is usually displayed by the browser as the title of the window in which the web page is displayed. This information is also used by some search engines to compile an index of web pages.
<body> </body> Delimits the body of the web page. In the body is the text to be displayed as well as HTML markup tags to hint at the format of the text.
<b> </b> Shows the importance of the enclosed text, usually by presenting it in a bold typeface.
<!-- some text --> Represent HTML comments. They can be used as in programming, and will not be displayed on the web page.

Simple Formatting Tags

The following are some of the simple physical formatting tags available in HTML.

Formatted text HTML markup required
Italic font. <i>italic</i> font.
Bold font. <b>bold</b> font.
Small font. <small>Small</small> font.
Subscript font. <sub>Subscript</sub>
Superscript font. <sup>Superscript</sup>
The text is red. The <span style="color:red">text</span> is red.
The <span> tag represents an inline element.
The style attribute allows CSS rules to be applied to the element.

Logical Formatting Tags

The following are some of the logical formatting tags in HTML. These should be used to describe a logical unit of your document. The formatting of this logical unit may in some cases be the same as produced by other formatting tags. Remember, the tags specify logical units of the document, software other than the web browser may need this information.

Formatted text HTML markup required
The following text is emphasized. The following <em>text</em> is emphasized.
The following text is strongly emphasized The following <strong>text</strong> is strongly emphasized.
The following name is a program variable The following <var>name</var> is a program variable
The following is a definition The following is <dfn>a definition</dfn>
The following is a citation. The following is <cite>a citation.</cite>
Use the e-mail address

coloma@wmin.ac.uk

to contact me.

Use the e-mail address <address>coloma@wmin.ac.uk</address> to contact me.
Represents computer code <code>Represents computer code</code>
A sequence of sample computer output A sequence of <samp>sample computer output</samp>
keyboard characters <kbd>keyboard characters</kbd>

Headings

A heading in the text is created with the <h1> tag. There are in fact six heading tags, going from <h1> the largest to <h6> the smallest.

Formatted text HTML markup required

A H1 heading

<h1>A H1 heading</h1>

A H2 heading

<h2>A H2 heading</h2>

A H3 heading

<h3>A H3 heading</h3>

A H4 heading

<h4>A H4 heading</h4>
A H5 heading
<h5>A H5 heading</h5>
A H6 heading
<h6>A H6 heading</h6>

A heading tag generates line break(s) before and after the heading text. For example:

Formatted text HTML markup required
Just before the heading.

A H4 heading

Just after the heading.

Just before the heading. <h4>A H4 heading</h4> Just after the heading.

Paragraphs

A paragraph is created with the <p> tag, and closed with the </p> tag

Formatted text HTML markup required
A first paragraph

A second paragraph

<p>A first paragraph</p><p>A second paragraph</p>

It is possible to break a paragraph to force a line break using the <br> tag:

Formatted text HTML markup required
A paragraph with
a line break
<p>A paragraph with <br>a line break </p>

Rulers

A horizontal ruler across the page can be created with the <hr> tag. For example:

Formatted text HTML markup required
End of a section


New section

End of a section <hr> New section
Only 40% of width


New section

Only 40% of width <hr style="width: 40%"> New section
The size of the ruler


New section

The size of the ruler <hr style="height: 10px;"> New section
Add Comment