WEB
11/15/2025
HTML Introduction
HTML (HyperText Markup Language) is the standard language for creating and structuring web pages
using tags and elements. It defines how content like text, images, and links appear in a browser.
It is a markup language, not a programming language.
This means it annotates text to define how it is structured and displayed by web browsers.
It is a static language, meaning it does not inherently provide interactive features but can be
combined with CSS for styling and JavaScript for interactivity.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is my first paragraph of text!</p>
</body>
</html>
HTML Elements and HTML Tag
HTML Elements and HTML Tags are related but distinct. An HTML element is the complete
structure, including the opening tag, content (if any), and the closing tag (if applicable).
On the other hand, A tag is the actual keyword or name enclosed in angle brackets (< >) that tells the
browser what kind of content to expect.
How HTML Works: Understanding Step-by-Step
In this topic, we’ll learn how a simple HTML file is written, saved, opened in a browser, rendered, and
finally displayed on the screen along with how CSS and JavaScript enhance it.
HTML Page Structure
HTML gives the basic structure of a webpage.
Every HTML page starts with <!DOCTYPE html> to define the version.
The <html> tag is the root element containing all other tags.
The <head> section includes information like the page title.
The <body> section contains the visible content shown in the browser.
Saving the File
After writing your code, save it with the .html extension.
This makes it recognizable as a web file.
The saved file can be opened in any browser.
Opening in a Browser
Open the HTML file in browsers like Chrome or Firefox.
The browser reads and interprets the HTML code.
Converts code into a visual webpage.
Rendering the Page
Browser processes each HTML tag.
Displays elements like text, headings, and images properly.
Converts raw code into structured content.
Displaying Content
Final web page appears on the screen.
Shows all content written in the HTML file.
Any errors in HTML affect how it displays.
Interaction of HTML, CSS, and JavaScript
HTML, CSS, and JavaScript work together to create modern web pages. Each plays a unique role -
HTML gives structure, CSS adds style, and JavaScript brings interactivity.
HTML structures the webpage and defines content elements.
CSS enhances visual appearance like colors, fonts, and layout.
JavaScript adds interactivity and dynamic features.
Together, they make web pages functional, attractive, and user-friendly.
How They Work Together
Take a look at the image below to understand how HTML, CSS, and JavaScript work together to build
and enhance a webpage.
HTML acts as the car’s frame, forming the foundation.
CSS is like the car’s paint, giving it style and design.
JavaScript is the engine, adding motion and behaviour.
When combined, they create a complete, interactive website.
HTML Editors
An HTML Editor is a software application designed to help users create and modify HTML code. It
often includes features like syntax highlighting, tag completion, and error detection, which facilitate
the coding process.
There are two main types of HTML editors:
1. Text-Based Editors - Allow direct coding with features like syntax highlighting and code
completion for full control over the webpage structure. Example - Sublime Text, Visual Studio
Code, etc.
2. WYSIWYG (What You See Is What You Get) Editors - Offer a graphical interface to design
web pages visually, automatically generating the corresponding HTML code. Example - Adobe
Dreamweaver, etc.
HTML Basics
HTML (HyperText Markup Language) is the standard markup language used to create and structure
web pages.
It defines the layout of a webpage using elements and tags, allowing for the display of text,
images, links, and multimedia content.
As the foundation of nearly all websites, HTML is used in over 95% of all web pages today,
making it an essential part of modern web development.
In this guide, we learn the basics of HTML, which includes HTML tags ( <h1>, <p>, <img>, etc),
attributes, elements, and document structure which collectively form a working web page.
HTML Basic Document and Structure
Every HTML document begins with a document type declaration, setting the foundation for the
webpage. This section introduces basic HTML tags that structure the page, such as <head>, <body>,
and <title>. Although this is not mandatory, it is a good convention to start the document with the
below-mentioned tag.
HTML Structure
Below mentioned are the basic HTML tags that divide the whole page into various parts like head,
body, etc.
Basic HTML Tags for Document Structure
Tags Descriptions
<html> Encloses the entire HTML document, serving as the root element for all HTML content.
<head> Contains header information about the webpage, including title, meta tags, and linked
stylesheets. It is part of the document's structure but is not displayed on the webpage.
<title> Used within the <head> section to define the title of the HTML document. It appears in the
browser tab or window and provides a brief description of the webpage's content.
<body> Encloses the visible content of the webpage, such as text, images, audio, videos, and links.
All elements within this tag are displayed on the actual webpage when viewed in a browser.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<!--Contents of the webpage-->
<p>GeeksforGeeks is a online study platform</p>
</body>
</html>
Code Overview:
This HTML document defines a basic webpage with a responsive design using <meta> tags,
ensuring it adjusts well to different devices.
The content includes a paragraph <p> displaying "GeeksforGeeks is an online study platform," and
the title "HTML" appears in the browser tab.
HTML Headings
The HTML heading tags are used to create headings for the content of a webpage. These tags are
typically placed inside the body tag. HTML offers six heading tags, from <h1> to <h6>, each
displaying the heading in a different font size.
Syntax:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<h1>Heading 1 (h1)</h1>
<h2>Heading 2 (h2)</h2>
<h3>Heading 3 (h3)</h3>
<h4>Heading 4 (h4)</h4>
<h5>Heading 5 (h5)</h5>
<h6>Heading 6 (h6)</h6>
</body>
</html>
Code Overview:
This code displays six headings (<h1> to <h6>) on the webpage, with <h1> being the largest and
most prominent and <h6> being the smallest.
The headings are used to define text hierarchy and emphasize content based on importance.
HTML Paragraph and Break Elements
HTML <p> tags are used to write paragraph statements on a webpage. They start with the <p> tag and
end with </p>. The HTML <br> tag is used to insert a single line break and does not require a closing
tag. In HTML, the break tag is written as <br>.
Syntax:
// for Paragraph
<p> Content... </p>
// for Break
<br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<p>
HTML stands for HyperText Markup Language.<br>
It is used to design web pages using a markup language.<br>HTML is a combination of
Hypertext
and Markup language.<br>Hypertext defines the link between web pages.<br>A markup
language
is used to define the text document within the tag which defines the structure of web pages.
</p>
</body>
</html>
Code Overview:
This HTML code uses a <p> tag to display a paragraph of text, providing an overview of what
HTML is and its purpose.
The <br> tags are used to insert line breaks, making the text more readable by separating each
sentence onto a new line within the paragraph.
HTML Horizontal Line
The HTML <hr> tag is used to divide a page into sections by creating a horizontal line that spans from
the left to the right side of the page. This is an empty tag and does not require a closing tag or any
additional attributes.
Syntax:
<hr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
</body>
</html>
Code Overview:
<h1> to <h6> tags are used to define headings, with <h1> being the largest and <h6> the smallest.
Each tag displays "Hello World!" in decreasing font sizes, illustrating the hierarchy of headings in
HTML.
HTML Comments
HTML comments are annotations in your code that are not displayed in the browser. They are
enclosed within <!-- and --> tags and are primarily used for documentation, explanation, or
temporarily disabling code during debugging.
Syntax of HTML Comments
Single-line comment:
<!-- This is a single-line comment -->
Multi-line comment:
<!--
This is a multi-line comment
spanning multiple lines
-->
Example Usage of HTML Comments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<!-- This is a heading tag -->
<h1>Welcome to GeeksforGeeks</h1>
<!-- This is a paragraph tag -->
<p>Learn HTML, CSS, and JavaScript here.</p>
</body>
</html>
In this example, the comments provide context about the purpose of each HTML element.
Best Practices for Using HTML Comments
Be concise and relevant: Write comments that explain the "why" behind the code in a brief and
clear manner.
Avoid over-commenting: Do not state the obvious. Let the code itself explain when possible.
Keep comments up-to-date: Ensure comments reflect changes in the code to avoid confusion.
HTML Images
The <img> tag is used to insert an image into a webpage. The source of the image is specified within
the src attribute, like this: <img src="source_of_image">.
Syntax:
<img src="[Link]">
This HTML code uses the <img> tag to display an image on a webpage.
The src attribute specifies the URL of the image, which is loaded and displayed when the page is
rendered in the browser.
View HTML Source Code
While checking a web page, you might want to see the HTML code behind it. Here we will see how
you can view HTML source code for the entire page or a specific element.
1. View HTML Source Code of Entire Page
To view the source code of a webpage press ctrl + u on the page, or right-click on the page and
select the "view page source" option.
This will open a new tab that shows the HTML source code for that entire page.
2. Inspect an HTML Element on a Page
To check the HTML code for a specific element on a page, right-click on the page and select the
"Inspect" option.
This lets you see the HTML and CSS behind that element. You can also try making changes and see
the changes.
HTML Attribute
HTML Attributes are special words used within the opening tag of an HTML element. They provide
additional information about HTML elements. HTML attributes are used to configure and adjust the
element's behaviour, appearance, or functionality in a variety of ways.
Each attribute has a name and a value, formatted as name="value".
Attributes tell the browser how to render the element or how it should behave during user
interactions.
<!DOCTYPE html>
<html>
<head>
<title>HTML img src Attribute</title>
</head>
<body>
<img src="[Link]
style="width:350px; height:auto;">
</body>
</html>
Tag : <img>
Attribute : src
Value of Attribute : "[Link]
low_res.png"
Purpose : The <img> tag is used for embedding images in an HTML page. The src attribute within
the <img> tag specifies the path to the image file you wish to display. This attribute is crucial as it
directs the browser to the image’s location on the internet or a local directory.
Syntax:
<tagname attribute_name = "attribute_value"> content... </tagname>
Components of Attribute
An HTML attribute consists of two primary components:
1. attribute_name: This is the name of the attribute, which specifies what kind of additional
information or property you are defining for the element. Common attribute names
include href, src, class, id, etc.
2. attribute_value: The value is assigned to the attribute to define the specific setting or behavior. It is
always placed in quotes.
Types of HTML Attributes
HTML attributes can be broadly categorized based on their function and the type of elements they
modify. For
example -
Global Attributes
These attributes can be used with any HTML element (though their effects might vary based on the
element):
Attribute Description
class Groups elements and allows styling.
style Inline CSS styles.
src Specifies the source of various resources, such as image URLs for
the img element, video URLs for the video element, and audio
URLs for the audio element.
contentedit Determines whether the content within the element is editable.
able
role Specifies the element’s accessibility role.
tabindex Determines the order of focus during keyboard navigation.
id Assigns a unique identifier to an element, allowing targeting with
CSS or JavaScript.
href Defines the hyperlink destination within the a element, enabling
navigation.
alt Provides alternative text for images, essential for accessibility and
SEO.
title Creates a tooltip that appears when a user hovers over the
element.
lang Specifies the language of the element’s content, aiding with
translation and accessibility.
Some other main types of HTML attributes are:
Event Attributes - These define the actions to be taken on specific browser events.
Input Attributes - Specific to input elements within <form> tags.
Image Attributes - Specific to the <img> element for handling images.
Link Attributes - Specific to linking elements like <a> and <link>.
Table Attributes - Used with table elements like <table> , <th> , <tr> , and <td>.
Style Attributes - Define styles directly on an element.
Media Attributes - Related to media elements like <audio> and <video>.
Accessibility Attributes - Help improve accessibility, such as alt for images and aria-* attributes.
Meta Attributes - Used with meta elements to specify metadata like charset.
Common HTML Attributes
Let's take look at some of the most commonly used HTML attributes:
1. HTML alt Attribute
The alt attribute in HTML provides alternative text for an image if the image cannot be displayed. It
improves accessibility and provides context for screen readers.
<!DOCTYPE html>
<html>
<head>
<title>HTML img alt Attribute</title>
</head>
<body>
<!--If the image is not found or the img field
is left blank the alt value gets displayed-->
<img src=[Link]
style="width:350px; height:auto;" alt="The Logo"><br>
</body>
</html>
2. HTML width and height Attribute
The width and height Attribute is used to adjust the width and height of an image(in pixels).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Width and Height</title>
</head>
<body>
<img src="[Link]
width="300px"
height="100px">
</body>
</html>
3. HTML id Attribute
The id attribute in HTML assigns a unique identifier to an element, allowing it to be targeted by CSS
and JavaScript for styling and manipulation purposes.
<!DOCTYPE html>
<html>
<head>
<style>
#geeks {
color: green;
}
</style>
</head>
<body>
<h1 id="geeks">Welcome to GeeksforGeeks</h1>
</body>
</html>
4. HTML title Attribute
The title attribute is used to explain an element by hovering the mouse over it. The behavior differs
with various elements but generally, the value is displayed while loading or hovering the mouse
pointer over it.
<!DOCTYPE html>
<html>
<head>
<title>HTML title Attribute</title>
</head>
<body>
<h3 title="Hello GeeksforGeeks">
Hover to see the effect
</h3>
</body>
</html>
5. HTML href Attribute
The href attribute in HTML, used with the <a> tag, specifies a link destination. Clicking the linked
text navigates to this address. Adding `target="_blank"` opens it in a new tab.
<!DOCTYPE html>
<html>
<head>
<title>link Attribute</title>
</head>
<body>
<a href="[Link] Click to open in the same tab</a><br>
<a href="[Link] target="_blank"> Click to open in a different tab </a>
</body> </html>
6. HTML style Attribute
The style attribute is used to provide various CSS effects to the HTML elements such as increasing
font-size, changing font-family, coloring, etc.
<!DOCTYPE html>
<html>
<head>
<title>style Attribute</title>
</head>
<body>
<h2 style="font-family:Chaparral Pro Light;"> Hello GeeksforGeeks. </h2>
<h3 style="font-size:20px;"> Hello GeeksforGeeks.</h3>
<h2 style="color:#8CCEF9;"> Hello GeeksforGeeks.</h2>
<h2 style="text-align:center;">Hello GeeksforGeeks. </h2>
</body>
</html>
7. HTML lang attribute
The language is declared with the lang attribute. Declaring a language can be important for
accessibility applications and search engines.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>lang attribute</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
.lang-info {
font-style: italic;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>lang attribute</h2>
<p lang="en"> A computer science portal for geeks </p>
<p lang="fr" class="lang-info">A computer science portal for geeks</p>
<p lang="es" class="lang-info">A computer science portal for geeks
</p>
</body>
</html>
Important Points About HTML Attributes
1. Always Use Lowercase Attributes:
You can use either uppercase or lowercase letters for defining attributes.
For example, both alt and ALT in an <img> tag are valid. However, it is recommended to use
lowercase attributes as per W3C guidelines for consistency and better readability.
2. Always Quote Attribute Values:
The HTML standard does not require quotes around attribute values in certain situations.
However, W3C recommends always using quotes for attribute values, and quotes are mandatory for
stricter document types like XHTML.
Using quotes helps avoid errors, especially when the attribute value contains spaces or special
characters.
3. Declare Quote as an Attribute Value:
You can use either single (') or double (") quotes for attribute values in HTML, but it is essential to
be consistent throughout your document.
If the attribute value contains a double quote, then use single quotes to enclose it, and vice [Link]
simplicity, it is a good practice to consistently use double quotes, as it aligns with the convention
used in many HTML examples and tutorials.
Example:
<input type="text" placeholder='Enter your "username" here'>
In this example, the attribute value itself contains double quotes ("username"), so the entire value is
enclosed within single quotes to avoid confusion.
4. Boolean Attributes Should Be Written Without Values:
Boolean attributes do not require a value. If the attribute is present, it is considered true.
For example, the checked attribute of an <input> element is correctly written as:
Example:
<input type="checkbox" checked>
Writing checked="checked" also works, but it is redundant. Simply including the attribute is enough
to represent a true state.
5. Proper Attribute Order for Readability:
Although HTML does not enforce an order for attributes, following a consistent order improves
readability and maintainability.
It is common practice to order attributes like this: id, class, other global attributes, specific
attributes, and finally, event attributes.
Example:
<button id="btn1" class="button-class" type="submit" onclick="handleClick()">Submit</button>
6. Avoid Deprecated Attributes:
Certain HTML attributes, such as align, bgcolor, and border, are considered deprecated.
It is better to use CSS for styling instead of outdated attributes.
Example (Avoid deprecated attribute):
<p style="text-align: center;">This text is centered.</p>
Instead of using the align attribute, use the style attribute or a CSS class to achieve the same effect.
HTML Headings
HTML headings are used to define the titles and subtitles of sections on a webpage. They help
organize the content and create a structure that is easy to navigate.
Proper use of headings enhances readability by organizing content into clear sections.
Search engines utilize headings to understand page structure, aiding in SEO.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<h1>This is the Main Heading</h1>
<h2>This is a Subheading</h2>
<h3>This is a Smaller Subheading</h3>
<h4>This is a Sub-Subheading</h4>
<h5>This is a Minor Subheading</h5>
<h6>This is the Smallest Heading</h6>
</body>
</html>
This code uses HTML heading tags (<h1> to <h6>) to create headings that range from the main
heading to the smallest subheading.
Each tag shoes the hierarchy of the content, helping organize the structure of the webpage.
Note: the 'h' inside the tag should always be in lowercase.
Levels of HTML Heading Tags
HTML offers six levels of heading tags, each serving a different purpose in structuring your content:
<h1> – Main Heading (Largest)
Represents the primary focus of the page, usually used for the main title.
Use only one <h1> tag per page for the best SEO practices.
Makes it clear to both users and search engines what the main topic is.
<h2> – Subheadings
Ideal for dividing the content into major sections.
If the content has further subsections, use <h3> to create a logical flow.
<h3> to <h6> – Smaller Headings
These heading levels are used for finer subdivisions, gradually decreasing in size and importance.
<h3> is used for subsections under <h2>, while <h4> to <h6> are used for additional, less
important subdivisions.
<h6> defines the least important heading.
Customization in HTML Heading Tags
Customization in HTML heading tags allows you to change their style, color, font, and alignment
using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<h1>H1 Heading</h1>
<!-- With the help of Style attribute you can customize the size of the heading, As done below-->
<h1 style="font-size: 50px">H1 with new size.</h1>
<!-- Here font-size is the property by which we can modify the heading. Here we kept it 50px i.e. 50
pixels -->
</body>
</html>
Best Practices for Using HTML Headings
Use Only One <h1> per Page: The <h1> tag should be reserved for the main title of the page. Too
many <h1> tags can confuse both users and search engines about the content’s priority.
Maintain a Logical Structure: Follow a logical hierarchy of headings (<h1> → <h2> → <h3>) to
ensure content is organized. Don't jump directly from <h1> to <h4>, as it can make the content
harder to navigate.
Keep Headings Descriptive: Headings should clearly describe the content that follows. This makes
it easier for readers to understand what each section is about.
Avoid Overusing Heading Tags: Headings are for organizing content, not for styling text. Use
them where appropriate and avoid using heading tags for emphasis or styling alone.
HTML Paragraphs
A paragraph in HTML is simply a block of text enclosed within the <p> tag. The <p> tag helps divide
content into manageable, readable sections. It’s the go-to element for wrapping text in a web page that
is meant to be displayed as a distinct paragraph.
Adds space before and after the paragraph to visually separate it from other content.
Breaks the text into a single block, creating an easy-to-read section.
<p>A Computer Science portal for geeks.</p>
<p>It contains well written, well thought articles.</p>
Properties of the paragraph Tag
The browser reduces multiple spaces added by users to a single space.
If a user adds various lines, the browser compresses them into one line.
By default, the display of the paragraph element is set to "block," meaning each new paragraph is
placed on a new line.
Note: This behaviour can be modified using CSS.
<p> This paragraph has multiple lines. But HTML reduces them to a single line, omitting the
carriage return we have used.</p>
<p>This paragraph has multiple spaces. But HTML reduces them all to a single space, omitting the
extra spaces and line we have used.</p>
Note: To Solve this problem, we use <Pre> Tag as an alternative of <p> tag.
The <br> tag
The HTML <br> tag element creates a line break, giving you a new line without starting a new
paragraph. Use <br> when you want to move to the next line without beginning a whole new
paragraph.
<p> This paragraph has multiple<br />lines. But HTML reduces them<br />to a single line,
omitting
<br />the carriage return we have used. </p>
The Horizontal Rules <hr> tag
The HTML <hr> tag is used to create a horizontal rule or line, visually separating content on a
webpage. Use <hr> when you want to insert a horizontal line to signify a division between sections or
elements, providing a clear visual break in the page.
<h1>Welcome to My Website</h1>
<p> GeeksforGeeks is a leading platform that provides computer science resources and coding
challenges </p><hr>
<p> GeeksforGeeks is a leading platform that provides computer science resources and coding
challenges </p>
Align attribute
The <p> tag specifically supports the alignment attribute and allows us to align our paragraphs in left,
right, or center alignment.
Syntax:
<p align="value">
Note: The align attribute is deprecated in HTML5, and styles should be used via CSS for better
practices.
<p align="center">Welcome Geeks </p>
<p align="left"> A Computer Science portal for geeks.</p>
<p align="right"> It contains well written, well thought articles.</p>
Avoiding Common Mistakes with Paragraphs
1. Avoid Nested Paragraphs: You cannot nest paragraphs within one another. Each <p> tag should
contain only the text for one block of content.
2. Avoid Using <p> for Non-Textual Content: The <p> tag is meant for text-based content. If you
need to wrap images, tables, or other elements, use appropriate tags like <img>, <table>, or <div>.
HTML Text Formatting
HTML text formatting refers to the use of specific HTML tags to modify the appearance and structure
of text on a webpage. It allows you to style text in different ways, such as making it bold, italic,
underlined, highlighted, or struck-through.
Categories of HTML Text Formatting
HTML text formatting can be divided into two main categories: Logical Tags and Physical Tags.
1. Logical Tags
Logical tags convey the meaning or importance of the text without necessarily altering its visual
appearance. These tags help browsers, search engines, and assistive technologies understand the
purpose of the text.
<em>: Emphasizes text, typically rendered in italics. It implies that the text carries special
importance or requires emphasis.
<strong>: Marks text as important, often displayed in bold. It implies the content is of strong
importance.
2. Physical Tags
Physical tags directly affect how text looks on the webpage by changing the font, size, or style.
<b>: Displays text in bold without implying importance.
<i>: Italicizes text without any implied emphasis.
Here’s a list of commonly used HTML text formatting tags and their description:
Tags Description
<i> Showcases italicized text.
<small> Renders text in a smaller font size.
<ins> Highlights added or inserted text.
<sub> Creates subscript text.
<strong> Emphasizes text with importance, often in bold.
<b> Displays text in a bold format.
<mark> Accentuates text with a background highlight.
<del> Strikes through text to signify deletion.
<em> Adds emphasis to text, commonly styled as italic.
<sup> Formats text as superscript.
HTML Formatting Elements
1. <i> – Italicizes text
Use the <i> tag to display text in italics without implying emphasis.
<i>This is italic text.</i>
2. <small> – Reduces the font size of the text
The <small> tag renders text in a smaller font than the surrounding text.
<small>This text is smaller than the rest.</small>
3. <ins> – Highlights inserted text
The <ins> tag marks text as newly added or inserted, often displayed with an underline.
<ins>This is inserted text.</ins>
4. <sub> – Displays subscript text
Use the <sub> tag for subscripted text, often used in chemical formulas or footnotes.
H<sub>2</sub>O
5. <strong> – Emphasizes important text, often rendered in bold
The <strong> tag is semantically meaningful and indicates that the text is of high importance.
<strong>This text is bold and important.</strong>
6. <b> – Makes text bold
The <b> tag visually makes the text bold but does not imply any special significance.
<b>This is bold text.</b>
7. <mark> – Highlights text with a background color
The <mark> tag highlights text with a background color, similar to using a highlighter on paper.
<mark>This text is highlighted.</mark>
8. <del> – Strikes through text
The <del> tag is used to show that text has been deleted or is no longer relevant.
<del>This text is crossed out.</del>
9. <em> – Emphasizes text, typically italicized
The <em> tag is used for emphasized text and is usually rendered in italics to highlight importance.
<em>This text is emphasized.</em>
10. <sup> – Displays superscript text
Use the <sup> tag to show superscripted text, commonly used in exponents or footnotes.
E = mc<sup>2</sup>
Examples of HTML Text Formatting
Example 1: Basic Text Formatting
In this example we demonstrates various text formatting tags: <strong> for important and bold text,
<em> for emphasized and italic text, <b> for bold text, <i> for italic text, and <mark> for highlighted
text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Formatting Example</title>
</head>
<body>
<p> <strong>Strong:</strong> This text is important and bold. </p>
<p> <em>Emphasized:</em> This text is emphasized and italic. </p>
<p> <b>Bold:</b> This text is bold </p>
<p> <i>Italic:</i> This text is italic. </p>
<p><mark>Marked:</mark> This text is highlighted.</p>
</body></html>
Output:
Example 2: Combining Logical and Physical Tags
This example shows how logical and physical tags can be combined for enhanced text formatting:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced Text Formatting</title>
</head>
<body>
<p>This is a <strong><em>very important</em></strong> message. </p>
<p>The chemical formula of water is H <sub>2</sub>O. </p>
<p><del>Deleted text</del> and <ins>inserted text</ins> are shown here </p>
<p><small>Smaller text</small> can be used for disclaimers. </p>
<p>E = mc<sup>2</sup></p>
</body>
</html>
Output:
