HTML Table

The HTML table tag (<table>) is used to represent data in a structured way by creating a table.
For example,

<table border="1" >

<tr>

<th>Name</th>

<th>Age</th>

<th>Country</th>

</tr>

<tr>

<td>Harry Depp</td>

<td>28</td>

<td>Britain</td>

</tr>

<tr>

<td>John Smith</td>

<td>35</td>

<td>USA</td>

</tr>

<tr>

<td>Ram Krishna</td>

<td>19</td>

<td>Nepal</td>

</tr>

</table>
Browser Output

Table tag <table> in HTML

The <table> tag is used to define a table. For example,

<table>

….

<table>

Table Row <tr> in HTML

The <tr> tag is used to define a row in a table. For example,

<table>
<tr>
...
</tr>
</table>
The table row can include either table heading, <th> or table data, <td>.

<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>

Browser Output
In the above example, Item and Count are table headers and they are used to
represent the category of data in a particular row.

Here, the styling of the table headers is bold and center-aligned. This is
because the <th> tag has some default styling.

Table Cell <td> in HTML

The <td> tag is used to define table cells (data). The table cells store data to be
displayed in the table. For example,
<tr>
<td>Apple</td>
<td>Mango</td>
<td>Orange</td>
</tr>

In the above example, <td>Apple</td>, <td>Mango</td> and <td>Orange</td> are table

cells.

Table cells are generally inside the table row or table headers.

Table Border

<table border="1">

...

</table>

In HTML, the border attribute is used to add a border to a table and all the
cells.

Colspan and Rowspan

Colspan

The colspan attribute merges cells across multiple columns. For example,

<table>

<tr>

<th>S.N</th>

<th>Item</th>

<th>Quantity</th>

</tr>

<tr>

<td>1</td>

<td>Apple</td>

<td>2</td>

</tr>

<tr>

<td>2</td>

<td>Mango</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>Orange</td>
 <td>1</td>

</tr>

<tr>

<td colspan="2">Total</td>

<td>5</td>

</tr>

</table>

Browser Output

An HTML Table showcasing colspan

In the above example, you can see that the last row only has 2 cells with one
cell occupying 2 columns.

The value of the colspan attribute determines how many columns the cell
occupies.

Rowspan
The rowspan attribute merges cells across multiple rows. For example,

<table>

<tr>
 <th>Name</th>

<th>Subject</th>

<th>Marks</th>

</tr>

<tr>

<td rowspan="3">Mark Smith</td>

<td>English</td>

<td>67</td>

</tr>

<tr>

<td>Maths</td>

<td>82</td>

</tr>

<tr>

<td>Science</td>

<td>91</td>

</tr>

</table>

Browser Output

HTML Lists
HTML lists are used to display related information in an easy-to-read and concise way as
lists.

We can use three types of lists to represent different types of data in HTML:
 Unordered List <ul>

Ordered List <ol>

Description List <dl>

Unordered List

The unordered list is used to represent data in a list for which the order of items does not
matter.

In HTML, we use the <ul> tag to create unordered lists. Each item of the list must be a
<li> tag which represents list items. For example,

<ul>

<li>Apple</li>

<li>Orange</li>

<li>Mango</li>

</ul>

Browser Output

Here, <li>Apple</li>, <li>Orange</li>, and <li>Mango</li> are the list items.

Ordered List
The ordered list is used to represent data in a list for which the order of items has
significance.

The <ol> tag is used to create ordered lists. Similar to unordered lists, each item in the
ordered list must be a <li> tag. For example,

ol>
 <li>Ready</li>

<li>Set</li>

<li>Go</li>

</ol>

Browser output

Description List

The HTML description list is used to represent data in the name-value form.
We use the <dl> tag to create a definition list and each item of the description
list has two elements:

 term/title - represented by the <dt> tag

 description of the term - represented by the <dd> tag
Example

<dl>

<dt>HTML</dt>

<dd>Hyper-Text Markup Language</dd>

<dt>CSS</dt>

<dd>Cascading StyleSheets</dd>

<dt>JS</dt>

<dd>Javascript</dd>

</dl>

Browser Output
Tags used in HTML lists

Tag Explanation

<ol> Defines an ordered list.

<ul> Defines an unordered list.

<dl> Defines a description list.

<li> Defines a list item in ordered or unordered lists.

<dt> Defines a term in description list.

<dd> Defines the description of a term in the description list.

HTML Unordered List

We use the HTML unordered list to define a list where the sequence or order of the list items
doesn't matter. We can use an unordered list for keeping track of groceries, supplies and
random objects.

In HTML, we use the <ul> tag to create an unordered list. For example,

<ul>
 <li>Apple</li>

<li>Mango</li>

<li>Orange</li>

<li>Banana</li>

</ul>

Browser Output

Each item of the list is enclosed inside the <li> tag and they are represented by the dot bullet
point symbol.

By default, the symbol to represent an unordered list in HTML is a dot bullet point, however, we
can change them as per our choice.

Nesting Lists
In HTML, we can create a nested list by adding one list inside another. For example,

<ul>

<li>

Coffee

