0% found this document useful (0 votes)

11 views82 pages

Building Blocks of HTML

The document provides a comprehensive overview of HTML, detailing its essential components such as tags, attributes, and elements that form the foundation of web pages. It explains the structure of HTML documents, including the use of semantic tags, and covers various HTML functionalities like lists, hyperlinks, images, tables, and forms. Additionally, it highlights the importance of understanding these concepts for creating well-structured and accessible web content.

Uploaded by

laujona6

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

11 views82 pages

Building Blocks of HTML

Uploaded by

laujona6

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

Building Blocks of HTML

Last Updated : 17 Mar 2025

HTML is necessary for creating any webpage that you find on the internet. It presents text, images, links,
forms and similar items using tags in a special system. For either beginners or those who plan to become web
developers, it's important to learn how HTML forms the base of web pages.

The most important components of an HTML document are:

1. Tags
2. Attributes
3. Elements

It's important to understand how the two are joined to affect a webpage's design and content.

1) HTML Tags

Tags make HTML possible. They set out the way content should behave or look when displayed on the
internet. Most of the time, the tags used in HTML pair a start tag and an end tag.

Syntax

. <tagname>Content goes here</tagname>

The tag at the start of a content section, such as <p>, marks the beginning of its layout or purpose. This tag
indicates the ending of a paragraph: </p>. What's inside the tags is the content that gets altered.

Some tags, though, are self-closing or do not need content-they have functions, even without any content
inside. These are tags, for example, <br> for new lines and <img> for photos.

Examples

Tags Meaning

<h1> to <h6> Headings from most to

least important

<p> Paragraph

<a> Anchor (hyperlink)

<div> Division or section

<img> Image

<br> Line break

2) HTML Attributes

Attributes add additional information to elements and should be set up in the tag where the element is first
mentioned. Each pair consists of a name and a value, where the name describes the value.

Syntax

. <tagname attribute="value">Content</tagname>
Example
. <p style="color:blue;">This paragraph is styled blue.</p>
. <img src="[Link]" alt="A scenic view" width="400" height="300" />
. <a href="[Link] TPointTech</a>
HTML behaviour and look are greatly improved by attributes such as style, src, href, alt and class.

3) HTML Elements

The structure of an HTML element is a tag, the content you place and another tag. Browsers turn various
elements into the content you see, such as headings, lists, links, images and paragraphs. A tag surrounds any
time content, and an element is formed.

The diagram below will show you how HTML elements work.

Example

. <!DOCTYPE html>
. <html>
. <head>
. <title>The basic building blocks of HTML</title>
. </head>
. <body>
. <h2>The building blocks</h2>
. <p>This is a paragraph tag</p>
. <p style="color: red">The style is attribute of paragraph tag</p>
. <span>The element contains tag, attribute and content</span>
. </body>
. </html>
Output:
The building blocks

This is a paragraph tag

The style is attribute of paragraph tag

The element contains tag, attribute and content

Structure of an HTML Document

All HTML documents use certain structural elements in a basic way. An HTML skeleton is ready for you below:

Example

. <!DOCTYPE html>
. <html>
. <head>
. <title>HTML Page</title>
. </head>
. <body>
. <h1>Hello, World!</h1>
. <p>This is a simple webpage.</p>
. </body>
. </html>
What Every Structure Tag Means:

<!DOCTYPE html>: Defines that this document is HTML5.

<html>: Holds together the entire HTML document.

<head>: Has data known as metadata inside, which covers the page title and links to related resources.

<title>: It sets the headline seen above the page when you open your browser.

<body>: Includes everything that can be seen on the screen, like text, images, buttons and links.

Nested Elements

In HTML, you are able to put elements within other elements. People call this nesting and it's very important
for keeping things orderly.

Example

. <body>
. <div>
. <h2>Nested Structure</h2>
. <p>This paragraph is nested within a div.</p>
. </div>
. </body>
Note: Above, you can see that the parent of <p> and <h2> within the <div> element.

Empty / Void Elements

A number of elements in HTML can be open or closed, as they do not include content. We call these elements
empty or void for this reason.

List of Empty Elements

Tag Description

<br> Inserts a line break

<hr> Horizontal rule (line)

<img> Embeds an image

<input> Input field in forms

<link> Used in the <head> for

stylesheets
Example

. <h2>Title</h2>
. <br />
. <p>Continued text after line break. </p>

Block-Level vs Inline Elements

Each block-level element is separated into its line and spans the entire width of the container. Most of
these elements additionally contain other elements such as <p>, <h1> to <h6>, <section>, <article> and
<table>.

Example

. <p>This is a block-level paragraph.</p>

Meanwhile, inline elements run along with the adjacent content and only grab as much space as needed.
<span>, <a>, <img>, <strong>, <em>, <input> are considered as inline elements.

Example

. <p>This is <strong>bold text</strong> in a paragraph.</p>

Text Formatting Tags

HTML allows you to use text formatting without CSS.

Tag Description

<strong> Bold

<em> Italic

<u> Underlined

<mark> Highlighted

<del> Strikethrough

<small> Smaller text

List Elements

HTML allows users to organise things into lists with three types, as follows:

Unordered List

This is applied when order does not play any role. Most of the time, each item is shown with bullet points.

Example

. <ul>
. <li>HTML</li>
. <li>CSS</li>
. </ul>
Ordered List

It helps to convey meaning when order matters. The process automatically numbers your items for you.

Example

. <ol>
. <li>First Step</li>
. <li>Second Step</li>
. </ol>
Definition List

Designed to present terms and what they mean. It is convenient for creating glossaries or metadata.

Example

. <dl>
. <dt>HTML</dt>
. <dd>Standard markup language for creating web pages.</dd>
. </dl>

Hyperlinks

Users are taken to other websites by clicking on the hyperlinks within the text.

Example

. <a href="[Link] Example</a>

Images

You need the <img> tag to embed images on a webpage. Don't forget to mention the source attribute (src)
and the optional alternate text (alt).

Example
. <img src="[Link]" alt="TPointTech Logo" width="200" />
Note: Having alt text in the <img> tag makes a website more accessible and easier to
find for search engines.

Tables

Tables in HTML are helpful because they line up data in both rows and columns, making it clear to the viewer.

Example

. <table>
. <thead>
. <tr><th>Name</th><th>Age</th></tr>
. </thead>
. <tbody>
. <tr><td>Alice</td><td>28</td></tr>
. <tr><td>Bob</td><td>32</td></tr>
. </tbody>
. </table>

Forms

Forms allow users to input data, such as names or comments, which can be submitted to a server for
processing.

Example

. <form>
. <label>Name:</label>
. <input type="text" name="username" />
. <button type="submit">Submit</button>
. </form>

Semantic Tags

HTML5 introduced semantic elements to clearly describe the meaning and role of different parts of a
webpage. Because of these elements, web content becomes easier for browsers, search engines and
assistive technologies to interpret and understand.

A webpage or section has a <header> at the top and a <footer> at the bottom, which usually includes
even main titles, navigation or credits. The <nav> bar provides a set of links that lets users navigate through
a site's inner pages.

<main> shows the most important topic on the page within the main content area. <section>, <article> is
dedicated to setting up content in circular collections or as reusable and thematic things (such as blog
articles or newspaper posts).

The use of semantic tags ensures accessibility is improved, SEO becomes enhanced, and your code is
organised and easy to handle by developers.

Conclusion

You have to know about tags, attributes and elements when creating any webpage. They are the key
elements behind how web content is put together and shown on websites. With HTML, visitors can enjoy web
pages that have proper structure thanks to headings, paragraphs, photos, forms and connections between
pages. When you learn these essential concepts thoroughly, you can create useful web pages.

HTML Tags
Last Updated : 17 Mar 2025
HTML tags are like keywords which defines that how web browser will format and display the content. With
the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags
contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML
tags are used to create HTML documents and render their properties. Each HTML tags have different
properties.

An HTML file must have some essential tags so that web browser can differentiate between a simple text and
HTML text. You can use as many tags you want as per your code requirement.

o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag> (except some
tags)

Syntax

<tag> content </tag>

HTML Tag Examples

Note: HTML Tags are always written in lowercase letters. The basic HTML tags are
given below:
<p> Paragraph Tag </p>

<h2> Heading Tag </h2>

<b>Bold Tag</b>
<i>Italic Tag</i>
<u> Underline Tag</u>
Test it Now

Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

HTML Meta Tags

DOCTYPE, title, link, meta and style

HTML Text Tags

HTML Link Tags

<a> and <base>

HTML Image and Object Tags

<img>, <area>, <map>, <param> and <object>

HTML List Tags

<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags

table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags

form, input, textarea, select, option, optgroup, button, label, fieldset and legend

HTML Scripting Tags

script and noscript

Note: We will see examples using these tags in later charters.

All HTML Tags

Let's discuss the complete tag list that is present in the HTML that is represented below.

1. Comments:

With the help of this tag, we can add comments in the HTML. After commenting on the elements, the browser
does not render it. Also, these comments parts are not displayed on the web page. But these commented
codes are available in the source code.

Syntax:
. <strong></strong>

2. Doctype:

With the help of this tag, we can declare the version of the markup language to the web browser.

Syntax:

. < !DOCTYPE html >

3. <a>:

With the help of this tag, we can create a hyperlink to the web page. The hyperlink can be done with the help
of another file in a different location.

Syntax:

. <a href="url">Link Text</a>

4. <abbr>:

With the help of this tag, we can define the abbreviations or acronyms of longer words, such as www, HTML,
HTTP, etc.

Syntax:

. <abbr title="expanded-text">abbreviation</abbr>

5. <address>:

With the help of this tag, we can find the address or the contact details of the web page's author. The
<address> tag contains addresses, cellphone numbers, emails, website connections, etc.

Syntax:

. <address>
. Contact Information Goes Here
. </address>

6. <area>:

With the help of this tag, we can identify the clickable area associated with the hyperlink.

Syntax:

. <area shape="shape-type" coords="coordinates" href="destination-url" alt="alternative-text">

7. <article>:
With the help of this tag, we can represent a piece of content that is used to be distributed to other websites
without being a part of this. With the help of <article> tag, we can display entire blog posts, news articles, or
similar content, etc.

Syntax:

. <article>
. 
. </article>

8. <audio>:

With the help of this tag, we can embed the audio file into the webpage. To do this, there is no need for
additional plug-ins like Flash.

Syntax:

. <audio src="audio-file.mp3" controls>

. Your browser does not support the audio element.
. </audio>

9. <aside>:

With the help of this tag, we can define the content related to the web page's main content, but they are not
constituted to the web page.

Syntax:

. <aside>
. 
. </aside>

10. <b>:

With the help of this tag, we can make the text bold without any additional significance.

Syntax:

. <b>Text to be displayed in bold</b>

11. <base>:

With the help of this tag, we can create the target address, which is targeted by all the URLs present in the
document.

Syntax:

. <base href="base-url" target="base-target">

12. <bdi>:
With the help of this tag, we can tell the browser to isolate the text that comes from other destinations with
the help of a bidirectional algorithm.

Syntax:

. <bdi>Text with different directionality</bdi>

13. <bdo>:

With the help of this tag, we can override the current text.

Syntax:

. <bdo dir="direction">Text with overridden directionality</bdo>

14. <blockquote>:

With the help of this tag, we can provide a way to insert the quotation in the document from another source.
By default, the browser takes the text inside a quote tag as indented.

Syntax:

. <blockquote>
. Quoted content goes here.
. </blockquote>

15. <body>:

With the help of this tag, we can define the web page's main content. The body tag includes text, paragraphs,
headings, images, tables, links, and videos.

Syntax:

. <body>
. 
. </body>
. <strong> </strong>

16. <br>:

