Basic 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 new lines 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 i element. 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.

Displayed by browser	HTML markup required
An example of a simple web page.	`<!doctype html> <html lang="en"> <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 web page. </body> </html>`

<!doctype html>
<html lang="en">
 
<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 web 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.
`<html lang='en'>`	Specifies the language of the web page content.
`<meta charset='UTF-8'>`	Ensures a web page displays text correctly, especially for multilingual or special character content.
`<head> </head>`	Contains metadata and information about the document (not displayed).
`<title> </title>`	Describes the title of the page, often displayed in the browser's title bar.
`<body> </body>`	Delimits the main content of the web page, including text and other elements.
`<!-- some text -->`	Represents comments that are not displayed in the browser.

HTML Tags categories

HTML tags can be categorized into semantic and non-semantic, and further divided into block-level and inline elements. Additionally, they can be grouped by their purposes, such as logical structure, formatting, and forms.
The following sections expand on the purpose of those different tag categories.

Semantic and Non-Semantic HTML Tags

HTML tags can be classified into two categories: Semantic and Non-Semantic.

Semantic Tags

Semantic HTML tags clearly describe their purpose and the type of content they contain. These tags help browsers, developers, and assistive technologies understand the structure and meaning of the content.

Examples of semantic tags:

HTML Markup	Meaning
`<header> </header>`	Contains introductory content, such as the site logo, title, or navigation.
`<footer> </footer>`	Contains closing content, such as copyright info or contact details.
`<main> </main>`	Represents the primary content of the document (unique to each page).
`<section> </section>`	Groups related content into thematic blocks, typically with headings.
`<aside> </aside>`	Represents content related to the main content (e.g., a sidebar).
`<article> </article>`	Represents a standalone piece of content.
`<nav> </nav>`	Represents a navigation menu.

Do not confuse <head> with <header> and <body> with <main>

<head> is for metadata and configuration, and <header> is for visible introductory content, <header> is a tag that belongs within <body>
the <body> defines the entire visible webpage content, and <main> is a kind of a container to structure content in the main part of the page, unique content that is central to the page's purpose.

Here is a simple example page demonstrating the use of those tags:

the <header> </header> and <footer> </footer> tags to structure the content at the top and bottom parts of the page
the <main> </main> tag to organise the main content of the page
the <section> </section> tag to organise content in different sections withing the <main> </main> part of the page
<aside> </aside> for supplementary content that appears at the side of the page.

Non-Semantic Tags

Non-Semantic HTML tags do not provide any information about the content's meaning or structure. They are mainly used for styling and layout purposes.

Examples of non-semantic tags:

HTML Markup	Meaning
`<div> </div>`	A generic container for block-level content.
`<span> </span>`	A generic container for inline content.

HTML Block and Inline Tags

HTML tags can be categorized as block-level or inline elements based on how they are rendered by the browser and how they interact with other elements.

Block-Level Elements

Block-level elements typically occupy the entire width of their container and always start on a new line. They are often used to structure the main layout of a webpage.

Examples of Block Elements:

HTML Markup	Meaning
`<div>This is a block container.</div>`	A generic block container for grouping content.
`<p>This is a paragraph.</p>`	Represents a paragraph of text.
`<h1>Main Heading</h1>`	Headings, where <h1> is the largest and <h6> is the smallest.
`<ul><li>Item 1</li></ul>`	Unordered (<ul>) and ordered (<ol>) lists.
`<table><tr><td>Data</td></tr></table>`	Defines a table.

Inline-Level Elements

Inline elements do not start on a new line. They only take up as much width as necessary and are typically used for smaller, specific portions of content within a block-level element.

Key Inline Tags:

HTML Markup	Meaning
`<span class="highlight">This is inline.</span>`	A generic inline container for styling text.
`<a href="https://example.com">Visit Example</a>`	Defines a hyperlink.
`<strong>Important Text</strong>`	Marks strong importance; typically bold.
`<em>Emphasized Text</em>`	Marks emphasis; typically italicized.
`<img src="image.jpg" alt="Image description">`	Embeds an image.

Simple Formatting Tags

Simple formatting tags in HTML5 are used to apply visual styling to text content. They do not start on a new line and only take up as much width as their content requires, making them ideal for styling parts of text within a block of content. The following are some of the simple formatting tags available in HTML5.

Formatted text	HTML markup required
Italic text.	`<i>Italic</i> text.`
Bold text.	`<b>Bold</b> text.`
Underlined text.	`<u>Underlined</u> text.`
~~Strikethrough~~ text.	`<s>Strikethrough</s> text.`
Small text.	`<small>Small</small> text.`
_Subscript text.	`<sub>Subscript</sub>text.`
^Superscript text.	`<sup>Superscript</sup>text.`
marked text.	`<mark>Marked</mark>text. *`
~~deleted~~ text.	`<del>Deleted</del> text. *`
inserted text.	`<ins>Inserted</ins> text. *`

Tags with an asterisk (*) have semantic or logical purposes in addition to their visual styles.

Logical Structure 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.` Screen readers will change their voice for <em>. The em element represents stress emphasis of its contents.
The following text is strongly emphasized. Before proceeding, make sure you put on your safety goggles.	`The following <strong>text</strong> is strongly emphasized.` Screen readers will change their voice for <strong>. Can be used to mark up a warning or caution. E.g., `Before proceeding, <strong>make sure you put on your safety goggles</strong>.`
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>`
Marks up inline quotations	`Marks up inline <q>quotations</q>`
`keyboard characters`	`<kbd>keyboard characters</kbd>`

See the rendering of the code above without any CSS in the iframe below:

JS Bin on jsbin.com

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>`

See the rendering of the code above without any CSS in the iframe below:

JS Bin on jsbin.com

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

Formatted text	HTML markup required
A first paragraph A second paragraph	`<p>A first paragraph</p><p>A second paragraph</p>`

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`

Summary table

Category	Block-Level Elements	Inline Elements
Semantic	<header>, <footer>, <article>, <section>	<a>, <time>, <mark>, <code>
Non-Semantic	<div>, <p>	<span>, <b>, <i>, <u>
Logical Structure	<main>, <aside>, <section>, <header>, <footer>	<span>
Formatting	<p>	<strong>, <em>, <mark>, <q>

Final Note: As it is good practice to separate content from style we have avoided the use of styling attributes and styling elements in this Lecture. It is also recommended to avoid using CSS inline styles inside elements. Instead, CSS rules should be created and applied. Check the Introduction to CSS Lecture to see how to do this.