<ul>

<li>Cappuccino</li>

<li>Americano</li>

<li>Espresso</li>

</ul>

</li>

<li>

Tea

<ul>
 <li>Milk Tea</li>

<li>Black Tea</li>

</ul>

</li>

<li>Milk</li>

</ul>

Browser Output

HTML Ordered List

We use the HTML ordered list to define a list where the sequence or order of
the list items is important. We can use the HTML ordered list for recipes,
algorithms, top ten lists, and so on.

We use the <ol> tag to create an unordered list. For example,

<ol>

<li>Name</li>

<li>Address</li>

<li>Phone Number</li>

</ol>
Browser Output

Each item of the list is enclosed inside the <li> tag and they are numbered by decimal numbers.

By default, ordered lists are ordered by numbers, however, we can change them as per our
choice.

Ordered Lists Type

We use the type attribute to change the marker for the list. There are five
types of numbering in the ordered list. They are

Type Description

"1"(Default) The list is numbered with numbers.

"a" The list is numbered with lower-case alphabets.

"A" The list is numbered with upper-case alphabets.

"i" The list is numbered with lower-case roman numerals.

"I" The list is numbered with upper-case roman numerals.

Below, we can see examples for all the number types.

start Attribute

We use the start attribute to change the starting point for the numbering of the list. For example,

<ol start='5'>

<li>Harry</li>

<li>Ron</li>

<li>Sam</li>

</ol>

Browser Output
Nesting Lists
In HTML, we can create a nested list by adding one list inside another. For example,

<ol type="I">

<li>

Chapter 1

<ol type="a">

<li>Lesson 1</li>

<li>Lesson 2</li>

</ol>

</li>

<li>

Chapter 2

<ol type="a">

<li>Lesson 1</li>

<li>Lesson 2</li>

<li>Lesson 3</li>

</ol>

</li>

<li>

Chapter 3

<ol type="a">

<li>Lesson 1</li>

</ol>

</li>

</ol>

Browser Output
HTML Description List

We use the HTML description list to create a list where list items include terms and descriptions
of the term.

In HTML, we use the <dl> tag to create a description list. For example,

<dl>

<dt>HTML</dt>

<dd>HyperText Markup Language</dd>

<dt>CSS</dt>

<dd>Cascading Style Sheets</dd>

</dl>

Browser Output

HTML Line break

The HTML Line Break tag is used to apply a line break and start your text in the new line.

In HTML, we use the <br> tag to create a line break.

Example

<p>

Use the <br> br tag <br> to create line breaks in text.

</p>

Browser Output

HTML Links
HTML links or hyperlinks connect one resource on the web to another. The resource may be an
image, a web page, a program, a video clip, an audio clip, an element within a web page, etc, or
anything that can be hosted on the internet.

We use the HTML <a> tag to create hyperlinks. The syntax for the <a> tag is

<a href="URL"> Text </a>

Here,

URL - the destination of the link

Text - the part that will be visible as a link

Clicking on the text will navigate you to the resource in the URL

For example,

<a href="https://www.programiz.com/swift-programming/continue-statement"> Swift Continue

Statement </a>

Browser Output
Here, clicking on the Swift Continue Statement will take you to

https://www.programiz.com/swift-programming/continue-statement.

Default Link Styles

By default, browsers will style links differently depending on whether the link is active, visited, or
unvisited.

target Attribute

By default, any link clicked will open in the same browser window. This may
lead to a bad user experience. This is where the target attribute becomes
useful. For example,
<a href="https://www.programiz.com" target="_blank">Programiz</a>

Here, target= "_blank" opens the link in a new browser tab.

We use the target attribute to specify where the link is opened. The target
attribute has 4 values.
 Target Description

_self (Default) Opens the link in the same browser tab.

_blank Opens the link in a new browser tab.

_parent Opens the link in the parent frame.

_top Opens the link in the current tab window (topmost parent).

Linking to an HTML element

As previously mentioned, along with linking to web sources, an <a> tag can also link to a
respecific element within the web page. We use that by adding # to the URL followed by the id
of the specific element. For example,

Link to an element in the same webpage:

<a href="#title">Go to Title</a>

Here, clicking on this link will scroll the web page to the element with the id of title

Link to an element in another webpage:

<a href="programiz.com/html/head#title-tag"> Link </a>

Here, clicking on this link will take us to the URL programiz.com/html/head and then scroll to the
element with the id title-tag.

Email
We can also use HTML links as email links and call links to help users contact us or someone
else using their email client or call app.

Email links:

The email link opens the user's default mail client to make it easier for the user to send mail to a
specific address. For example,

<a href="mailto:[email protected]" > Send Mail </a>

Browser Output
HTML Images
The HTML <img> tag embeds an image within the HTML web page. For example,

<img src="logo.png">

Browser Output

Here, the <img> tag inserts the image logo.png on the webpage.

The HTML image tag has 2 important attributes:

The src attribute

The alt attribute

Note: The <img> tag is an empty tag, i.e. It doesn't require a closing tag.

HTML Image src Attribute

The src attribute is a required attribute for the <img> tag. It specifies the path (URL) to the
image. It tells the browser where to look for the image. For example,

<img src="tictactoe.png" >

Browser Output
In the above example, the src attribute tells the browser to load the image from the same
directory where the webpage is located.

Similarly, if the image is stored in a subdirectory, the path in the src attribute would be written as

<img src="images/tictactoe.png" >

If the image is located on another server entirely or if we want to use an image from the web, we
can provide an absolute URL for the image. For example,

<img src="https://www.example.com/images/tictactoe.png">

HTML Image alt Attribute

The alt attribute is the text description of an image. The value of the alt attribute should describe
the image such that the content is meaningful even if the image fails to load.

<img src="computer.png" alt=" A standard Computer" >

Browser Output

The alt attribute's contents are shown if the user cannot view the image (slow internet, wrong
src attribute, or using a screen reader).

HTML Image Size - Width and Height

We can use the style attribute to specify the height and width of an Image. For example,

<img src="tictactoe.jpg" alt="A game of tic-tac-toe" style="width: 200px; height: 200px;">

Alternatively, we can also use the height and width attributes to set the height and width. For
example,

<img src="tictactoe.jpg" alt="A game of tic-tac-toe" width="200" height="200">

Browser Output
We should always set the height or width of images. Otherwise when the image loads, the
content on the webpage will be shifted.

Common Image Formats

Format File Format Extension

GIF Graphics Interchange Format .gif

PNG Portable Network Graphics .png

SVG Scalable Vector Graphics .svg

JPEG Joint Photographic Expert Group image .jpg, .jpeg

WEBP Web Picture .webp

HTML Bold
We use the HTML <b> tag or the HTML <strong> tag to make text bold. For example,

<b>This text is bold.</b>

<br>

<strong>This text is also bold.</strong>

Browser Output

HTML Italic
We use the HTML <i> tag or the HTML <em> tag to make the text italic.

HTML <i> Tag

The HTML <i> tag is a physical tag used to make the text italic. It is used to indicate foreign text,
scientific nomenclature, thoughts, etc.
<p> This text is <i>italic</i>.</p>

Browser Output

HTML <em> Tag

The HTML <em> tag is a semantic tag that is used to signify that the text inside the tag is being
emphasized. It is a semantic tag as opposed to <i> which doesn't hold any semantic meaning.

<p> This text is <em>emphasized</em>.</p>

Browser Output

HTML Superscript and Subscript

Superscript

The HTML <sup> tag is used to create superscript text. The text inside the <sup> tag is
rendered half a character above the normal line and has a smaller font size. For example,

<p> This is a ^Superscript text.</p>

Browser Output
Usage of Superscript

Superscript text is generally used for exponents, measurement units, and ordinal numbers. For
example,

1. Superscript in exponents

<p> a² + b² = c<sup>2<sup></p>

Browser Output

2. Superscript in measurement units

<p>The area of this park is 200m².</p>

Browser Output

3. Superscript in ordinal numbers

<p>Ram scored 1^st position in the 100m race.</p>

Browser Output

Subscript

The HTML <sub> tag is used to create subscript text. The text inside the <sub> tag is rendered
half a character below the normal line and has a smaller font size. For example,
<p> This is a _Subscript text.</p>

Browser Output

Usage of Subscript

Superscript text is generally used for mathematics and chemical formulas. For example,

1. Usage in Mathematical Formula

<p> <var>x₁</var> … <var>x_n</var></p>

Browser Output

2. Usage in Chemical Formula

<p> H₂SO₄ is chemical formula for sulphuric acid.</p>

Browser Output

HTML Formatting tags

Below are listed the formatting tags available in the latest version of HTML.

<b> tag - Bold Text

<i> tag - Italic Text

<u> tag - Underlined Text

<strong> tag - Strong Text

<em> tag - Emphasized Text

<mark> tag - Highlighted Text

<sup> tag - Superscript Text

<sub> tag - Subscript Text

<del> tag - Deleted Text

<ins> tag - Inserted Text

<big> tag - Big Text

<small> tag - Small Text

HTML <b> and <strong> tag

The HTML <b> is a physical tag used to simply make text bold.

<p> This text is <b>bold</b>.</p>

Browser Output

HTML <u> tag

The HTML <u> tag is a physical tag used to make the text underlined.

<p> This text is <u>underlined</u>.</p>

Browser Output

HTML <ins> and <del> tag

The HTML <del> tag is a semantic tag used to represent that the text is deleted or changed.
<p> This text is <del>deleted</del>.</p>

Browser Output

The HTML <ins> tag is a semantic tag used to represent that the text has been inserted in the
document. The <ins> tag generally follows some deleted text.

<p> This text is <del>deleted</del> <ins>inserted</ins>.</p>

Browser Output

HTML <big> and <small> tag

The HTML <big> tag is a physical tag used to make text one font size larger than the
surrounding text.

<p> This text is <big>bigger</big>.</p>

Browser Output

The HTML <small> tag is a physical tag used to make text one font size smaller than the
surrounding text.

<p> This text is <small>smaller</small>.</p>

Browser Output