With the help of this tag, we can produce a line break on the web page. We can use this tag basically during
the writing of poems or addresses that require line breaks.

Syntax:

. <br>
. <strong> </strong>

17. <button>:
With the help of this tag, we can create a clickable button on the web page. We can use the button tag in
forms or anywhere in a document.

Syntax:

. <button>Button Text</button>
. <strong> </strong>

18. <canvas>:

With the help of this tag, we can define a particular region used for drawing graphics through scripting
(usually JavaScript).

Syntax:

. <canvas id="canvas-id" width="width" height="height"></canvas>

19. <caption>:

With the help of this tag, we can create the table caption, which is used to create the title for the table.

Syntax:

. <table>
. <caption>Caption Text</caption>
. 
. </table>

20. <cite>:

With the help of this tag, we can do some creative work and give a title for that creative work.

Syntax:

. <cite>Referenced Content</cite>

21. <code>:

With the help of this tag, we can insert a particular code fragment, which might be HTML or CSS code.

Syntax:

. <code>Code goes here</code>

22. <col>:

With the help of this tag, we can specify all the column's properties. We can specify it inside the <colgroup>
element.

Syntax:
. <col>

23. <colgroup>:

With the help of this tag, we can specify one or more columns in a group. With the help of this, we can apply
the style to the entire column without repeating the style for every column and every row.

Syntax:

. <colgroup>
. 
. </colgroup>

24. <data>:

With the help of this tag, we can add machine-readable translation. The processor generates it, and the
browser can generate the human-readable value.

Syntax:

. <data value="data-value">Data Label</data>

25. <datalist>:

With the help of this tag, we can provide an auto-complete feature to the form element. With the help of this,
the user can select the option from the option list.

Syntax:

. <input list="datalist-id">
. <datalist id="datalist-id">
. 
. </datalist>

26. <dd>:

With the help of this tag, we can define the definition description in the HTML. It is also used to describe an
item in the list of descriptions.

Syntax:

. <dl>
. <dt>Term</dt>
. <dd>Description or definition goes here</dd>
. </dl>

27. <del>:

With the help of this tag, we can declare the particular section that will be deleted from the document. After
doing this, the web browser strike over that particular section in the webpage.
Syntax:

. <del>Deleted Text</del>

28. <details>:

With the help of this tag, we can create a toggle. This toggle contains all the information but is in a closed
state. When we mouse hover over it, it comes to an open state and displays all the hidden information.

Syntax:

. <details>
. <summary>Summary Text</summary>
. 
. </details>

29. <dfn>:

With the help of this tag, we can represent the definition element. With the help of the definition element, we
can define the instances of the definition. When a term first appears in the document, it is known as the
instances of the definition.

Syntax:

. <dfn>Term Definition</dfn>

30. <dialog>:

With the help of this tag, we can define a dialogue box and the other webpage components. With the help of
this component, the webpage can interact with the user beautifully.

Syntax:

. <dialog open>
. 
. </dialog>

31. <div>:

With the help of this tag, we can create a generic container that can hold the flow of the content. It also does
not have the default rendering.

Syntax:

. <div>
. 
. </div>

32. <dl>:
With the help of this tag, we can define the list of items on the web page. We can also represent the
metadata with the help of this tag.

Syntax:

. <dl>
. <dt>Term 1</dt>
. <dd>Definition 1</dd>
. <dt>Term 2</dt>
. <dd>Definition 2</dd>
. 
. </dl>

33. <dt>:

With the help of this tag, we can define the definition list on the web page. we have to write the <dt> tag
within the <dl> tag. We can also flow this element with the help of <dd> tag.

Syntax:

. <dl>
. <dt>Term</dt>
. 
. </dl>

34. <em>:

With the help of this tag, we can emphasize a particular word or phrase within a sentence. It converts the
normal word or sentence into italic and semantic styles.

Syntax:

. <em>Emphasized Text</em>

35. <embed>:

With the help of this tag, we can embed external things such as audio or video into the webpage.

Syntax:

. <embed src="content-url">

36. <fieldset>:

With the help of this tag, we can create a group of related elements inside a form. Also, with the help of this,
we can create a box around the element.

Syntax:

. <fieldset>
. <legend>Fieldset Title</legend>
. 
. </fieldset>

37. <figcaption>:

With the help of this tag, we can attach the caption for the image, table, or chart contained within the
<figure> element.

Syntax:

. <figure>
. 
. <figcaption>Caption or Description</figcaption>
. </figure>

38. <figure>:

With the help of this tag, we can create self-contained content, also referred to as a single entity.

Syntax:

. <figure>
. 
. <figcaption>Caption or Description</figcaption>
. </figure>

39. <footer>:

With the help of this element, we can represent the footer part in the root element.

Syntax:

. <footer>
. 
. </footer>

40. <form>:

With the help of this tag, we can receive the information from the user.

Syntax:

. <form action="form-handler-url" method="HTTP-method">

. 
. </form>

41. <head>:
With the help of this tag, we can specify the header part of the header section of the code. It contains all the
information regarding the document.

Syntax:

. <head>
. 
. </head>

42. <header>:

With the help of this tag, we can define the webpage's header. It also contains information regarding the title
and heading of the document and section.

Syntax:

. <header>
. 
. </header>

43. <hgroup>:

With the help of this tag, we can represent the heading group. It is also used for group heading elements,
such as headings and subheadings, from <h1> to <h6>.

Syntax:

. <h1>Main Heading</h1>
. <h2>Subheading 1</h2>
. <h3>Sub-subheading 1.1</h3>
. <h3>Sub-subheading 1.2</h3>
. <h2>Subheading 2</h2>

44. <h1> to <h6>:

With the help of this tag, we can define the web page's heading. It also makes the heading as large and bold
by default. the <h1> headings are displayed in the largest font, whereas the <h6> headings are displayed in
the smallest font.

Syntax:

. <h1>Heading level 1</h1>

. <h2>Heading level 2</h2>
. <h3>Heading level 3</h3>
. <h4>Heading level 4</h4>
. <h5>Heading level 5</h5>
. <h6>Heading level 6</h6>

45. <hr>:

With the help of this tag, we can divide the web page. It stands for horizontal rule or theme break.
Syntax:

. <hr>

46. <html>:

With the help of this tag, all other elements are contained by it. It is also known as the root of the HTML
element.

Syntax:

. <!DOCTYPE html>
. <html>
. 
. </html>

47. <i>:

With the help of this tag, we can make any content italicized. It Highlights an important term, phrase, or
technical term.

Syntax:

. <i>Italicized Text</i>

48. <iframe>:

With the help of this tag, we can embed another HTML page into the current webpage.

Syntax:

. <iframe src="url"></iframe>

49. <img>:

With the help of this tag, we can embed an image into the current web page. It links an image to the image
without directly inserting it into the web page.

Syntax:

. <img src="image-url" alt="alternative-text">

50. <input>

With the help of this tag, we can enable interactive control in the form. It also depends on the various fields
of the attribute type.

Syntax:

. <input type="input-type" name="input-name" value="default-value">

51. <ins>:

With the help of this tag, we can specify the block of the inserted text. It also signifies that a particular range
of text has been added to the document.

Syntax:

. <ins>Inserted Text</ins>

52. <kbd>:

With the help of this tag, we can refer to the textual part of the inline text that represents the user's
keyboard, voice, or any other text input device.

Syntax:

. <kbd>Keyboard Input</kbd>

53. <label>:

With the help of this tag, we can improve the usability for mouse users, i.e., clicking on the label will toggle
the control.

Syntax:

. <label for="input-id">Label Text</label>

54. <legend>:

With the help of this tag, we can define the title for the child's content. Legends are the parent element of all
the child elements. We can define these elements with the help of <fieldset>.

Syntax:

. <fieldset>
. <legend>Fieldset Caption</legend>
. 
. </fieldset>

55. <li>:

With the help of this tag, we can represent the list of items on the web page. It contains an ordered list (an
unordered or a menu) as a parent element.

Syntax:

. <ul>
. <li>List Item 1</li>
. <li>List Item 2</li>
. <li>List Item 3</li>
. </ul>
56. <link>:

With the help of this tag, we can link external resources to the current webpage.

Syntax:

. <link rel="stylesheet" href="[Link]">

57. <main>:

With the help of this tag, we can make an ordinary element the most important element. We have to write
this tag inside the <body> tag.

Syntax:

. <main>
. 
. </main>

58. <map>:

With the help of this tag, we can define the map image. The image map also has a clickable area.

Syntax:

. <map name="map-name">
. 
. </map>

59. <mark>:

With the help of this tag, we can represent the text as highlighted, which will be used for reference or
notation purposes. Based on the importance of the content, it highlighted the text.

Syntax:

. <mark>Highlighted Text</mark>

60. <meta>:

With the help of this tag, we can represent the document's metadata. The metadata contains page
description, keywords, copyright, the language used, and the author.

Syntax:

. <meta name="metadata-name" content="metadata-value">

61. <meter>:

With the help of this tag, we can represent the Measurements within a given range or fractional values. It is
also known as the gauge.
Syntax:

. <meter value="current-value" min="minimum-value" max="maximum-value">Fallback Content</

meter>

62. <nav>:

With the help of this tag, we can represent the section of navigational links in a document. Some examples of
nav tags are Menus, tables of contents, indexes, etc.

Syntax:

. <nav>
. 
. </nav>

63. <noscript>:

With the help of this, we can provide an alternative script when the user's browser does not support the
particular script. It also works whenever the user's browser does not support client-side scripting or does not
support any scripting language.

Syntax:

. <noscript>
. 
. </noscript>

64. <object>:

With the help of this tag, we can display multimedia like audio, videos, images, PDFs, and Flash on web
pages.

Syntax:

. <object data="resource-url"></object>

65. <ol>:

This tag is used for the creation of the ordered list. The ordered list can be numerical or alphabetical. Inside
the <ol> tag, we can create the list using the <li> tag. It will then follow the order.

Syntax:

. <ol>
. <li>First Item</li>
. <li>Second Item</li>
. <li>Third Item</li>
. </ol>
66. <optgroup>:

This tag is used in the creation of the drop-down list. With the help of this tag, we can define the group of
options.

Syntax:

. <select>
. <optgroup label="Group Label">
. <option value="option1">Option 1</option>
. <option value="option2">Option 2</option>
. 
. </optgroup>
. 
. </select>

67. <option>:

With the help of this tag, we can define the option in the drop-down list by using the <select> tag.

Syntax:

. <select>
. <option value="option-value">Option Text</option>
. 
. </select>

68. <output>:

With the help of this tag, we can create the container for the element that injects the result of the calculation.

Syntax:

. <output for="input-id"></output>

69. :

With the help of this tag, we can define the paragraph tag. With the help of a paragraph tag, we can
represent the visual media as blocks of text separated from adjacent blocks by blank lines or first-line
indentation.

Syntax:

. Paragraph text goes here.

70. <param>:

With the help of this tag, we can define the parameter for an object. With the help of this, we can pass the
parameter for another embedded object.

Syntax:
. <object>
. <param name="param-name" value="param-value">
. </object>

71. <picture>:

With the help of this tag, we can provide flexibility to the web page by specifying the image. It also contains
tags like <source> and <img>.

Syntax:

. <picture>
. <source srcset="[Link]" media="media-query">
. <source srcset="[Link]" media="media-query">
. <img src="[Link]" alt="Fallback Image">
. </picture>

72. <pre>:

With the help of this tag, we can declare the block of pre-formatted text on the web page the pre-formatted
character, such as spaces, line breaks, tabs, etc.

Syntax:

. <pre>
. The pre-formatted text goes here.
. </pre>

73. <progress>:

With the help of this tag, we can display the progression of the task. With the help of this, the developer can
create a progress bar on their web page.

Syntax:

. <progress value="current-value" max="maximum-value"></progress>

74. <q>:

With the help of this tag, we can create an inline quotation on the web page. The text is contained inside the
quotation marks in most browsers today.

Syntax:

. Here is a <q>short quotation</q> within a sentence.

75. <rp>:

With the help of this tag, we can use it in the fallback parenthesis when a browser does not support ruby
annotations.
Syntax:

. <ruby>
. Base text <rp>(</rp><rt>Ruby text</rt><rp>)</rp>
. </ruby>

76. <rt>:

With the help of this tag, we can define the pronunciation of the character inside the ruby annotation.

Syntax:

. <ruby>
. Base text <rt>Ruby text</rt>
. </ruby>

77. <ruby>:

With the help of this, we can define the East Asian characters' pronunciations and represent small
annotations above, below, or next to the base text.

Syntax:

. <ruby>
. Base text <rt>Ruby text</rt>
. </ruby>

78. <s>:

With the help of this tag, we can render the text with a strikethrough or a line through it. We can use this tag
when Things are no longer accurate or relevant.

Syntax:

. <s>Struck-through text</s>

79. <samp>:

With the help of this tag, we can define the sample output of the computer program. The content of this tag
is displayed using a monospaced font in the browser.

Syntax:

. <samp>Sample text or code goes here</samp>

80. <script>:

With the help of this tag, we can insert the client-side scripting. It also enables the insertion of the script in
the HTML web page.

Syntax:
. <script src="[Link]"></script>

81. <section>:

With the help of this tag, we can create the header and footer or any other section on the web page.

Syntax:

. <section>
. 
. </section>

82. <select>:

With the help of this tag, we can define the list of options inside the list.

Syntax:

. <select>
. <option value="option-value">Option Text</option>
. 
. </select>

83. <small>:

With the help of this tag, we can reduce the font size by one size smaller than its base size, for instance, from
large to small.

Syntax:

. <small>Small text goes here</small>

84. <source>

With the help of this tag, we can link multiple media resources like <audio> and <video>,

Syntax:

. <source src="media-file.mp4" type="video/mp4">

85. <strong>

With the help of this tag, we can define the content as very important. The browser will display that element
in bold.

Syntax:

. <strong>Emphasized text</strong>
86. <span>:

It is the most generic element in the HTML. We can apply the style by grouping the elements.

Syntax:

. <span>Text or content goes here</span>

87. <style>:

We can provide the style information for the document with the help of this tag.

Syntax:

. <style>
. CSS rules go here
. </style>

88. <sub>:

With the help of this tag, we can display the subscript element only for typographical reasons.

Syntax:

. <sub>Subscript text</sub>

89. <summary>:

With the help of this tag, we can create a box with the help of <details> element that contains the summary,
caption, or legend. When we click on the summary button, it performs the open/closed state of the parent
*details> element.

Syntax:

. <details>
. <summary>Summary text</summary>
. 
. </details>

90. <sup>:

With the help of this tag, we can display any text as the superscript of the inline element.

Syntax:

. <sup>Superscript text</sup>

91. <svg>:
With the help of this tag, we can embed the SVG graphs into the web page. Also, we can define the vector
graphics in an XML format with the help of this tag.

Syntax:

. <svg>
. 
. </svg>

92. <table>:

With the help of this tag, we can define the data in a tabular format in HTML. It will create a two-dimensional
table that has some rows and columns.

Syntax:

. <table>
. 
. </table>

93. <tbody>:

With the help of this tag, we can encapsulate the table's rows associated with the table body.

Syntax:

. <table>
. <tbody>
. 
. </tbody>
. </table>

94. <td>:

With the help of this tag, we can define the table's cell. A table row may consist of more than one <td>
element. The default alignment is left in this element.

Syntax:

. <tr>
. <td>Table cell content</td>
. </tr>
HTML Attributes
Last Updated : 17 Mar 2025
HTML attributes are keywords found in an opening
element tag to give more details about that particular
element. CSS is needed to manage how HTML elements
behave, look and function. Every attribute takes the form
name="value" and should always be put inside the start
tag. Nearly every HTML element can use attributes to let
us style, link, add tooltips or include images and videos.

Every attribute increases the accuracy of both the

interpretation and presentation of the element by the
browser. While the names and values in attributes can
differ greatly based on case, it is recommended by W3C
that you use small letters. Several attributes can be put on
one tag by inserting a space between them.

Syntax

<element attribute_name="value">content</
element>
Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is Style attribute</h1>
<p style="height: 50px; color: blue">It will add style
property in element</p>
<p style="color: red">It will change the colour of co
ntent</p>
</body>
</html>
Output:

Explanation:

<p style="height: 50px; color: blue">It will add style p

roperty in element</p>
We have marked the paragraphs above by giving them
style attributes using tags. The style attribute is utilised to
set CSS styles on any HTML tag. It adds a height of 50px
and turns the paragraph colour into blue.

<p style="color: red">It will change the color of conte

nt</p>
We have added a style attribute to the paragraph again to
change its colour to red.

Note: There are some commonly used

attributes are given below, and the complete
list and explanation of all attributes are given
in HTML attributes List.

The Title Attribute

The title attribute is used as text tooltip in most of the

browsers. It display its text when user move the cursor
over a link or any text. You can use it with any text or link
to show the description about that link or text. In our
example, we are taking this with paragraph tag and
heading tag.

Syntax

With <h1> tag:

<h1 title="This is heading tag">Example of title attrib

ute</h1>
With <p> tag:

<p title="This is paragraph tag">Move the cursor over

the heading and paragraph, and you will see a descript
ion as a tooltip</p>
Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1 title="This is heading tag">Example of title attri

bute</h1>
<p title="This is paragraph tag">Move the cursor ove
r the heading and paragraph, and you will see a descri
ption as a tooltip </p>

</body>
</html>
Output:
Explanation

The title attribute is commonly used to display additional

info via tooltips, enhancing user guidance without
cluttering the interface.

The href Attribute

The href attribute is the main attribute of <a> anchor tag.

This attribute gives the link address which is specified in
that link. The href attribute provides the hyperlink, and if
you leave the link address blank, the page will not be
redirected.

Syntax

With link address:

<a href="[Link]
anchor">This is a link</a>
Without link address:

<a href="">This is a link</a>

Output (description)

Clickable text that reloads or stays on

the current page.
Explanation

The href attribute is used for making links. A missing value

for the link will stop a redirect from occurring.

src, width, and height Attributes

The src attribute is one of the important and required

attributes of the <img> element. It is the source for the
image which is required to display on the browser. This
attribute can contain images in the same directory or
another directory. The image name or source should be
correct. Else the browser will not display the image.

The size and alternate information of an image are given

by width, height and alt.

Example 1

<img src="[Link]" height="400" width="60

0">
Note: The above example also has height and
width attributes, which define the height and
width of an image on the web page.
Output (description)

A 400x600 image of a white peacock with

alternate text for screen readers or
broken links.
Explanation

The src marks where the image comes from, width, and
height let you give it the right size and using alt provides a
text with an alternative to show if the image doesn't
display correctly.

Example 2 (Absolute URL)

<img src="[Link] al
t="TPointTech banner logo">
Output:

Image from the specified external source

(TPointTech in this case)

The alt Attribute

You use the alt attribute to give an image alternative text

if it does not load correctly. A website needs to be easy to
navigate for everyone and to be effective with SEO.

Example

<img src="img_typo.jpg" alt="Girl with a jacket">

Output (description)

If the image doesn't load, the text "Girl

with a jacket" is displayed.
Explanation

If an image isn't available, the alt text will be read by a

screen reader and shown instead. It allows content to be
understood and used by everyone.

Quotes in HTML Attributes

It is possible to include single as well as double quotes

around the attribute values. We suggest that quoting your
data as always ensures consistency.

Example with Double Quotes

<a href="[Link] A link to HTM

L. </a>
Example with Single Quotes

<a href='[Link] A link to HTML

. </a>
Example Without Quotes (Not Recommended)

<a href=[Link] A link to HTML.

</a>
Output (description)

All render correctly, but the last one

may break if the value contains spaces.

The lang Attribute

The language of the document is set by the lang attribute

within the <html> tag for easier processing by both
search engines and tools for those with disabilities.

Example

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Output (description)

Page with metadata indicating the

language is U.S. English.

Conclusion

Element attributes improve how web content operates,

looks and can be used by everyone. They enable
developers to use links (href), pictures (src, alt, width,
height), style elements (style), add tooltips (title) and say
what language the content uses (lang). Lowercase names
and quotation marks for values aren't compulsory;
however, following these as best practices helps achieve
code consistency. You need to use attributes well to
ensure your web pages are organised, easy to access and
attractive.

Next TopicHTML Elements

← prevnext →

 HTML Id
 HTML Iframes
 HTML Unordered List
 HTML Lists
 HTML JavaScript
 HTML Anchor
 HTML Symbols
 HTML Paragraph
 What is HTML
 HTML Head

Subscribe to Tpoint Tech

We request you to subscribe our newsletter for upcoming updates.

Advertisement
Advertisement
Advertisement
Advertisement
Advertisement
Advertisement

We deliver comprehensive tutorials, interview question-answers, MCQs, study materials on leading programming languages and web
technologies like Data Science, MEAN/MERN full stack development, Python, Java, C++, C, HTML, React, Angular, PHP and much more
to support your learning and career growth.

Contact info

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@[Link]

+91-9599086977

. <p> Hello world!!! </p>

Example

. <!DOCTYPE html>
. <html>
. <head>
. <title>WebPage</title>
. </head>
. <body>
. <h1>This is my first web page</h1>
. <h2> How it looks?</h2>
. <p>It looks Nice!!!!!</p>
. </body>
. </html>
Explanation

All the content written between body elements is visible on the web page.

Void element

Void elements are HTML elements that do not require a closing tag or content, such as <br> or <img>. Such
elements are known as Void elements or empty elements. These elements are also referred to as unpaired
tags. Some void elements include:

o <br> - Inserts a line break

o <hr> - Adds a horizontal rule
o <input>, <link>, and <img> - Provide specific functionalities without the need for content
Example

. <p>This is a <br> paragraph with a line break.</p>

Note: Even though browsers can close missing tags, this can cause various problems
with page layouts. Always finish off every non-void element with an end tag.

Nested HTML Elements

HTML can be nested, which means an element can contain another element. This means that HTML makes it
possible for elements to be placed within other elements. Creating a hierarchy makes it possible to sort
things into order.

Example

. <!DOCTYPE html>
. <html>
. <head>
. <title>HTML Elements</title>
. </head>
. <body>
. <h1>GeeksforGeeks</h1>
. <p>Computer science portal</p>
. </body>
. </html>
Explanation

The <html> element is the root of an HTML document and contains all other elements, including <head> and
<body>. The document's elements include an enclosure of <head> and <body> inside the <html>. Both the
<h1> and <p> elements are inside <body>. Thanks to structured nesting, browsers will correctly display the
page.

Block-level and Inline HTML elements

For the default display and styling purpose in HTML, all the elements are divided into two categories:

1. Block-level Element
2. Inline Element

Block-level Element

HTML pages are built from the basic elements called block-level elements. They arrange the main content on
the page by breaking it into helpful and organized sections. Usually, each block element sits alone on a new
line and runs the entire width of the page, no matter how wide or narrow the content is. It results in areas on
your site that are clearly arranged and visually attractive.

They are flexible, as they are able to include different types of elements inside them. As a result, developers
can place related content together inside small containers, for example, <div>, <section>, or <article>, and
format them with inline elements.

Following are the block-level elements in HTML:

Element Description

<address> Gives information on

how to contact the
closest article or
document body.

<article> Makes up a standalone

piece of work, such as a
blog post or article about
news.

<aside> Shows information that

is indirectly connected to
the central content (like
in sidebars).

<blockquote> States the text that you

have taken from a
different source.

<canvas> Makes it possible to

create graphics on the
go using scripting
technologies, for
example, JavaScript.

<dd> Details or explains what

a term means in a
description list.

<div> The <div> tag is a block-

level container element
used to group and style
content using CSS. It is
not inherently empty.

<dl> Details how the

description list works,
which is accompanied by
<dt> and <dd>.

<dt> Puts a term or name into

a description list.

<fieldset> It groups elements into a

group and encloses
them with a box.

<figcaption> Gives information about

the contents of a
<figure> in the form of a
caption.

<figure> Creates a space for

pictures, diagrams, or
other items, which can
have a caption when
necessary.

<footer> Adds a footer to a

section or page that
usually has the author's
information or copyright
details.

<form> Outlines an HTML form

that is used to get user
input.

<h1>-<h6> Headings should be set

from level 1 for the most
significant points up to
level 6 for the least
significant ones.

<header> Shows short initial

information, usually in
the form of navigational
tools.

<hr> Includes a horizontal rule

or thematic break in
what you're writing.

<li> Gives the markup for a

list item when the list is
being used with <ul>,
<ol>, or <menu>.

<main> Explains the main

subject of the document
and what makes it
special and central to
the website.

<nav> Marks the section of

links that can be used to
navigate the website.

<noscript> Provides alternative

content for people who
aren't using JavaScript.

<ol> Categories data in a way

that lists things in order.

<output> Refers to the end-

product of a
computation or action
taken by the user.
<p> Describes how to set up
a single paragraph of
text.

<pre> It includes information

about preformatted text,
which is always
displayed in a fixed-
width font.

<section> Makes up a single group

of similar content (for
example, chapters or
tabs).

<table> Creates a table for

showing information in
rows and columns.

<tfoot> All the groups are

organized together in a
table with footer
content.

<ul> Creates a group of items

that are not in any order
(bulleted list).

<video> Insert video segments in

the document.

Note: All these elements are described in later chapters.

Example

. <!DOCTYPE html>
. <html>
. <head>
. </head>
. <body>
. <div style="background-color: lightblue">This is first div</div>
. <div style="background-color: lightgreen">This is second div</div>
. <p style="background-color: pink">This is a block level element</p>
. </body>
. </html>
Output:

Explanation

In the above example, we have used the <div> tag, which defines a section in a web page and takes the full
width of the page. Also, we have used the style attribute, which is used to style the HTML content, and the
background color shows that it's a block-level element.
Inline elements

Without disturbing how content is displayed, inline elements help you highlight and modify different parts of
your text. Like how an inline element appears next to its surrounding words and only takes as much space as
needed, unlike block-level elements that have a new line. A reason to do this is to add styles, links, or
interactivity inside paragraphs or element types that use blocks.

They are applied along with block-level elements to make some parts of a web page stand out. For instance,
elements such as <a>, <strong>, <em>, and <span> can be applied inside a paragraph to generate links,
emphasize parts, or add styling without changing the rest of the text's structure. Because you have so much
control, you can make your HTML documents more informative.

Following are the inline elements in HTML:

Element Description

<a> Allows you to give a

hyperlink to another
page, file, or location.

<abbr> It is an example of either

an abbreviation or
acronym, and it may
come with a full
explanation.

<acronym> (Outdated) Meant for

acronyms but is now
replaced with <abbr>.

<b> Bold text is simply used

to help the text stand
out and become
noticeable.

<bdo> Changes the current

direction of text writing.

<big> (Deprecated) Makes the

font bigger on all text in
the document.

<br> Puts a single-line break

into the text.

<button> Represents a button that

users can click on.

<cite> It describes the title of

each reading, e.g., book,
article, or play, which
should be described in
the citation.

<code> Shows the source code

in a block using a
monospaced font.

<dfn> Shows the main meaning

of a term.

<em> Stresses the highlighted

words by making them
appear in italics.

<i> Marks the text with

italics to emphasize a
special voice or piece of
vocabulary.
<img> Adds an image within
the document.

<input> Makes an element where

users can interact (for
example, a textbox,
radio, or checkbox).

<kbd> Here, user input is

presented like this, in
monospaced text.

<label> Gives an <input>

element a certain label.

<map> Describes an image map

employed with <area>
tags to form hotspots on
a picture.

<object> Includes elements like

images, sound, videos,
or various applications.

<q> Meant for short

quotations that are
included in the text.

<samp> Sample text shows the

output from a running
computer software.

<script> It has code written

in JavaScript or includes
a reference to an
external JavaScript code
file.

<select> Shows how to set up a

drop-down list inside a
form.

<small> Reduces the size of the

text that appears on the
screen.

<span> An element to store

inline content and
generally used along
with CSS.

<strong> Reflects high

significance and is
displayed in bold style.

<sub> It appears as text below

the usual line.

<sup> It shows text in a

position above the
normal line.

<textarea> Gives users the ability to

fill a form across
multiple text fields.

<time> Holds a specialized time

or a date and time value.

<tt> (Deprecated) An
alternative way to write
text in a monospaced
style.

<var> In a mathematical or
programming
expression, it
determines the meaning
of a variable.

Example

. <!DOCTYPE html>
. <html>
. <head>
. </head>
. <body>
. <a href="[Link] on link</a>
. <span style="background-color: lightblue">this is inline element</span>
. <p>This will take the width of the text only</p>
. </body>
. </html>
Output:

Following is the list of some of the main elements used in HTML:

Start tag Content End tag Descripti

<h1> ..... These are </h1>.....</ These

. <h6> headings h6> elements
of HTML are used
to provide
the
headings
of page.

<p> This is the </p> This

paragraph element is
used to
display a
content in
form of
paragraph.

<div> This is div </div> This

section element is
used to
provide a
section in
web page.

<br> N/A This

element is
used to
provide a
line break.
(void
element)

<hr> N/A This

element is
used to
provide a
horizontal
line. (void
element)

Best Practices

o Be sure to close all the tags that have data inside them. Close tags on your own rather than
leaving it to any automatic correction from the browser.
o Tags should always be in lowercase. The lowercase letters in HTML make the code look better
and are compatible with XHTML.
o Pay attention to nesting. An incorrectly built layout can ruin your web pages and make them
unrenderable.

Conclusion

HTML offers numerous elements that help organize and show content online. Parts of the page such as
<div>, <section>, <article>, and headings <h1> to <h6> set its structure and levels, and <p>, <ul>,
<table>, and <form> help group text and interactive stuff. Without disturbing the text's overall rhythm,
these elements such as <a>, <span>, <img>, <strong>, and <em> are inserted inside these blocks.

Tags such as <br>, <hr>, and <input> take care of specific tasks on their own, so they do not require a
closing tag. When combined, these features are the essential parts that help developers make ordered,
useful, and accessible web pages using HTML. It is important to know how to work with block-level and inline
elements to design responsive and well-formed websites.

HTML Formatting
Last Updated : 17 Mar 2025
HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format
text without using CSS. There are many formatting tags in HTML. These tags are used to make text bold,
italicized, or underlined. There are almost 14 options available that how text appears in HTML and XHTML.

In HTML the formatting tags are divided into two categories:

o Physical tag: These tags are used to provide the visual appearance to the text.
o Logical tag: These tags are used to add some logical or semantic value to the text.

NOTE: There are some physical and logical tags which may give same visual
appearance, but they will be different in semantics.
Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML formatting text.

Element name Description

<b> This is a physical tag,

which is used to bold the
text written between it.
<strong> This is a logical tag,
which tells the browser
that the text is
important.

<i> This is a physical tag

which is used to make
text italic.

<em> This is a logical tag

which is used to display
content in italic.

<mark> This tag is used to

highlight text.

<u> This tag is used to

underline text written
between it.

<tt> This tag is used to

appear a text in
teletype. (not supported
in HTML5)

<strike> This tag is used to draw

a strikethrough on a
section of text. (Not
supported in HTML5)

<sup> It displays the content

slightly above the
normal line.

<sub> It displays the content

slightly below the normal
line.

<del> This tag is used to

display the deleted
content.

<ins> This tag displays the

content which is added

<big> This tag is used to

increase the font size by
one conventional unit.

<small> This tag is used to

decrease the font size by
one unit from base font
size.

1) Bold Text

HTML<b> and <strong> formatting elements

The HTML <b> element is a physical tag which display text in bold font, without any logical importance. If
you write anything within <b>............</b> element, is shown in bold letters.

See this example:

. <p> <b>Write Your First Paragraph in bold text.</b></p>

Test it Now
Output:
Write Your First Paragraph in bold text.

The HTML <strong> tag is a logical tag, which displays the content in bold font and informs the browser
about its logical importance. If you write anything between <strong>???????. </strong>, is shown important
text.

See this example:

. <p><strong>This is an important content</strong>, and this is normal content</p>

Test it Now
Output:

This is an important content, and this is normal content

Example

. <!DOCTYPE html>
. <html>
. <head>
. <title>formatting elements</title>
. </head>
. <body>
. <h1>Explanation of formatting element</h1>
. <p><strong>This is an important content</strong>, and this is normal content</p>
. </body>
. </html>
Test it Now

2) Italic Text

HTML <i> and <em> formatting elements

The HTML <i> element is physical element, which display the enclosed content in italic font, without any
added importance. If you write anything within <i>............</i> element, is shown in italic letters.

See this example:

. <p> <i>Write Your First Paragraph in italic text.</i></p>

Test it Now
Output:

Write Your First Paragraph in italic text.

The HTML <em> tag is a logical element, which will display the enclosed content in italic font, with added
semantics importance.

See this example:

. <p><em>This is an important content</em>, which displayed in italic font.</p>

Test it Now
Output:
This is an important content, which displayed in italic font.

. <!DOCTYPE html>
. <html>
. <head>
. <title>formatting elements</title>
. </head>
. <body>
. <h1>Explanation of italic formatting element</h1>
. <p><em>This is an important content</em>, which displayed in italic font.</p>
. </body>
. </html>
Test it Now

3) HTML Marked formatting

If you want to mark or highlight a text, you should write the content within <mark>.........</mark>.

See this example:

. <h2> I want to put a <mark> Mark</mark> on your face</h2>

Test it Now
Output:

I want to put a Mark on your face

4) Underlined Text

If you write anything within <u>.........</u> element, is shown in underlined text.

See this example:

. <p> <u>Write Your First Paragraph in underlined text.</u></p>

Test it Now
Output:

Write Your First Paragraph in underlined text.

5) Strike Text

Anything written within <strike>.......................</strike> element is displayed with strikethrough. It is a thin

line which cross the statement.

See this example:

. <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>

Test it Now
Output:

Write Your First Paragraph with strikethrough.

6) Monospaced Font

If you want that each letter has the same width then you should write the content within <tt>.............</tt>
element.

Note: We know that most of the fonts are known as variable-width fonts because different letters have
different width. (for example: 'w' is wider than 'i'). Monospaced Font provides similar space among every
letter.

See this example:

. <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>

Test it Now
Output:

Hello Write Your First Paragraph in monospaced font.

7) Superscript Text

If you put the content within <sup>..............</sup> element, is shown in superscript; means it is displayed
half a character's height above the other characters.

See this example:

. <p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>

Test it Now
Output:

Hello Write Your First Paragraph in superscript.

8) Subscript Text

If you put the content within <sub>..............</sub> element, is shown in subscript ; means it is displayed
half a character's height below the other characters.

See this example:

. <p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>

Test it Now
Output:

Hello Write Your First Paragraph in subscript.

9) Deleted Text

Anything that puts within <del>..........</del> is displayed as deleted text.

See this example:

. <p>Hello <del>Delete your first paragraph.</del></p>

Test it Now
Output:

Hello

10) Inserted Text

Anything that puts within <ins>..........</ins> is displayed as inserted text.

See this example:

. <p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>

Test it Now
Output:

Delete your first [Link] another paragraph.

11) Larger Text

If you want to put your font size larger than the rest of the text then put the content within
<big>.........</big>. It increase one font size larger than the previous one.

See this example:

. <p>Hello <big>Write the paragraph in larger font.</big></p>

Test it Now
Output:

Hello Write the paragraph in larger font.

12) Smaller Text

If you want to put your font size smaller than the rest of the text then put the content within
<small>.........</small>tag. It reduces one font size than the previous one.

See this example:

. <p>Hello <small>Write the paragraph in smaller font.</small></p>

Test it Now
Output:

Hello Write the paragraph in smaller font.

HTML Heading
Last Updated : 17 Mar 2025
The HTML heading or the <h> tag marks the main or subtitle of each webpage part. It shows the structure of
the content to users and to search engines by highlighting what is main and subordinate on the page.

When text is put inside heading tags such as <h1>...</h1>, it is shown in bold by browsers, and its font size
is set according to the level of the heading. There is less text size in each heading, beginning with <h1> and
decreasing through h2, h3, h4, h5, and h6. HTML headings assist search engines in finding out how a page is
organized and stored.

Note: The h1 heading tag should display the main keyword of the whole content of a
webpage.

Six Levels of HTML Headings

HTML supports six levels of headings:

Example

. <h1>Heading no. 1</h1>

. <h2>Heading no. 2</h2>
. <h3>Heading no. 3</h3>
. <h4>Heading no. 4</h4>
. <h5>Heading no. 5</h5>
. <h6>Heading no. 6</h6>
Different levels in the hierarchy symbolize areas of the document.

o <h1> - The unique main heading for the page

o <h2> - Major sections
o <h3> - Subsections under <h2>
o <h4> - Sub-subsections under <h3>
o <h5> - Less significant sections
o <h6> - Headings that are considered least important

Note: Heading elements (h1....h6) should be used for headings only. They should not
be used just to make text bold or big.
HTML headings can also be used with nested elements. Following are different codes to display the way to
use heading elements.

Example
. <!DOCTYPE html>
. <html>
. <head>
. <title>Heading elements</title>
. </head>
. <body>
. <h1>This is main heading of page. </h1>
. <p>h1 is the most important heading, which is used to display the keyword of page </p>
. <h2>This is first sub-heading</h2>
. <p>h2 describes the first sub heading of page. </p>
. <h3>This is Second sub-heading</h3>
. <p>h3 describes the second sub heading of page.</p>
. <p>We can use h1 to h6 tag to use the different sub-heading with their paragraphs if
. required.
. </p>
. </body>
. </html>
Output:

This is main heading of page.

h1 is the most important heading, which is used to display the keyword of
page
This is first sub-heading
h2 describes the first sub heading of page.
This is Second sub-heading
h3 describes the second sub heading of page
We can use h1 to h6 tag to use the different sub-heading with their
paragraphs if required.

Supporting Browsers

Elem Chro Fire Op Saf

ent
me IE fox era ari

<h1 Yes Yes Yes Yes Yes

> to
<h6
>
Importance of using headings

For SEO (Search Engine Optimization): When SEO is used, headings help search engines learn about a
page's structure and content.

For Users: A sequenced hierarchy of headings makes it simpler and faster for users to go through a website
and navigate it.

For Structure: Headings make it easier for people using accessibility tools to access the information, thanks
to their added structure.

Note: Headings should not just be used to make your text bold or big. Don't use them
as decoration if they are meant to support the structure.

Using Heading tags in a document

. <!DOCTYPE html>
. <html>
. <head>
. <title>Heading elements</title>
. </head>
. <body>
. <h1>This is the main heading of the page</h1>
. <p><code>h1</code> is the most important heading, often used to highlight the page's main keyw
ord.</p>
.
. <h2>This is the first subheading</h2>
. <p><code>h2</code> divides content into major sections.</p>
.
. <h3>This is a second-level subheading</h3>
. <p><code>h3</code> is used for subsections under <code>h2</code>.</p>
.
. <p>Use <code><h1></code> to <code><h6></code> tags as needed to reflect your con
tent structure.</p>
. </body>
. </html>

Styling headings with CSS

Though headings come in standard sizes, you have the option to make them larger or smaller using the style
attribute or CSS.

. <h1 style="font-size: 60px;">Custom H1 Size</h1>

(OR)

. <style>
. h1, h2, h3, h4, h5, h6 {
. font-family: Verdana;
. }
. h1 {
. font-size: 32px;
. color: red;
. }
. h2 {
. font-size: 30px;
. color: green;
. }
. </style>

Enhancing headings with HTML tags

You can add other HTML tags within heading tags to make the content both more readable and more
meaningful.

Highlight Text with <mark>:

. <h1>Important <mark>Notice</mark></h1>
Add Links with <a>:

. <h2><a href="[Link] Section</a></h2>

Emphasize with <em> and <strong>:

. <h3>This is <em>emphasized</em> and <strong>important</strong></h3>

Use Superscript and Subscript:

. <h4>The 10<sup>th</sup> Edition</h4>

. <h5>Formula: H<sub>2</sub>O</h5>
Tooltips with <abbr>:

. <h2><abbr title="Hypertext Markup Language">HTML</abbr> Overview</h2>

Insert Line Breaks with <br>:

. <h3>This is Line 1<br>This is Line 2</h3>

Best practices for HTML headings

You should use HTML headings in the best way possible to guarantee that your content is easy to read and
understand by all users. Put no more than one <h1> tag on each page so everyone - people and search
engines - can easily see what the page is about. Titles in a document need to have a logical sequence. Make
sure to go from <h1> to <h2>, and then add <h3>, not skipping those levels. Because of this, the document
becomes more organized and easier to read.

Headings ought to briefly explain what you are writing about next. Heading tags should mainly be used to
arrange sections of the web page, not just for style. Creating headings randomly or applying too many of
them can be confusing for people using your site and may also reduce your ranking in search engines. Both
readability and meaning are improved when the heading structure is kept in mind.

Conclusion
HTML heading tags are important for arranging web content visually and according to meaning. Proper usage
of <h1> to <h6> tags allows developers to display content logically and improve the website for users,
reduce barriers to accessibility, and raise its chances with search engines. It helps to arrange your ideas in a
way that makes sense, use headings to explain sections well, and not use them only for styling.

HTML Paragraph
Last Updated : 17 Mar 2025
HTML paragraphs are tags that are necessary for the organization and presentation of the text on a webpage
and are defined with the <p> tag. They enable developers to break content into senseful readable blocks
that enhance clarity and arrangement. As block-level elements, paragraphs already automatically begin on a
new line and, by default, add space above and below.

Syntax

. <p>This is a paragraph.</p>
The content between the tags, which is supposed to be a paragraph, is enclosed in the <p> element. It is a
paired tag, which implies that it has opening <p> and closing </p> tags.

Note: If we are using various <p> tags in one HTML file, then the browser
automatically adds a single blank line between the two paragraphs.
Example

. <p>This is first paragraph.</p>

. <p>This is second paragraph.</p>
. <p>This is third paragraph.</p>
Output:

This is first paragraph.

This is second paragraph.

This is third paragraph.

Explanation

Every paragraph is started in a new line. The browser will automatically add vertical space between them,
making them visually different.

Space inside HTML Paragraph

If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line while displaying
the page. The browser counts number of spaces and lines as a single one.
Example

. <p>
. I am
. going to provide
. you a tutorial on HTML
. and hope that it will
. be very beneficial for you.
. </p>
. <p>
. Look, I put here a lot
. of spaces but I know, Browser will ignore it.
. </p>
. <p>
. You cannot determine the display of HTML</p>
. <p>because resized windows may create different result.
. </p>
Output:

I am going to provide you a tutorial on HTML and hope that it will be very
beneficial for you.
Look, I put here a lot of spaces but I know, Browser will ignore it.
You cannot determine the display of HTML
because resized windows may create different result.
As you can see, all the extra lines and unnecessary spaces are removed by the browser.

How to Use <br> and <hr> tag with paragraph?

An HTML <br> tag is used for line break and it can be used with paragraph elements. Following is the
example to show how to use <br> with <p> element.

Example using <br> tag

Example

. <!DOCTYPE html>
. <html>
. <head>
. </head>
. <body>
. <h2> Use of line break with paragraph tag</h2>
. <p><br>Papa and mama, and baby and Dot,
. <br>Willie and me?the whole of the lot
. <br>Of us all went over in Bimberlie's sleigh,
. <br>To grandmama's house on Christmas day.
. </p>
. </body>
. </html>
Output:

Use of line breaks with a paragraph tag

Papa and mama, and baby and Dot,

Willie and me?the whole of the lot
Of us all went over in Bimberlie's sleigh,
To grandmama's house on Christmas day.
An HTML <hr> tag is used to apply a horizontal line between two statements or two paragraphs. Following is
the example which is showing use of <hr> tag with paragraph.

Example using <hr> tag

Example

. <!DOCTYPE html>
. <html>
. <head>
. </head>
. <body>
. <h2> Example to show a horizontal line with paragraphs</h2>
. <p> An HTML hr tag draw a horizontal line and separate two paragraphs with that line <hr> it will
start a new paragraph.
. </p>
. </body>
. </html>
Output:

Example to show a horizontal line with paragraphs

An HTML hr tag draw a horizontal line and separate two paragraphs with that
line.
________________________________________
It will start a new paragraph.

<pre> Tag for Preformatted Text

We encode multiple spaces, line breaks and other formatting elements with the help of <pre> element.

Example

. <pre>
. My TPoint lies over the ocean.
. My TPoint lies over the sea.
. Oh, bring back my TPoint to me.
. </pre>
Output:

My TPoint lies over the ocean.

My TPoint lies over the sea.
Oh, bring back my TPoint to me.
Explanation

The <pre> tag preserves the literal layout of the text, spaces and line breaks. It works best with poetry, code
blocks, or any other content that needs to maintain a specific format.
Paragraph alignment (CSS recommended)

Text alignment defines the position of the content in the paragraph horizontally. In older versions of HTML,
the align attribute was used, but in modern HTML, this has been replaced with CSS to allow more flexibility
and to produce cleaner code.

Deprecated HTML Method

The older versions of HTML used the align attribute to specify the text alignment. But in HTML5, it is
deprecated.

Example

. <p align="center">Centered text</p>

Preferred CSS Method

The contemporary and suggested method of text alignment in a paragraph is by using inline CSS. You may
use left, right, centre or justify values.

Example

. <p style="text-align: center;">Centered text</p>

Embedding elements within paragraphs

Inline elements may be used within HTML paragraphs to add content. You may add formatting tags, links,
pictures or even highlight some words without destroying the paragraph structure.

Emphasis Tags

<em> italicizes text, while <strong> makes it bold. Such tags provide a semantic way of showing emphasis
or importance.

Example

. <p>This is a <em>paragraph</em> with <strong>emphasized</strong> text.</p>

Links

The anchor tag <a> into the paragraph incorporates a clickable link in the paragraph text.

Example

. <p>Visit <a href="[Link] website</a>.</p>

Images

The <img> tag may be used to insert images inline into paragraphs.

Example
. <p>Here is an image: <img src="[Link]" alt="Logo"></p>

Superscript and Subscript

<sub> renders subscript text (e.g., chemical formulas), while <sup> renders superscript text (e.g.,
exponents).

Example

. <p>H<sub>2</sub>O and 2<sup>3</sup> = 8</p>

Abbreviations

The <abbr> tag shows full text when hovered, making acronyms clearer to readers.

Example

. <p><abbr title="HyperText Markup Language">HTML</abbr> is used for web development.</p>

Citations

The <cite> tag indicates the title of a creative work, usually italicized.

Example

. <p>The novel <cite>War and Peace</cite> is a classic.</p>

Styling Paragraphs with CSS

CSS (Cascading Style Sheets) is applied to manage the presentation of HTML components. Paragraphs may
be formatted with inline styles, internal stylesheets, or external stylesheets to have a more presentable look
and ensure consistency.

Inline Styling

Applies styles directly to a paragraph, altering the paragraph colour and font size.

Example

. <p style="color: red; font-size: 20px;">Styled paragraph</p>

Internal CSS

Styles all paragraphs in the document with the same styling in the <style> block in the <head>.

Example

. <style>
. p{
. font-size: 18px;
. color: navy;
. }
. </style>

Using CSS Classes

The class attribute applies custom styles to particular paragraphs with CSS classes.

Example

. <style>
. .highlight {
. background-color: yellow;
. }
. </style>
. <p class="highlight">This paragraph is highlighted.</p>

Best practices

Nesting paragraphs should not be nested inside other paragraphs because HTML does not permit one <p>
tag to be contained within another. Paragraphs may consist of text or inline elements such as <span>, <a>
or <em>, but not block elements such as <div> or <table>. Also, avoid enclosing non-textual content that
includes images or forms in <p> tags. Rather, more suitable semantic tags should be used. To position and
arrange, use CSS rather than deprecated attributes such as align.

Supporting Browsers

Elem Chro Fire Op Saf

ent
me IE fox era ari

<p> Yes Yes Yes Yes Yes

Conclusion

HTML <p> tag is an essential device used to structure text information on a web page. Whether typing plain
text, inserting multimedia, or using styles, knowing the paragraph behaviour in HTML can make your content
organized, easy to read and pleasurable to the eye. Paragraphs can be even more powerful when used with
other tags such as <br> and <hr>, as well as CSS styling to produce clean and professional web layouts.

HTML Phrase Tag

Last Updated : 17 Mar 2025
The HTML phrase tags are special purpose tags that define the structural meaning of a block of text or the
semantics of text. Following is the list of phrase tags, some of which we have already discussed in HTML
formatting.

1. Text Abbreviation Tag

This tag is used to abbreviate a text. To abbreviate a text, write text between <abbr> and </abbr> tags.

Example

. &<!DOCTYPE html>
. <html lang="en">
. <head>
. <meta charset="UTF-8">
. <title>HTML Abbreviation Example</title>
. </head>
. <body>
. <p>
. An <abbr title="Hypertext Markup Language">HTML</abbr> language is used to create web pag
es.
. </p>
. </body>
. </html>
Output:

An HTML language is used to create web pages.

2. Marked Tag

The content written between <mark> and </mark> tag will show as a yellow mark on the browser. This tag
is used to highlight a particular text.

Example

. <p>This tag will <mark>highlight</mark> the text.</p>

Output:

This tag will highlight the text.

3. Strong Tag

This tag is used to display the important text of the content. The text written between <strong> and
</strong> will be displayed as important text.

Example

. <p>In HTML it is recommended to use <strong>lower-case</strong>, while writing a code. </p>

Output:

In HTML it is recommended to use lowercase, while writing a code.

4. Emphasized Tag

This tag is used to emphasize the text and display the text in italic form. The text written between <em> and
</em> tags will italicized the text.

Example

. <p>HTML is an <em>easy </em>to learn language.</p>

Output:

HTML is an easy to learn language.

5. Definition Tag

When you use the <dfn> and </dfn> tags, it allows you to specify the keyword of the content. Following is an
example to show how to define an element.

Example

. <p><dfn>HTML </dfn> is a markup language. </p>

Output:

HTML is a markup language.

6. Quoting Tag

The HTML <blockquote> element shows that the enclosed content is quoted from another source. The
Source URL can be given using the cite attribute, and text representation of the source can be displayed
using <cite> ..... </cite>element.

Example

. <blockquote cite="[Link] first step toward success i

s taken when you refuse to be a captive of the environment in which you first find yourself.</p></
blockquote>
. <cite>-Mark Caine</cite>
Output:

The first step toward success is taken when you refuse to be a captive of the
environment in which you first find yourself.
-Mark Caine
7. Short Quotations

An HTML <q> ....... </q> element defines a short quotation. If you will put any content between <q> .......
</q>, then it will enclose the text in double quotes.

Example

. <p>Steve Jobs said: <q>If You Are Working On Something That You Really Care About, You Don't Hav
e To Be Pushed. The Vision Pulls You.</q>?</p>
Output:

Steve Jobs said: If You Are Working On Something That You Really Care About,
You Don't Have To Be Pushed. The Vision Pulls You.?

8. Code Tags

The HTML <code> </code> element is used to display the part of computer code. It will display the content
in monospaced font.

Example

. <p>First Java program</p>

. <p><code>class Simple{ public static void main(String args[]){
. [Link]("Hello Java"); }} </code>
. </p>

9. Keyboard Tag

In HTML, the keyboard tag <kbd> indicates that a section of content is a user input from the keyboard.

Example

. <p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + t<kbd></kbd> to restore page on chrom

e.</p>
Output:

Please press Ctrl + Shift + t to restore page on chrome.

10. Address Tag

An HTML <address> tag defines the contact information of the author of the content. The content is written
between <address> and </address> tags, and then it will be displayed in italic font.

Example

. <address> You can ask your queries by contact us on <a href="">example123@[Link]</

a>
. <br> You can also visit at: <br>58 S. Garfield Street. Villa Rica, GA 30187.
. </address>
Output:

You can ask your queries by contacting us at prachet@[Link]

You can also visit us at:
58 S. Garfield Street, Villa Rica, GA 30187.

Conclusion

HTML phrase tags are very important in providing semantic luster and precision to web content. In contrast to
the visual formatting tags, phrase tags provide both the browser and the assistive technologies, e.g., screen
readers, with the intended meaning and context of the text. Not only does this enhance accessibility to users
with disabilities, but it also makes the search engines comprehend the arrangement and importance of the
content, thus boosting search engine optimization (SEO) performance.

Such tags allow adding extra semantics to the document, highlighting significance, marking definitions, or
indicating abbreviations. Others are useful in the proper formatting of quoted or referenced work. In the
meantime, the <code>, <kbd> and <address> tags address technical and contact data in a formal and
organized way.

HTML Lists
Last Updated : 17 Mar 2025
HTML lists constitute a fundamental building block that is employed to arrange similar items on a web page in
an orderly and visually attractive form. Lists enhance readability, accessibility and content organization.
There are three major types of lists supported by HTML:

o Ordered List (<ol>) - Items in a list that are listed in order of numbers or letters.
o Unordered List (<ul>) - Bulleted items which do not have a natural ordering.
o Description List (<dl>) - Term-description association such as a glossary or dictionary.
Lists in HTML may also be nested; that is, one list can be contained in another.

1. HTML Ordered List (Numbered List)

An ordered list is a list that presents items in a particular order, commonly with numbers, letters or Roman
numerals. It starts with the <ol> tag, and every list item is enclosed in the <li> tag.

Syntax

. <ol>
. <li> Item 1 </li>
. <li> Item 2 </li>
. </ol>
Example

. <ol>
. <li>Aries</li>
. <li>Bingo</li>
. <li>Leo</li>
. <li>Oracle</li>
. </ol>
Output:

1. Aries
2. Bingo
3. Leo
4. Oracle

Attributes of <ol>

Attribute Description

type Specifies the numbering

format: 1, A, a, I, i

start Sets the starting number

or character

reversed Reverses the order

(descending)
Example of <ol> attributes

Example

. <ol type="A" start="3" reversed>

. <li> HTML </li>
. <li> CSS </li>
. <li> JS </li>
. </ol>
Output:

C. HTML
B. CSS
A. JS
Explanation

Type = A indicates that upper case letters are used in the list, start = 3 specifies the list to start at C and the
list is printed in reverse order.

2. HTML Unordered List (Bulleted List)

An unordered list is best used for items that do not require order. It starts with <ul> tag, and each list item is
once more enclosed with <li> tag. The default marking of items is done in black bullet points.

Syntax

. <ul>
. <li> Item 1 </li>
. <li> Item 2 </li>
. </ul>
Example 1
. <ul>
. <li>Aries</li>
. <li>Bingo</li>
. <li>Leo</li>
. <li>Oracle</li>
. </ul>
Output:

• Aries
• Bingo
• Leo
• Oracle
Example 2

. <h2> Grocery List </h2>

. <ul>
. <li> Bread </li>
. <li> Eggs </li>
. <li> Milk </li>
. <li> Coffee </li>
. </ul>
Output:

Grocery List
• Bread
• Eggs
• Milk
• Coffee

Attributes of <ul>

Attribute Description

type Specifies the bullet style

(disc, circle, square)

compact Renders the list with

reduced
spacing (deprecated in
HTML5)

3. HTML Description List (Definition List)

A description list (<dl>) can be employed in cases where a list of terms, along with their definition, is
presented. It is commonly used as a glossary, frequently asked questions or key-value pairs.

Structure

<dl>: Defines the list container

<dt>: Defines the term (name)

<dd>: Defines the description (detail)

Example
. <dl>
. <dt>Aries</dt>
. <dd>-One of the 12 horoscope sign.</dd>
. <dt>Bingo</dt>
. <dd>-One of my evening snacks</dd>
. <dt>Leo</dt>
. <dd>-It is also an one of the 12 horoscope sign.</dd>
. <dt>Oracle</dt>
. <dd>-It is a multinational technology corporation.</dd>
. </dl>
Output:

Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.

4. HTML Nested Lists

Nested lists are lists encompassed in lists. They can be particularly helpful when it is necessary to represent
hierarchical or grouped information, such as topics and subtopics.

Example

. <!DOCTYPE html>
. <html>
. <head>
. <title>Nested list</title>
. </head>
. <body>
. <p>List of Indian States with thier capital</p>
. <ol>
. <li>Delhi
. <ul>
. <li>NewDelhi</li>
. </ul>
. </li>
. <li>Haryana
. <ul>
. <li>Chandigarh</li>
. </ul>
. </li>
. <li>Gujarat
. <ul>
. <li>Gandhinagar</li>
. </ul>
. </li>
. <li>Rajasthan
. <ul>
. <li>Jaipur</li>
. </ul>
. </li>
. <li>Maharashtra
. <ul>
. <li>Mumbai</li>
. </ul>
. </li>
. <li>Uttarpradesh
. <ul>
. <li>Lucknow</li></ul>
. </li>
. </ol>
. </body>
. </html>
Output:

1. Delhi

o NewDelhi

2. Haryana

o Chandigarh

3. Gujarat

o Gandhinagar

4. Rajasthan

o Jaipur

5. Maharashtra

o Mumbai

6. Uttarpradesh

o Lucknow
You are allowed to nest <ul> and <ol> within one another to create customized structures of lists.

HTML List Tag Summary

Tag Description

<ul> Defines an unordered

(bulleted) list

<ol> Defines an ordered

(numbered) list

<li> Defines each list item

<dl> Defines a description list

<dt> Defines the term/name

in a description list

<dd> Defines the description

of the term

Best Practices for HTML Lists

Working on HTML lists, one should adhere to the best practices to make them both clear and accessible.
Apply the appropriate semantic tag to your content, e.g., <ol> to a set of steps and <ul> to an unordered list
of features or items. This semantic correctness does not only benefit readability but also makes your HTML
meaningful to assistive technologies such as screen readers. Also, lists need to be well organized since they
are the formats used by screen readers to read and make pronunciations to the visually impaired users.

The styling is best done using CSS, where more control can be executed on the type of bullets, numbering,
indentation and spacing without resulting in dirty and semantic HTML. Do not use lists as indentation or
layout; this abuses their purpose. When nesting is necessary, make sure the sub-lists go in the right place,
inside <li> tags, so that the markup stays valid and the rendering across browsers is consistent.

Supporting Browsers

Element Chr Fir Op Sa

ome IE efox era fari

<ol><ul Yes Yes Yes Yes Yes

><dl>

Conclusion

The use of HTML lists in the right manner enhances the structure, clarity, and accessibility of content.
Applying the correct list type to the context, styling with CSS, and ensuring semantics and valid markup, you
not only make the web pages work better and more usable but also assure its functionality and strictness to
standards.

1. HTML Ordered List (Numbered List)

An ordered list is a list that presents items in a particular order, commonly with numbers, letters or Roman
numerals. It starts with the <ol> tag, and every list item is enclosed in the <li> tag.

Syntax

. <ol>
. <li> Item 1 </li>
. <li> Item 2 </li>
. </ol>
Example

. <ol>
. <li>Aries</li>
. <li>Bingo</li>
. <li>Leo</li>
. <li>Oracle</li>
. </ol>
Output:

1. Aries
2. Bingo
3. Leo
4. Oracle

Attributes of <ol>

Attribute Description

type Specifies the numbering

format: 1, A, a, I, i

start Sets the starting number

or character

reversed Reverses the order

(descending)
Example of <ol> attributes

Example
. <ol type="A" start="3" reversed>
. <li> HTML </li>
. <li> CSS </li>
. <li> JS </li>
. </ol>
Output:

C. HTML
B. CSS
A. JS
Explanation

Type = A indicates that upper case letters are used in the list, start = 3 specifies the list to start at C and the
list is printed in reverse order.

2. HTML Unordered List (Bulleted List)

Syntax

. <ul>
. <li> Item 1 </li>
. <li> Item 2 </li>
. </ul>
Example 1

. <ul>
. <li>Aries</li>
. <li>Bingo</li>
. <li>Leo</li>
. <li>Oracle</li>
. </ul>
Output:

• Aries
• Bingo
• Leo
• Oracle
Example 2

. <h2> Grocery List </h2>

. <ul>
. <li> Bread </li>
. <li> Eggs </li>
. <li> Milk </li>
. <li> Coffee </li>
. </ul>
Output:
Grocery List
• Bread
• Eggs
• Milk
• Coffee

Attributes of <ul>

Attribute Description

type Specifies the bullet style

(disc, circle, square)

compact Renders the list with

reduced
spacing (deprecated in
HTML5)

3. HTML Description List (Definition List)

A description list (<dl>) can be employed in cases where a list of terms, along with their definition, is
presented. It is commonly used as a glossary, frequently asked questions or key-value pairs.

Structure

<dl>: Defines the list container

<dt>: Defines the term (name)

<dd>: Defines the description (detail)

Example

. <dl>
. <dt>Aries</dt>
. <dd>-One of the 12 horoscope sign.</dd>
. <dt>Bingo</dt>
. <dd>-One of my evening snacks</dd>
. <dt>Leo</dt>
. <dd>-It is also an one of the 12 horoscope sign.</dd>
. <dt>Oracle</dt>
. <dd>-It is a multinational technology corporation.</dd>
. </dl>
Output:

Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.
4. HTML Nested Lists

Nested lists are lists encompassed in lists. They can be particularly helpful when it is necessary to represent
hierarchical or grouped information, such as topics and subtopics.

Example

o NewDelhi

2. Haryana

o Chandigarh

3. Gujarat

o Gandhinagar

4. Rajasthan

o Jaipur

5. Maharashtra

o Mumbai

6. Uttarpradesh

o Lucknow
You are allowed to nest <ul> and <ol> within one another to create customized structures of lists.

HTML List Tag Summary

Tag Description

<ul> Defines an unordered

(bulleted) list

<ol> Defines an ordered

(numbered) list

<li> Defines each list item

<dl> Defines a description list

<dt> Defines the term/name

in a description list

<dd> Defines the description

of the term

Best Practices for HTML Lists

Element Chr Fir Op Sa

ome IE efox era fari

<ol><ul Yes Yes Yes Yes Yes

><dl>

Conclusion

HTML Image
Last Updated : 17 Mar 2025
Images are significant in improving the attractiveness and interactivity of websites. In HTML, the <img> tag
is applied to insert images in a web page. In contrast to most other HTML elements, the <img> element is an
empty element: it has no end tag. It merely has attributes that give information on image source, size, alt
text and others.

Basic Syntax of <img> Tag

. <img src="url" alt="description">

Where,

src represents the address (URL) of the image file, and alt represents the alternate text, which is displayed in
case the image does not load.

This is the least use of the tag. An example:

. <img src="[Link]" alt="TPointTech logo">

When the file is in the same folder as the HTML file, the file name is sufficient. Other, state relative or
absolute path.

Organizing Images in Folders

The standard practice to maintain the organization of files on your websites is to put all the images in a folder
called images. You will then be able to cite them as follows:

. <img src="images/good_morning.jpg" alt="Good Morning Friends">

In case the picture is saved on some other disk or directory, enter the complete path:

. <img src="E:/images/[Link]" height="180" width="300" alt="animal image">

Note: In the case of an inaccurate or incorrect spelling of the src URL, a broken image
icon will be displayed, and the alt text will be displayed.

Essential Attributes of <img> Tag

1. src (Source)

This necessary attribute identifies the position of the image. It may be:

Relative: "images/[Link]"

Absolute: "[Link]

. <img src="[Link] alt="TPointTech logo">

[Link] (Alternate Text)

Exhibits text when the image is not loadable and is necessary for accessibility (e.g., screen readers). It is also
SEO-friendly.

. <img src="[Link]" alt="A running cheetah">

Setting Image Dimensions

3. width and height

These characteristics determine the display size of an image in pix. Alternatively, you may also use CSS to
style more freely.

. <img src="[Link]" width="300" height="180" alt="Animal Image">

Or using CSS:

. <img src="[Link]" alt="Animal Image" style="width:300px; height:180px;">

Note: Always use width and height to avoid flickering when loading the page.

Styling Images

4. title

Displays a tooltip on hovering the mouse over the picture.

. <img src="[Link]" alt="Logo" title="TPointTech Logo">

5. border

Outlines an edge on the picture. It is obsolete in HTML, but it is still usable:

. <img src="[Link]" alt="Sample" border="3">

However, using CSS is more standard:

. <img src="[Link]" alt="Sample" style="border: 3px solid black;">

Aligning Images

6. align

Used to align images relative to text. Though now deprecated, it can still be found in legacy code.

. <img src="[Link]" alt="Side image" align="right">

Modern alternative using CSS:

. <img src="[Link]" alt="Side image" style="float: right;">

Controlling Image Spacing

7. hspace and vspace

Add horizontal and vertical space around the image, respectively. They are out of date and ought to be
substituted with the CSS margins.

. <img src="[Link]" alt="Spaced image" hspace="20" vspace="30">

Modern alternative:

. <img src="[Link]" alt="Spaced image" style="margin: 30px 20px;">

Image as a Link

The image can be used as a hyperlink, and this can be done by nesting the image within an <a> tag:

. <a href="[Link]
. <img src="[Link]" alt="Robot Image" width="100" height="100">
. </a>
This comes in handy when you are in the gallery or previewing enlarged pictures.

Animated Images (GIFs)

The same tag of <img> can be used to embed animated images:

. <img src="[Link]" alt="Smiley" style="width: 200px; height: 200px;">

Responsive Images with srcset and sizes

To provide various images based on the size or resolution of the screen:

. <img
. src="[Link]"
. srcset="[Link] 1024w, [Link] 640w, [Link] 320w"
. sizes="(max-width: 640px) 100vw, 50vw"
. alt="Responsive Image">
This aids in enhancing mobile performance by loading small images when necessary.

Image Loading Control

8. loading

The attribute specifies the loading of an image by the browser. The loading controls are of two types:

o lazy: Load image only when it enters the viewport.

o eager: Load the image immediately.

. <img src="[Link]" alt="Hero image" loading="lazy">

Floating Images Beside Text

You may also enable text to wrap around the image using the float property:

. <p>
. <img src="[Link]" alt="Smiley face" style="float:right;width:42px;height:42px;">
. The image floats to the right of this text.
. </p>

Common Image File Formats

Format Type Extension

JPEG Photographic .jpg, .jpeg

image

PNG Transparent .png

image

GIF Animated/ .gif

limited color

SVG Scalable vector .svg

graphics

ICO Icons/favicons .ico, .cur

APNG Animated PNG .apng

Note: Use JPEG for photos, PNG for logos or otherwise transparent graphics, SVG for
vector graphics, and GIF or APNG for simple animations.

Legal and Performance Considerations

As best practices when using images, you should use images in order to make your site as optimal as
possible in terms of performance and accessibility. First, optimize the size of the images that you are going to
use and then upload them so that you do not delay the loading speed of the page due to big images. It must
always have descriptive alt text, which helps the screen readers and adds to the SEO because it conveys
meaningful context of the image content.

Also, be aware of the rights to use images; it is always advisable to use the images that you have created,
bought or have rights to use in order to avert copyright problems. Where feasible, host your images locally or
using CDN providers you trust to reduce the chance of bad external links and maintain a proper delivery of
images.
HTML Anchor
Last Updated : 17 Mar 2025
The anchor tag <a> is an essential HTML element that constitutes a hyperlink, allowing people to navigate
among various web pages, files, or parts of a webpage. It is among the pillars of the web that offer a means
of relating content and enables ease of browsing. Href, which is often abbreviated as hypertext reference, is
the most important attribute of this tag because it contains the destination of the URL or path.

What Is Hypertext and a Hyperlink?

It is always beneficial to understand the concept of hypertext, which is the text displayed in a browser that
contains hyperlinks, before we delve into the anchor tag itself. There are hyperlinks, also known as links,
which enable users to skip between pages, documents, or even within a single page.

href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked. In other words, it directs the user to
the destination page.

Syntax

. <a href = "..........."> Link Text </a>

where href represents the attribute that contains the destination address, and Link Text represents the
clickable text visible to users.

Linking to another HTML page

Example

. <!DOCTYPE html>
. <html lang="en">
. <head>
. <meta charset="UTF-8">
. <title>Main Page</title>
. </head>
. <body>
. <h1>Welcome to the Main Page</h1>
. <p>
. <a href="[Link]">Click for Second Page</a>
. </p>
. </body>
. </html>
Explanation

This forms a hyperlink that, when activated, opens the given file ([Link]) in the same tab by default.

Specify a location for the link using the target attribute

If we want to open that link to another page, then we can use the target attribute of <a> tag. With the help
of this link, you will be directed to the next page.

Example
. <!DOCTYPE html>
. <html>
. <head>
. <title>Link using target attribute</title>
. </head>
. <body>
. <p>Click on <a href="[Link] target="_blank"> this-link </a>to go on home pa
ge of Tpoint Tech.</p>
. </body>
. </html>
Note: The target attribute can only be used with the href attribute in the anchor tag.
If we do not use the target attribute, then a link will open on the same page.

Using target attribute for opening in new tab

You may use the target="_blank" attribute to open a link in a different tab or a new window.

Example

. <a href="[Link] target="_blank">Visit TPointTech</a>

Output:

Visit TPointTech (opens in new window)

Explanation

Target="_blank" is an instruction that informs the browser to open the link in a new tab without affecting the
original one.

Customizing link colors with HTML body attributes

Example

. <body bgcolor="red" text="yellow" link="blue" alink="#FFFF00" vlink="#FF00FF">

Explanation

This backgrounds the red, normal text as yellow, unvisited links as blue, active ones as yellow and visited
links as pink in hex colour codes.

Anchor Tag with images

Anchor tags do not work only with text; they can also be used to create image links.

Example

. <a href="[Link]
. <img src="/[Link]" alt="main logo of tpointtech" width="170" height="57">
. </a>
Output:

The logo becomes clickable and redirects to the TPointTech website.

Explanation
The image is enclosed in the <a> tag instead of text, and the image itself is a hyperlink.

Email and Telephone Links

Email and phone links can also be an anchor tag, making it easier for your users to reach you personally.

Example (Email links)

. <a href="[Link] Email</a>

Output:

end email (opens the user's default email client with a new email to
prachet@[Link]).
Explanation

The mailto: scheme opens a mail client and inserts the destination in the address field.

Example (Phone links)

. <a href="[Link] Us</a>

Output:

Call us (prompts a phone call on devices with calling capabilities).

Explanation

The tel: initiates a call through smartphones or apps, which allows dialling.

Appearance of HTML anchor tag

o An unvisited link is displayed in blue and underlined.

o A visited link is displayed underlined and purple.
o An active linkis underlined and red.

Internal page linking (Anchors)

Internal anchors can also be used on the same web page using anchor tags elsewhere on the site.

Example

. <a href="#section1">Go to Section 1</a>

. ...
. <h2 id="section1">Welcome to Section 1</h2>
Output:

Clicking "Go to Section 1" scrolls down to the heading labelled "Welcome to
Section 1."
Explanation

The href="#id" format is used to refer to an element that is located on the same page and has the same id.

Executing JavaScript with anchor tag

With the javascript: protocol, JavaScript code can be executed through anchor tags.

Example
. <a href="javascript:alert('Hello, user!');">Click Me</a>
Output:

Clicking the link displays a browser alert that says, "Hello, user!"
Explanation

The href=" javascript:..." syntax permits the use of inline JavaScript in the anchor tag itself.

Additional anchor tag attributes

Attribute Description

href Defines where in a link

to go

target States where the link

has to be opened

download Triggers download

instead of navigating

hreflang Declares the language of

the referred document

rel Describes the connection

between related and
source document

media Mentions the

device/media to which
the resource is optimized

type Defines the type of MIME

of the linked content

Downloadable File

Example

. <a href="[Link]" download>Download PDF</a>

Output:

Clicking the link starts downloading [Link].

Explanation

The download attribute prompts the browser to download the file instead of opening it.

Rel Attribute

Example

. <a href="[Link] rel="noopener noreferrer" target="_blank">External Link</a>

Output:

Opens an external site in a new tab while ensuring security via rel.
Explanation

The use of rel="noopener noreferrer" guards against security threats, such as reverse tabnabbing, when the
link is opened in a new tab.
Supporting Browsers

Elem Chro Fire Op Saf

ent
me IE fox era ari

<a> Yes Yes Yes Yes Yes

Conclusion

The HTML anchor tag is a useful tag that enables you to link web pages together, download files with links,
and link to emails, phone numbers, or even JavaScript. Depending on specific attributes, such as href, target,
download, and rel. Developers can adjust the behaviour of links to meet several requirements, thereby
creating the most efficient functionality and user experience.

Whether it is plain text links, clickable images, or primary internal navigation, the anchor tag is one of the key
skills that a web developer needs to master.

Understanding HTML Basics and Structure
No ratings yet
Understanding HTML Basics and Structure
6 pages
Simple HTML Document Structure
No ratings yet
Simple HTML Document Structure
18 pages
HTML Basics for Web Design Beginners
No ratings yet
HTML Basics for Web Design Beginners
120 pages
HTML Basics for Web Design
100% (1)
HTML Basics for Web Design
31 pages
HTML Basics for Web Design Beginners
No ratings yet
HTML Basics for Web Design Beginners
11 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
38 pages
Understanding HTML and Its Components
No ratings yet
Understanding HTML and Its Components
7 pages
HTML Basics: Structure & Elements Guide
No ratings yet
HTML Basics: Structure & Elements Guide
12 pages
Web Designing Basics and HTML Elements
No ratings yet
Web Designing Basics and HTML Elements
28 pages
Basic HTML Document Structure Guide
No ratings yet
Basic HTML Document Structure Guide
16 pages
Introduction to HTML Basics and Structure
No ratings yet
Introduction to HTML Basics and Structure
15 pages
HTML Basics: Elements, Tags, and Structure
No ratings yet
HTML Basics: Elements, Tags, and Structure
54 pages
Web Designing Notes (Unit 1-5)
No ratings yet
Web Designing Notes (Unit 1-5)
46 pages
Module 1
No ratings yet
Module 1
45 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
43 pages
HTML Notes
No ratings yet
HTML Notes
16 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
8 pages
HTML Fundamentals
No ratings yet
HTML Fundamentals
49 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
26 pages
HTML Basics for Class 8 Students
No ratings yet
HTML Basics for Class 8 Students
8 pages
HTML Fundamentals for Web Development
No ratings yet
HTML Fundamentals for Web Development
28 pages
Introduction to HTML Basics and Structure
No ratings yet
Introduction to HTML Basics and Structure
115 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
6 pages
Introduction to Web Technologies Guide
No ratings yet
Introduction to Web Technologies Guide
134 pages
HTML5 Fundamentals for Web Development
No ratings yet
HTML5 Fundamentals for Web Development
18 pages
Importance of Head and Body Tags in HTML
No ratings yet
Importance of Head and Body Tags in HTML
30 pages
HTML Basics: Structure and Elements
No ratings yet
HTML Basics: Structure and Elements
41 pages
Web Programming
No ratings yet
Web Programming
33 pages
Introduction to Web Designing Basics
No ratings yet
Introduction to Web Designing Basics
39 pages
R&D HTML
No ratings yet
R&D HTML
14 pages
HTML For Beginners
No ratings yet
HTML For Beginners
23 pages
HTML Anchor Elements Guide
No ratings yet
HTML Anchor Elements Guide
56 pages
Introduction to HTML Basics and Tags
No ratings yet
Introduction to HTML Basics and Tags
5 pages
Introduction to HTML Basics Guide
No ratings yet
Introduction to HTML Basics Guide
161 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
25 pages
HTML Document Structure Explained
No ratings yet
HTML Document Structure Explained
16 pages
Evolution of HTML: A Historical Overview
No ratings yet
Evolution of HTML: A Historical Overview
42 pages
Web Design Basics and HTML5 Guide
No ratings yet
Web Design Basics and HTML5 Guide
27 pages
Finding Domain Names for Webpages
No ratings yet
Finding Domain Names for Webpages
30 pages
HTML Basics: Structure and Elements
No ratings yet
HTML Basics: Structure and Elements
24 pages
HTML Basics for Web Designers
No ratings yet
HTML Basics for Web Designers
110 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
67 pages
HTML Links: Using the <a> Tag
No ratings yet
HTML Links: Using the <a> Tag
36 pages
Introduction to HTML Basics and Tags
No ratings yet
Introduction to HTML Basics and Tags
37 pages
HTML Fundamentals and Structure Guide
No ratings yet
HTML Fundamentals and Structure Guide
50 pages
HTML Elements, Tags, and Attributes Guide
No ratings yet
HTML Elements, Tags, and Attributes Guide
21 pages
HTML 1
No ratings yet
HTML 1
12 pages
Scripting Languages for Web Development
No ratings yet
Scripting Languages for Web Development
30 pages
HTML Tags: Basics and Usage Guide
No ratings yet
HTML Tags: Basics and Usage Guide
4 pages
Understanding Markup Languages and HTML
No ratings yet
Understanding Markup Languages and HTML
30 pages
HTML Assignment (N.varshitha)
No ratings yet
HTML Assignment (N.varshitha)
14 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
65 pages
History and Basics of HTML
No ratings yet
History and Basics of HTML
14 pages
Lecture 2 Basics
No ratings yet
Lecture 2 Basics
15 pages
Web Mod-1 Notes
No ratings yet
Web Mod-1 Notes
17 pages
Understanding HTML Tags and Elements
No ratings yet
Understanding HTML Tags and Elements
6 pages
HTML
No ratings yet
HTML
14 pages
Open Basic Web Design 3
No ratings yet
Open Basic Web Design 3
78 pages
Introduction to HTML Basics
100% (1)
Introduction to HTML Basics
7 pages
ProjecTools Engineering & CMS Overview
No ratings yet
ProjecTools Engineering & CMS Overview
1 page
Senior High School 2nd Sem Module Empowerment
No ratings yet
Senior High School 2nd Sem Module Empowerment
9 pages
Enhanced Report Utility SPI2009
No ratings yet
Enhanced Report Utility SPI2009
152 pages
Keyword Research and SEO MCQs
100% (1)
Keyword Research and SEO MCQs
4 pages
InfoSphere Data Explorer Overview
No ratings yet
InfoSphere Data Explorer Overview
29 pages
Pattern Matching Techniques for Text Retrieval
No ratings yet
Pattern Matching Techniques for Text Retrieval
10 pages
EightBitz's Custom Tags Documentation
No ratings yet
EightBitz's Custom Tags Documentation
26 pages
Moodle Database Activity Guide
No ratings yet
Moodle Database Activity Guide
3 pages
InTouch to TOP Server Connection Guide
No ratings yet
InTouch to TOP Server Connection Guide
10 pages
OneNote: Building a Note Database
No ratings yet
OneNote: Building a Note Database
10 pages
Cheat Sheet 3 Microsoft Azure Ai Fundamentals Ai 900 Az Computer Vision
No ratings yet
Cheat Sheet 3 Microsoft Azure Ai Fundamentals Ai 900 Az Computer Vision
1 page
Digital Marketing's Effect on Brand Visibility
No ratings yet
Digital Marketing's Effect on Brand Visibility
63 pages
3 - 10 - 3 KNX IoT Information Model
No ratings yet
3 - 10 - 3 KNX IoT Information Model
112 pages
Codewright Manual
0% (1)
Codewright Manual
342 pages
Weekly Internship Report: HTML Basics
No ratings yet
Weekly Internship Report: HTML Basics
2 pages
Best Practices for Joint Intelligence Ops
No ratings yet
Best Practices for Joint Intelligence Ops
20 pages
IEC61850 Driver for Vijeo Citect
No ratings yet
IEC61850 Driver for Vijeo Citect
34 pages
Facebook Page Analytics and Engagement
No ratings yet
Facebook Page Analytics and Engagement
7 pages
IT Exam Questions for Class XII Science
No ratings yet
IT Exam Questions for Class XII Science
2 pages
X2000 HD Videoscope User Manual
No ratings yet
X2000 HD Videoscope User Manual
44 pages
IT Module for SDSSU Students
No ratings yet
IT Module for SDSSU Students
22 pages
ICICI Bank Financial Performance Analysis
No ratings yet
ICICI Bank Financial Performance Analysis
78 pages
SEO Best Practices for E-Commerce 2014
No ratings yet
SEO Best Practices for E-Commerce 2014
32 pages
Key Aspects of On-Page SEO
No ratings yet
Key Aspects of On-Page SEO
22 pages
Front-End Development Essentials
No ratings yet
Front-End Development Essentials
26 pages
Remember Everything You Want and Manage The Rest - Improve Your Memory and Learning, Organize Your Brain, and Effectively Manage Your Knowledge (PDFDrive)
100% (3)
Remember Everything You Want and Manage The Rest - Improve Your Memory and Learning, Organize Your Brain, and Effectively Manage Your Knowledge (PDFDrive)
309 pages
Configuring Input Objects in FactoryTalk
100% (1)
Configuring Input Objects in FactoryTalk
112 pages
Worksheetclass 8
No ratings yet
Worksheetclass 8
6 pages
IT Planet Class 7 Answer Key
No ratings yet
IT Planet Class 7 Answer Key
28 pages
Privacy Challenges in Social Media Data
No ratings yet
Privacy Challenges in Social Media Data
6 pages