Scribd
Upload
4 views

Web unit 1

The document introduces HTML and XHTML, explaining their definitions, purposes, and basic structures. It details the evolution of HTML, differences between HTML and XHTML, and best practices for text formatting using various tags. Additionally, it emphasizes the importance of semantic elements for accessibility and SEO, while providing guidelines for using HTML and XHTML effectively.

Uploaded by

sangeethapriyads
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Web unit 1

The document introduces HTML and XHTML, explaining their definitions, purposes, and basic structures. It details the evolution of HTML, differences between HTML and XHTML, and best practices for text formatting using various tags. Additionally, it emphasizes the importance of semantic elements for accessibility and SEO, while providing guidelines for using HTML and XHTML effectively.

Uploaded by

sangeethapriyads
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 54

Introducing HTML and XHTML

1. Introduction to Web Technologies


The World Wide Web (WWW) is a system that allows users to access and share information
over the internet using web pages. These pages are written using markup languages, primarily
HTML (HyperText Markup Language) and XHTML (Extensible HyperText Markup
Language). Both languages are used to structure documents for the web, enabling browsers to
display content in a readable and interactive format.

2. What is HTML?
Definition:
HTML (HyperText Markup Language) is the standard markup language used to create and
design documents displayed in a web browser. It describes the structure of a web page using
elements (also called tags), which define headings, paragraphs, links, images, and other
content.
Purpose of HTML:
• Structures web content.
• Supports multimedia like images, videos, and audio.
• Links documents through hypertext.
• Enables embedding of scripts (like JavaScript).
• Acts as the skeleton of every website.
Basic Structure of an HTML Document:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a sample paragraph.</p>
</body>
</html>
Explanation:
• <!DOCTYPE html>: Declares the document type and version of HTML.
• <html>: Root element.
• <head>: Contains metadata (not visible on the page).
• <title>: Displays title on the browser tab.
• <body>: Contains all visible content like headings, text, images, etc.

3. Evolution of HTML
HTML has evolved over time through various versions:
• HTML 1.0 (1993): Basic elements.
• HTML 2.0 (1995): Standardized existing features.
• HTML 3.2 (1997): Added support for scripting and styles.
• HTML 4.01 (1999): Improved structure and multimedia support.
• XHTML 1.0 (2000): A reformulation of HTML 4.01 in XML.
• HTML5 (2014): Modern version with video/audio, APIs, semantic tags.

4. What is XHTML?
Definition:
XHTML (Extensible HyperText Markup Language) is a stricter and XML-based version
of HTML. It combines the flexibility of HTML with the rigor of XML, making web
documents more consistent and error-free.
Key Features:
• Written in well-formed XML.
• Case-sensitive tags (tags must be lowercase).
• All tags must be properly closed.
• Attribute values must be quoted.
Example of XHTML Syntax:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Example</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is written in XHTML.</p>
</body>
</html>

5. Differences Between HTML and XHTML

Feature HTML XHTML

Syntax Less strict Very strict (XML rules apply)

Tag case sensitivity Not case-sensitive Case-sensitive (lowercase tags)

Tag closing Optional in many cases Mandatory for all tags

Attribute quoting Optional Mandatory (must use double quotes)

Document Requires XML DOCTYPE and


Simple DOCTYPE
declaration namespace

Browsers handle errors


Error handling Browsers are strict and may fail to load
leniently

6. Why Use XHTML?


Advantages:
• Enforces well-formed coding practices.
• Supports XML tools like DOM and XSLT.
• Helps develop consistent and reusable code.
• Allows easier data exchange across platforms.
• Facilitates integration with other XML-based applications.
Use Cases:
• Projects that require strict validation.
• Web applications that integrate with XML APIs.
• Educational purposes to teach clean coding practices.
7. HTML vs XHTML – When to Use What?
Use HTML When:
• You are building modern, interactive websites with flexibility.
• You are using HTML5-specific features like <video>, <canvas>, etc.
• You need to support older browsers that may not enforce strict syntax.
Use XHTML When:
• The project requires XML-based parsing.
• Clean, error-free coding is a priority.
• You need to integrate with other XML tools or web services.
Modern Approach:
While XHTML is still used, most modern websites use HTML5 because it offers the features
of XHTML along with added flexibility and broader support.

8. Importance of Doctype Declaration


The <!DOCTYPE> declaration informs the browser which version of HTML or XHTML is
being used, ensuring proper rendering.
Examples:
HTML5:
html
CopyEdit
<!DOCTYPE html>
XHTML 1.0 Strict:
xhtml
CopyEdit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Without a proper DOCTYPE, browsers may enter quirks mode, which can lead to
inconsistent display across different browsers.

9. Common HTML/XHTML Tags


Tag Description

<h1> to <h6> Headings (h1 is largest)

<p> Paragraph

<br /> Line break (self-closing in XHTML)

<img> Embed image

<a> Hyperlink

<ul>, <ol>, <li> Lists

<div> Block-level container

<span> Inline container

Note: In XHTML, self-closing tags (like <br>, <hr>, <img>) must be written as <br />, <hr
/>, <img />.

10. XHTML Document Rules Summary


To ensure valid XHTML, follow these rules:
1. Use lowercase tags.
2. Close all tags.
3. Quote all attribute values.
4. Nest elements properly.
5. Use the correct DOCTYPE.
6. Include the XML namespace.

11. Tools and Validators


You can use online validators like the W3C Markup Validation Service to check for errors
in your HTML or XHTML code. These tools help:
• Identify syntax issues.
• Improve browser compatibility.
• Ensure semantic correctness.

2. Basic Text Formatting in HTML and XHTML


1. Introduction
Text formatting in web development is essential for presenting content clearly and
professionally on a web page. HTML (HyperText Markup Language) provides several tags
that help structure, highlight, and decorate text to improve readability and user experience.
These formatting tags define how text appears—whether bold, italic, underlined, or styled in
other ways.
Proper use of formatting elements enhances not only the visual layout but also accessibility,
search engine optimization (SEO), and content structure.

2. Categories of Text Formatting Elements


Text formatting in HTML is broadly divided into:
1. Physical Formatting – focuses on how the text appears visually.
2. Logical Formatting – emphasizes the meaning or importance of the text rather than
appearance.

3. Physical Text Formatting Tags


These tags define the physical style or appearance of the text.
a) <b> – Bold Text
The <b> tag displays the text in bold. It does not convey importance semantically.
<p>This is a <b>bold</b> word.</p>
b) <i> – Italic Text
The <i> tag makes text italic. Often used for style purposes like emphasizing foreign words.
<p>This is an <i>italic</i> word.</p>
c) <u> – Underlined Text
The <u> tag underlines text. It's generally avoided in modern HTML to prevent confusion
with hyperlinks.
<p>This is an <u>underlined</u> word.</p>
d) <strike> – Strikethrough Text
The <strike> tag places a horizontal line through the text (deprecated in HTML5).
<p>This is a <strike>discontinued</strike> product.</p>
Note: Use <del> instead in modern HTML.

4. Logical Text Formatting Tags


These tags convey semantic meaning in addition to formatting.
a) <strong> – Important Text
Displays text in bold and conveys importance.
<p><strong>Warning:</strong> Do not enter the restricted area.</p>
b) <em> – Emphasized Text
Displays text in italic and adds emphasis.
<p>Please <em>read carefully</em> before proceeding.</p>
c) <mark> – Highlighted Text
Used to mark or highlight text for reference. Added in HTML5.
<p>The keyword is <mark>innovation</mark>.</p>
d) <del> and <ins> – Deleted and Inserted Text
• <del> represents deleted text.
• <ins> shows newly inserted text.
<p>This item was <del>Rs.500</del> <ins>Rs.450</ins></p>

5. Additional Text Formatting Elements


a) <sub> – Subscript Text
Displays text slightly below the baseline.
<p>Water formula: H<sub>2</sub>O</p>
b) <sup> – Superscript Text
Displays text slightly above the normal line.
<p>Area = a<sup>2</sup></p>
c) <code> – Code Snippet
Used to represent programming code or keyboard input.
<p>Use the <code>printf()</code> function to display output.</p>
d) <pre> – Preformatted Text
Preserves spaces, tabs, and line breaks. Useful for displaying code blocks.
<pre>
for (int i=0; i<5; i++) {
printf("Hello\n");
}
</pre>
e) <kbd> – Keyboard Input
Displays text as if typed on a keyboard.
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
f) <blockquote> – Quoted Text
Used for quoting long paragraphs from external sources.
<blockquote>
"Education is the most powerful weapon you can use to change the world." – Nelson
Mandela
</blockquote>

6. Best Practices in Text Formatting


1. Use semantic tags like <strong> and <em> instead of <b> and <i>.
2. Ensure tags are properly nested and closed, especially in XHTML.
3. Avoid excessive formatting to maintain readability.
4. Use CSS for advanced styling and keep HTML for content structure.

7. Text Formatting in XHTML


Since XHTML is based on XML, formatting tags must follow strict rules:
• Tags must be lowercase.
• All tags must be properly closed.
• Self-closing tags like <br> should be written as <br />.
Example:
<p>This is <strong>important</strong> and <em>emphasized</em> text.<br /></p>

8. Text Formatting with CSS (Optional Approach)


Though HTML provides basic formatting, CSS is used for more control over text appearance:
<p style="font-weight: bold; color: red;">Styled text</p>
This separates content (HTML) from presentation (CSS), improving code maintainability
and flexibility.
9. Accessibility and SEO Benefits
Proper use of text formatting enhances:
• Accessibility: Screen readers can interpret <em>, <strong>, etc.
• SEO: Search engines recognize the structure and importance of content.
• Readability: Readers can scan and understand information quickly.

Basic Text Formatting in HTML

1. Introduction to Text Formatting in HTML


Text formatting is a fundamental aspect of web design. HTML offers a wide range of
elements that allow developers to control how text appears on a web page. Using these
elements, you can change the size, weight, style, alignment, and appearance of the text to
improve readability and structure.
Text formatting elements are primarily used within the <body> of the HTML document and
help in distinguishing between headings, paragraphs, strong/emphasized text, inline quotes,
code snippets, and more.

2. Basic Text Formatting Tags in HTML


2.1 <b> – Bold Text
The <b> tag makes the enclosed text bold. It does not convey extra importance; it's only for
styling purposes.
<p>This is <b>bold</b> text.</p>
2.2 <strong> – Important Text
The <strong> tag is similar to <b>, but it also adds semantic meaning, indicating that the
text is of strong importance.
<p>This is <strong>important</strong> information.</p>
2.3 <i> – Italic Text
The <i> tag is used to display text in italics. Like <b>, it is used for styling and does not
convey emphasis.
<p>This is <i>italicized</i> text.</p>
2.4 <em> – Emphasized Text
The <em> tag emphasizes the enclosed text. Browsers usually render it in italics, but unlike
<i>, it adds semantic emphasis.
<p>This is <em>emphasized</em> text.</p>

3. More Inline Text Formatting Tags


3.1 <mark> – Highlighted Text
The <mark> tag highlights the text, typically with a yellow background.
<p>Do not forget to <mark>submit</mark> your assignment.</p>
3.2 <u> – Underlined Text
The <u> tag underlines the text. However, it's not commonly used as underlining can be
confused with hyperlinks.
<p>This is <u>underlined</u> text.</p>
3.3 <small> – Smaller Text
The <small> tag reduces the font size of the text.
<p>This is a <small>smaller</small> text.</p>
3.4 <del> – Deleted Text
The <del> tag shows text that has been removed or is no longer relevant. It typically displays
a strikethrough.
<p>This item is <del>out of stock</del> now available.</p>
3.5 <ins> – Inserted Text
The <ins> tag shows newly added text, usually underlined.
<p>This feature has been <ins>recently added</ins>.</p>

4. Quotation and Code Formatting


4.1 <q> – Short Inline Quote
The <q> tag is used for short quotes, and browsers automatically add quotation marks.
<p>He said, <q>This is amazing!</q></p>
4.2 <blockquote> – Long Quotation
The <blockquote> tag is used for long quotations. It usually indents the text.
<blockquote>
"HTML is the backbone of the web and fundamental for creating web content."
</blockquote>
4.3 <code> – Code Snippets
The <code> tag is used to define a piece of code or computer output.
<p>Use the <code>print()</code> function to display output in Python.</p>
4.4 <pre> – Preformatted Text
The <pre> tag preserves both spaces and line breaks. Often used to show code exactly as
typed.
<pre>
for i in range(5):
print(i)
</pre>

5. Superscript and Subscript Text


5.1 <sup> – Superscript
Used for mathematical powers or footnotes.
<p>E = mc<sup>2</sup></p>
5.2 <sub> – Subscript
Used for chemical formulas or notations.
<p>H<sub>2</sub>O is the formula for water.</p>

6. Semantic vs. Non-Semantic Formatting


Semantic Elements
• Convey meaning along with appearance.
• Examples: <strong>, <em>, <mark>, <ins>, <del>
Non-Semantic Elements
• Only control appearance without conveying meaning.
• Examples: <b>, <i>, <u>
Example:
<p><strong>Warning:</strong> Do not delete system files.</p>
Here, <strong> informs the browser and assistive technologies that the text is important,
unlike <b> which would just make it bold.
7. Combining Formatting Tags
Tags can be combined to apply multiple formatting styles.
<p>This is <strong><em>very important</em></strong> information.</p>
This renders the text in bold and italics while also conveying semantic importance and
emphasis.

8. Accessibility and Best Practices


• Use semantic tags wherever possible.
• Avoid using formatting for style only; instead, use CSS for styling.
• Assistive technologies (like screen readers) benefit from semantic formatting.
• Do not misuse <b> and <i> when <strong> and <em> provide better meaning.

9. Deprecated Tags in HTML


Some tags used in earlier versions of HTML are now deprecated in favor of CSS or semantic
HTML.

Deprecated Tag Replacement

<font> CSS

<center> CSS (text-align)

<big> CSS (font-size)

Example:
Instead of using:
<font size="4" color="red">Hello</font>
Use:
<p style="font-size: 20px; color: red;">Hello</p>

Presentational Elements in HTML

1. Introduction
In HTML, presentational elements are used to change the look and style of the text or
content. These tags help in making the webpage look better by using bold, italic, underline,
colors, font size, and alignment.
In older versions of HTML (like HTML 3.2), these tags were commonly used. But in modern
HTML5, we use CSS (Cascading Style Sheets) to do the same work in a better way. Still,
learning presentational tags is useful for understanding the basics.

2. Common Presentational Elements in HTML


2.1 <b> – Bold Text
The <b> tag renders the enclosed text in bold typeface but does not indicate importance or
emphasis.
<p>This is a <b>bold</b> word.</p>
Note: It is purely visual. Use <strong> for importance instead.

2.2 <i> – Italic Text


The <i> tag makes the text italicized for stylistic offset, such as technical terms or foreign
words.
<p>This is an <i>italic</i> word.</p>
Tip: Use <em> if emphasis is required.

2.3 <u> – Underlined Text


The <u> tag underlines the text. Earlier used to indicate emphasis, but it is now discouraged
due to confusion with hyperlinks.
<p>This is <u>underlined</u> text.</p>

2.4 <font> – Font Styling (Deprecated)


The <font> tag was used to set font type, size, and color.
<font face="Arial" size="4" color="blue">This is styled text</font>
Note: This tag is deprecated in HTML5. Use CSS instead.

3. Layout-Based Presentational Elements


3.1 <center> – Center-Aligned Content
The <center> tag centers the text or other elements inside it.
<center>This content is centered.</center>
Deprecated in HTML5 – use CSS: text-align: center;

3.2 <big> – Enlarged Text (Deprecated)


The <big> tag increases the font size of the text slightly.
<p>This is a <big>bigger</big> word.</p>
Replaced by CSS: font-size: larger;

3.3 <small> – Reduced Text Size


The <small> tag decreases the size of text.
<p>This is a <small>smaller</small> word.</p>
Still valid in HTML5, often used for fine print or side notes.

4. Text Formatting with Visual Effect


4.1 <strike> and <s> – Strikethrough Text (Deprecated)
The <strike> or <s> tag renders the text with a line through it.
<p>This item is <s>out of stock</s>.</p>
Deprecated – replaced by <del> or CSS text-decoration: line-through;

4.2 <tt> – Teletype Text (Monospaced Font)


The <tt> tag displays text in a monospaced (typewriter-style) font.
<p>The code is <tt>print("Hello")</tt></p>
Deprecated – use <code> or CSS: font-family: monospace;

5. Preformatted Content
5.1 <pre> – Preserved Whitespace
The <pre> tag displays text exactly as typed in the code (including spaces and line breaks).
Often used for displaying code samples.
<pre>
for (int i = 0; i < 5; i++) {
cout << i;
}
</pre>
Useful and still valid in modern HTML.

6. Differences: Presentational vs. Semantic Elements


Feature Presentational Elements Semantic Elements
Purpose Control appearance Convey meaning
Examples <b>, <i>, <font> <strong>, <em>, <mark>
Accessibility Poor Good
HTML5 Support Mostly Deprecated Recommended
Preferred Alternative CSS HTML5 Semantic Tags

7. Transition to CSS for Presentation


As web design evolved, the Separation of Content and Presentation became a best
practice. HTML structures the content, while CSS controls presentation (fonts, colors,
alignment, spacing).
Example: Instead of this –
<font color="red" size="5">Welcome</font>
Use this –
<p style="color: red; font-size: 24px;">Welcome</p>
Or:
<style>
.welcome-text {
color: red;
font-size: 24px;
}
</style>
<p class="welcome-text">Welcome</p>

8. Why Presentational Tags Were Used Historically


• Earlier web standards (HTML 3.2 and HTML 4.01) lacked CSS support.
• Designers used inline styles and tags like <font>, <center>, and <big> for styling.
• Web browsers widely supported them, making development easier at the time.

9. Examples of Deprecated Presentational Tags and Their CSS Equivalents


HTML Tag Purpose CSS Replacement
<b> Bold text font-weight: bold;
<i> Italics font-style: italic;
<font> Font style font-family, font-size, color
<center> Centering content text-align: center;
<big> Enlarged text font-size: larger;
<strike> Strikethrough text-decoration: line-through;

10. Sample HTML Page Using Presentational Tags (Old Style)


<!DOCTYPE html>
<html>
<head>
<title>Presentational Tags</title>
</head>
<body>
<center>
<font size="6" color="blue">Welcome to HTML!</font>
</center>
<p>This is a <b>bold</b> and <i>italic</i> word.</p>
<p>This is a <big>bigger</big> word and a <small>smaller</small> word.</p>
<p>This is <strike>deprecated</strike> tag.</p>
</body>
</html>

Phrase Elements in HTML


1. Introduction
Phrase elements in HTML are used to give meaning to a specific part of the text. They help
describe how a part of the content should be understood or interpreted by the browser,
screen readers, and users.
Unlike presentational tags (like <b> or <i>), phrase elements add semantic value to the
content. That means they describe the purpose of the text, not just how it looks.
For example:
• <em> is used to show emphasis
• <strong> is used to show importance
These elements help improve accessibility, SEO, and readability of web pages.

2. Common Phrase Elements


Here are some important phrase elements used in HTML:

a) <em> – Emphasized Text


The <em> tag is used when you want to emphasize a word. The text usually appears italic in
the browser.
<p>Please <em>read</em> the instructions carefully.</p>
Meaning: The word read is important here.

b) <strong> – Strong Importance


The <strong> tag is used for text that is very important. It usually appears bold in the
browser.
<p>This is a <strong>warning</strong> message.</p>
Meaning: The word warning is serious.

c) <abbr> – Abbreviation
The <abbr> tag is used to show the short form of a word. You can use the title attribute to
show the full form when the mouse hovers over it.
<p><abbr title="World Health Organization">WHO</abbr> is a global health agency.</p>
When you move the mouse over "WHO", it will show: World Health Organization
d) <cite> – Citation or Book Title
Used to mark the title of a book, movie, or article.
<p>I read <cite>Wings of Fire</cite> by Dr. A.P.J. Abdul Kalam.</p>
It usually appears italic in the browser.

e) <dfn> – Definition
Marks the word that is being defined.
<p><dfn>HTML</dfn> stands for HyperText Markup Language.</p>
The word "HTML" is the term being defined.

f) <code> – Programming Code


Used to show computer code or programming instructions. Text appears in monospace font.
<p>To print a message in Python, use <code>print("Hello")</code>.</p>

g) <kbd> – Keyboard Input


Used to show text that a user needs to type on a keyboard.
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save the file.</p>

h) <samp> – Sample Output


Used to show output from a computer program.
<p>The result is: <samp>Success</samp></p>

i) <var> – Variable
Used to show a variable in a math or programming expression.
<p>The area of a circle is <var>πr²</var>.</p>

j) <mark> – Highlighted Text


Used to highlight a word or sentence.
<p>Please <mark>submit</mark> your assignment before Friday.</p>
The word "submit" will appear with a yellow background.
k) <time> – Date or Time
Used to show a specific time or date in machine-readable format.
<p>The event is on <time datetime="2025-05-01">1st May 2025</time>.</p>
Helps search engines and calendars read the date correctly.

3. Example Using Multiple Phrase Elements


<!DOCTYPE html>
<html>
<head>
<title>Phrase Elements Example</title>
</head>
<body>
<p>To save your work, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<p>The command is <code>print("Hello")</code>.</p>
<p>Today is <time datetime="2025-04-29">April 29, 2025</time>.</p>
<p>Read the book <cite>The Alchemist</cite>.</p>
<p>The <dfn>Internet</dfn> is a global network.</p>
<p>Math formula: Area = <var>πr²</var></p>
</body>
</html>

4. Differences Between Phrase and Presentational Elements

Feature Phrase Elements Presentational Elements

Purpose Add meaning to text Only change appearance

Example <em>, <strong> <i>, <b>

Accessibility Good for screen readers Not helpful

Use in HTML5 Recommended Mostly deprecated

Styling Uses browser default or CSS Fixed appearance


5. Why Use Phrase Elements?
• Helps search engines understand your content
• Improves accessibility for people using screen readers
• Gives semantic meaning to content
• Helps in organizing academic or technical content
• Preferred method in modern web design

6. Phrase Elements in HTML5


Most phrase elements are supported in HTML5. Unlike tags like <font> and <center>,
phrase elements like <em>, <strong>, <mark>, and <time> are still valid and recommended.

7. Summary
Tag Purpose
<em> Emphasis
<strong> Importance
<abbr> Abbreviation
<cite> Title of book/article
<dfn> Definition
<code> Programming code
<kbd> Keyboard input
<samp> Output sample
<var> Variable
<mark> Highlighted text
<time> Time/date info

Lists in HTML

1. Introduction to Lists
HTML provides lists to display a group of related items in a structured format. Lists are
useful for:
• Showing steps or procedures
• Creating menus
• Displaying grouped information
• Organizing content
There are three main types of lists in HTML:
1. Ordered List (<ol>)
2. Unordered List (<ul>)
3. Definition List (<dl>)
Each list type is used based on the situation or purpose of the content.

2. Ordered List (<ol>)


An ordered list is used when the items have a specific order or sequence, such as
instructions, rankings, or steps.
Syntax:
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>
Output:
1. Step 1
2. Step 2
3. Step 3
Attributes of <ol>:
• type: Specifies the numbering type (1, A, a, I, i)
• start: Sets the starting number
• reversed: Reverses the order
Example with Attributes:
<ol type="A" start="3" reversed>
<li>Third</li>
<li>Second</li>
<li>First</li>
</ol>

3. Unordered List (<ul>)


An unordered list is used when the order of items is not important. It displays items using
bullets.
Syntax:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
Output:
• Apple
• Banana
• Grapes
Attributes of <ul> (in old HTML):
• type: circle, square, disc
Note: This is now handled using CSS.

4. Definition List (<dl>)


A definition list is used to display terms and their definitions. It uses three tags:
• <dl> → Starts the definition list
• <dt> → Definition term
• <dd> → Definition description
Syntax:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Output:
HTML
HyperText Markup Language
CSS
Cascading Style Sheets

5. Nested Lists
You can nest a list inside another list, either ordered or unordered.
Example: Nested Unordered List
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Mango</li>
</ul>
</li>
<li>Vegetables</li>
</ul>
Output:
• Fruits
- Apple
- Mango
• Vegetables

6. Practical Example – Menu List


<h3>Menu</h3>
<ol>
<li>Starters</li>
<li>Main Course
<ul>
<li>Rice</li>
<li>Curry</li>
</ul>
</li>
<li>Desserts</li>
</ol>

7. Lists with CSS Styling


Though basic lists can be created with HTML, CSS can be used to style them beautifully.
Example:
<ul style="list-style-type: square; color: blue;">
<li>HTML</li>
<li>CSS</li>
</ul>
• list-style-type: circle, square, disc, none
• color: changes the color of list items

8. Ordered vs Unordered vs Definition Lists


Feature Ordered List <ol> Unordered List <ul> Definition List <dl>
Purpose Ordered items Unordered items Term-definition pairs
Markers Numbers/Letters Bullets Indented terms
Tags Used <ol>, <li> <ul>, <li> <dl>, <dt>, <dd>
Sequence Needed Yes No No

9. Example Program – All List Types


<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>

<h2>Ordered List</h2>
<ol type="I">
<li>Login</li>
<li>Choose Products</li>
<li>Checkout</li>
</ol>

<h2>Unordered List</h2>
<ul>
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ul>

<h2>Definition List</h2>
<dl>
<dt>RAM</dt>
<dd>Random Access Memory</dd>

<dt>CPU</dt>
<dd>Central Processing Unit</dd>
</dl>

</body>
</html>

10. Advantages of Lists in HTML


• Easy to organize and group content
• Improves readability
• Great for menus, FAQs, steps, glossary, etc.
• Makes website clean and user-friendly
• Works well with CSS and JavaScript for interactivity

11. Best Practices


• Use lists wherever grouping is needed
• Use <ul> for items without order
• Use <ol> when step-by-step order is required
• Use <dl> for definitions or question-answer format
• Style lists using CSS for better appearance
• Avoid using deprecated attributes like type in HTML5

Editing Text in HTML

1. Introduction to Editing Text


Editing text in HTML refers to the use of specific tags that indicate changes, updates, or
revisions in the content. These tags help readers and developers understand what has been
inserted, deleted, or highlighted for attention. They are particularly useful in:
• Collaborative writing
• Version tracking
• Emphasizing changes
• Proofreading or educational content

2. Commonly Used Text Editing Tags


HTML provides several tags to visually and semantically indicate edits or highlights. The
most common are:
Tag Purpose
<b> Bold (for stylistic emphasis)
<strong> Strong importance (semantic bold)
<i> Italic text (for a different voice)
<em> Emphasis (semantic italic)
<mark> Highlighted text
<ins> Inserted text
<del> Deleted text
<u> Underlined text
Note: Some tags provide only styling (<b>, <i>, <u>) while others carry semantic meaning
(<strong>, <em>, <del>, <ins>).

3. Using <ins> – Inserted Text


The <ins> tag represents inserted text. It usually appears with an underline to show that the
content is new.
Syntax:
<p>This is an <ins>inserted</ins> word.</p>
Output:
This is an <ins>inserted</ins> word.
Attributes:
• cite: URL that explains the change
• datetime: The date/time of insertion
Example with attributes:
<ins cite="https://example.com/change-log" datetime="2025-04-29">New Rule</ins>

4. Using <del> – Deleted Text


The <del> tag is used to indicate that the text has been removed or is no longer valid. It
typically appears with a strikethrough.
Syntax:
<p>This rule is <del>no longer valid</del>.</p>
Output:
This rule is <del>no longer valid</del>.
Attributes:
• cite: Link to source
• datetime: Time of deletion
5. Combining <del> and <ins>
These tags can be used together to show text that has been replaced.
Example:
<p>The meeting is scheduled on <del>Monday</del> <ins>Tuesday</ins>.</p>
Output:
The meeting is scheduled on <del>Monday</del> <ins>Tuesday</ins>.

6. Highlighting Text with <mark>


The <mark> tag is used to highlight parts of text for reference, attention, or study purposes.
Syntax:
<p>Please read the <mark>important</mark> points carefully.</p>
Output:
Please read the <mark>important</mark> points carefully.

7. Emphasis vs Styling Tags


HTML also allows text to be styled for importance, but some tags have semantic meanings,
while others are only for appearance.
Tag Meaning Display
<strong> Strong importance Bold
<b> Styling, no semantic meaning Bold
<em> Emphasized text Italic
<i> Styling only Italic
<u> Underlined text Underline
Example:
<p>This is <strong>very important</strong> information.</p>
<p>This is <em>really exciting</em> news!</p>

8. Practical Example: Change Tracking


<!DOCTYPE html>
<html>
<head>
<title>Editing Text</title>
</head>
<body>

<p>This is the original document.</p>

<p>The course was <del>Data Structures</del> <ins>Web Development</ins>.</p>

<p><mark>Note:</mark> Submit the assignment before Friday.</p>

<p>Use <strong>bold</strong> and <em>emphasis</em> wisely.</p>

</body>
</html>
Explanation:
• <del> and <ins> show what was changed
• <mark> highlights important note
• <strong> and <em> show priority and stress

9. Use Cases of Text Editing Tags


• Educational Content – Highlight changes for students
• Blogging & News – Track updates or corrections
• Legal & Policy Updates – Show removed/revised clauses
• Collaborative Writing – Indicate revisions by team members
• Content Review – Proofreading and error correction

10. Best Practices


• Use <ins> and <del> for changes, especially in collaborative documents.
• Use <mark> to highlight crucial instructions or warnings.
• Prefer <strong> and <em> over <b> and <i> for accessibility and screen readers.
• Avoid overusing formatting tags for visual design; use CSS for that.
• Always test your HTML in a browser to check how the tags appear.
11. Accessibility Considerations
Tags like <strong> and <em> are screen-reader friendly. They help users with visual
disabilities by reading the text with emphasis or weight.
For example, a screen reader may speak <strong> with a stronger voice, or <em> with
stress.
Semantic tags make the web more accessible.

12. Summary and Conclusion


Editing text in HTML is not just about how it looks—it’s also about communicating changes,
importance, and highlighting. Using tags like <ins>, <del>, <mark>, <strong>, and <em>
makes the content more meaningful, readable, and interactive.
Proper use of editing and formatting tags:
• Helps in version control
• Enhances clarity
• Makes content accessible
• Adds emphasis without needing CSS
In modern web development, semantic editing is encouraged for better readability, SEO, and
accessibility.

Core Elements and Attributes in HTML

1. Introduction
HTML (HyperText Markup Language) uses elements to define the structure and content of a
web page. Each element typically includes:
• A start tag (<tagname>)
• The content
• An end tag (</tagname>)
HTML elements can also include attributes that provide additional information about an
element, usually written in the start tag.
Example:
<a href="https://example.com">Visit Example</a>
In the above:
• <a> is an element
• href="https://example.com" is an attribute

2. Core HTML Elements


The core elements form the basic building blocks of any HTML document. These are
essential for:
• Page structure
• Content presentation
• Accessibility and semantic meaning
Key Core Elements:
Element Purpose
<html> Root of an HTML document
<head> Metadata, links to styles/scripts
<title> Title of the document (appears on tab)
<body> Main visible content of the page
<h1> - <h6> Headings, from largest to smallest
<p> Paragraph of text
<br> Line break
<hr> Horizontal rule
<a> Hyperlink
<img> Image insertion
<div> Container for block-level content
<span> Inline container

3. Structural Elements
Structural elements help organize the layout and content hierarchy of a webpage.
Common Examples:
Tag Usage
<html> Root element, encloses the entire HTML page
<head> Includes metadata, styles, scripts
<body> Contains all the content visible to the user
<title> Defines the browser title of the page
Example Structure:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a basic page.</p>
</body>
</html>

4. Text Content Elements


These elements display text in different forms.
Examples:
• <p> – Paragraph
• <h1> to <h6> – Headings
• <strong> – Strong importance
• <em> – Emphasis
• <b>, <i> – Bold and italic (without semantic meaning)
• <blockquote> – Quoted block of text
• <code> – For displaying code snippets
• <pre> – Preserved preformatted text

5. HTML Attributes
Attributes are used inside HTML tags to control the behavior or appearance of elements.
They are always written in the name="value" format.
General Rules:
• Written in the start tag
• Name is case-insensitive (but lowercase is recommended)
• Quotation marks are required for values
Example:
<img src="photo.jpg" alt="A photo of a sunset">
• src and alt are attributes of the <img> element

6. Commonly Used Global Attributes


These attributes can be used with almost all HTML elements.
Attribute Description
id Unique identifier for the element
class Assigns class name(s) for CSS or JS
style Inline CSS styling
title Tooltip on hover
lang Language of the element content
dir Direction of text (ltr or rtl)
hidden Hides the element from display
tabindex Sets the tab order of elements
contenteditable Makes element editable
accesskey Defines a shortcut key
Example:
<p id="intro" class="highlight" style="color:blue;">Welcome to HTML</p>

7. Core Media and Linking Elements


Images
<img src="image.jpg" alt="Image description" width="300" height="200">
• src: Source path of image
• alt: Alternative text for screen readers
• width/height: Size
Links
<a href="https://example.com" target="_blank">Visit Site</a>
• href: URL of destination
• target="_blank": Opens in a new tab

8. Container Elements: <div> and <span>


<div> – Block-level container
Used for grouping large blocks of content, layouts, sections.
<div class="container">
<h2>Section Title</h2>
<p>Paragraph inside a div.</p>
</div>
<span> – Inline container
Used for inline styling or logic within text.
<p>Buy our <span style="color: red;">best-selling</span> product today!</p>

9. Semantic Core Elements (HTML5)


These help define meaningful page structure.
Tag Description
<header> Top of the page or section
<footer> Bottom or end of content
<nav> Navigation menu or links
<section> A thematic grouping of content
<article> Independent, self-contained block
<aside> Side notes or tangents
<main> Main content of the page
Example:
<main>
<article>
<h1>News Title</h1>
<p>News content goes here.</p>
</article>
</main>

10. Form Elements and Attributes (Overview)


Although detailed forms are covered later, here are core elements used:
Tag Purpose
<form> Container for form elements
<input> Input field
<textarea> Multi-line text input
<button> Clickable button
<label> Label for form fields
Attributes:
• type, name, value, placeholder, required, readonly, disabled

11. Accessibility and SEO Benefits


Using core elements semantically (such as <header>, <main>, <article>, etc.) makes the
content more understandable to:
• Search engines
• Screen readers (used by visually impaired users)
• Developers working collaboratively
It also improves:
• Page indexing
• Content navigation
• User experience

12. Summary
Core HTML elements and attributes are the foundation of every webpage. Mastering these
ensures that your web pages are:
• Well-structured
• Accessible
• SEO-friendly
• Easier to style and script
Key Takeaways:
• HTML elements define structure and content
• Attributes provide extra information
• Use semantic elements for clarity and accessibility
• Combine core elements with CSS and JavaScript for rich webpages

Attribute Groups in HTML

1. Introduction to HTML Attributes


In HTML, attributes provide additional information about elements. They are always
specified in the start tag of an element and written as name="value" pairs.
Example:
<a href="https://example.com" target="_blank">Visit</a>
In modern HTML (HTML5), many attributes are grouped into categories or groups based on
their functionality or which elements can use them. Understanding these attribute groups
helps in writing clean, semantic, and accessible HTML code.

2. Common Attribute Groups


HTML attributes can be grouped as follows:
Attribute Group Description
Global Attributes Can be used with all HTML elements
Event Attributes Used to handle user interaction via JavaScript
Form Attributes Specifically for form-related elements
Table Attributes Used in <table> elements
Image Attributes Specific to images (<img>)
Anchor Attributes Specific to hyperlinks (<a>)
Input Attributes Used in <input> fields
Media Attributes Used with <audio>, <video>, <source>
3. Global Attributes
Global attributes are available to all HTML elements. They help with styling, identification,
accessibility, and scripting.
Attribute Description
id Unique identifier
class Assigns CSS class(es)
style Inline CSS styling
title Tooltip text
lang Specifies language of content
hidden Hides the element
tabindex Controls tab order
contenteditable Makes element editable
accesskey Defines shortcut key for accessibility
draggable Specifies whether the element is draggable
Example:
<p id="note" class="highlight" title="Tooltip">This is a paragraph.</p>

4. Event Attributes
Event attributes help define JavaScript-based actions that occur in response to user
interactions, such as clicking, hovering, or typing.
Mouse Events
Attribute Description
onclick Triggers when clicked
ondblclick Triggers on double click
onmouseover Triggers when hovered
onmouseout Triggers when mouse leaves
Keyboard Events
Attribute Description
onkeydown When a key is pressed down
onkeyup When a key is released
onkeypress While the key is pressed
Form Events
Attribute Description
onchange When value of input changes
onsubmit When form is submitted
onreset When form is reset
onfocus When element gets focus
onblur When element loses focus
Example:
<button onclick="alert('Clicked!')">Click Me</button>

5. Form Attribute Group


These attributes apply to form elements like <form>, <input>, <textarea>, <select>, and
<button>.
Attribute Element Purpose
action <form> URL to send form data to
method <form> GET or POST
name Many Identifier for scripting
value <input> Default value
placeholder <input> Hint text
required <input> Makes field mandatory
disabled Any input Disables the field
readonly <input> Prevents editing
maxlength <input> Max character limit
pattern <input> Regex for input validation
Example:
<form action="/submit" method="post">
<input type="text" name="username" placeholder="Enter name" required>
</form>
6. Table Attribute Group
These attributes are used specifically with <table>, <tr>, <td>, <th>, and related elements.
Attribute Tag Purpose
border <table> Sets border thickness
cellpadding <table> Space inside cells
cellspacing <table> Space between cells
colspan <td>, <th> Merges cells horizontally
rowspan <td>, <th> Merges cells vertically
align <td>, <th> Aligns content inside cells
Example:
<table border="1">
<tr>
<td rowspan="2">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>

7. Image and Anchor Attribute Groups


Image (<img>) Attributes:
Attribute Description
src Source of the image
alt Alternative text for image
width Width of image
height Height of image
loading Lazy loading control
Example:
<img src="flower.jpg" alt="A flower" width="200">
Anchor (<a>) Attributes:
Attribute Description
href Destination URL
target Where to open the link (_blank, etc.)
download Prompts file download
rel Relationship type (nofollow, etc.)
Example:
<a href="https://example.com" target="_blank">Visit</a>

8. Input-Specific Attribute Group


Used only with <input> tags. These control behavior and validation.
Attribute Type
type text, email, password, checkbox
min, max Minimum/maximum numeric values
step Step size (for number inputs)
checked Pre-checks radio/checkbox
autocomplete Enables input suggestions
Example:
<input type="number" min="1" max="10" step="1">

9. Media Attribute Group


Used with <audio>, <video>, and <source> elements to control playback.
Attribute Element Description
src <source> Media file path
controls All Shows play/pause UI
autoplay All Starts playing automatically
loop All Repeats playback
muted All Starts with sound muted
poster <video> Placeholder image
Example:
<video src="movie.mp4" controls poster="thumb.jpg"></video>

10. Benefits of Understanding Attribute Groups


• Improves HTML readability
• Helps in debugging and editing web pages
• Promotes semantic and accessible web development
• Assists in CSS targeting using class, id, name, etc.
• Crucial for form handling, user input, and event control

11. Summary
Attribute groups in HTML help developers:
• Organize HTML code better
• Understand which attributes are valid for which elements
• Enhance functionality and user interactivity
• Maintain consistency and accessibility
Group Name Use Case Example
Global Used on any HTML element
Event JavaScript interactivity
Form Capturing user input
Image Adding images
Anchor Navigation and links
Media Embedding audio/video
Input Input validation and customization

Basic Links in HTML

1. Introduction to HTML Links


HTML links are essential for navigating between pages, downloading files, redirecting
users, and creating a connected structure across web resources. They are created using the
<a> (anchor) element, which is short for anchor tag.
The basic syntax of a hyperlink is:
<a href="URL">Link Text</a>
• href: The most important attribute, specifying the destination URL.
• Link Text: The visible clickable text.

2. Types of Links
There are different types of links that can be created in HTML:
Link Type Description
Absolute URL Link Links to external websites
Relative URL Link Links to internal files within the same domain
Email Link Opens the default mail client
Phone Link Initiates phone call on mobile devices
Downloadable File Link Provides direct download of a file
Bookmark Link Links to a specific part within the same web page
Example – Absolute Link:
<a href="https://www.google.com">Visit Google</a>
Example – Relative Link:
<a href="about.html">About Us</a>

3. The href Attribute


The href attribute is the Hypertext Reference which indicates the target location or resource.
• It can contain:
o A URL
o A file name
o An anchor ID within the same page
Example:
<a href="https://www.example.com">External Link</a>
<a href="contact.html">Internal Link</a>
<a href="#top">Back to Top</a>
4. Opening Links in New Tabs/Windows
Using the target attribute, you can control how the link opens.
Target Value Behavior
_self Opens in the same tab (default)
_blank Opens in a new tab/window
_parent Opens in the parent frame
_top Opens in the full body of the window
Example:
<a href="https://example.com" target="_blank">Open in New Tab</a>

5. Email and Telephone Links


Email Links (mailto:)
HTML allows users to click a link and open their email client.
<a href="mailto:[email protected]">Email Us</a>
You can also include:
<a href="mailto:[email protected]?subject=Feedback&body=Hello">Contact Us</a>
Telephone Links (tel:)
Useful for mobile users to initiate a phone call directly.
<a href="tel:+919876543210">Call Us</a>

6. Link Styling Using CSS


Links can be styled to make them visually appealing and indicate their state.
Default Link States:
State CSS Pseudo-class
Normal a:link
Visited a:visited
Hovered a:hover
Active a:active
Example CSS:
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: orange;
}
Result:
Links change color and behavior based on user interaction, improving usability.

7. Using Images as Links


You can embed an image inside an anchor tag to make it clickable.
Example:
<a href="https://example.com">
<img src="logo.png" alt="Visit Example" width="100">
</a>
• This method is widely used in navigation menus, ads, and banners.

8. Linking to a Specific Section on a Page (Bookmarks)


You can use the id attribute with an anchor tag to create bookmarks within a page.
Creating a Bookmark:
<h2 id="contact">Contact Us</h2>
Linking to the Bookmark:
<a href="#contact">Go to Contact Section</a>
This is useful for:
• Navigation menus
• Table of contents
• Long-form articles

9. Downloadable Links
Using the download attribute, you can provide direct download functionality.
Example:
<a href="brochure.pdf" download>Download Brochure</a>
• The download attribute tells the browser to download the file instead of opening it.
• Optional: You can specify the file name.
<a href="image.jpg" download="newimage.jpg">Download Image</a>

10. Best Practices for HTML Links


• Always use meaningful link text (avoid “click here”).
• Use title attributes to provide extra information:
<a href="help.html" title="Get Help">Help</a>
• Ensure links are accessible:
o Use clear colors
o Provide alt text for image links
o Ensure keyboard navigation is possible
• Avoid broken links – always test URLs.
• Use relative links within a website for easier deployment and maintenance.

11. Summary
Concept Example
Basic Link <a href="url">Text</a>
New Tab target="_blank"
Email mailto:[email protected]
Telephone tel:+911234567890
Bookmark/Anchor href="#section-id"
Download File download="filename"
Image Link <a><img src="..."></a>
Understanding basic links is the foundation of web navigation. Whether linking internal
pages, external resources, or files, mastering the use of the <a> tag and its attributes ensures a
user-friendly, accessible, and efficient web experience.

Creating Links with the <a> Element

1. Introduction
The <a> tag, or anchor tag, is one of the most powerful and widely used elements in HTML.
It allows you to create hyperlinks, which are fundamental to the web. By using the <a>
element, users can click text or images to navigate between webpages, download files, or
trigger communication features like emails or phone calls.
Basic Syntax:
<a href="URL">Link Text</a>
• href – the hyperlink reference (destination)
• Link Text – the clickable text visible to users

2. Types of Links Using <a> Element


The <a> tag can be used to create different types of links:
Type of Link Example Description
External Link <a Opens another website
href="https://www.google.com">Google</a>
Internal Link <a href="about.html">About</a> Links to another page in
the same website
Email Link <a Opens email client
href="mailto:[email protected]">Email</a>
Phone Link <a href="tel:+911234567890">Call Us</a> Initiates phone call on
mobile
File <a href="file.pdf" download>Download</a> Downloads a file
Download directly
Link
Anchor Link <a href="#top">Back to Top</a> Scrolls to a section in
the same page
3. Attributes of the <a> Element
The <a> tag supports several useful attributes:
a. href
Specifies the URL of the page the link goes to.
<a href="https://openai.com">Visit OpenAI</a>
b. target
Specifies where to open the link:
• _self – Default, opens in the same tab.
• _blank – Opens in a new tab or window.
• _parent – Opens in the parent frame.
• _top – Opens in the full window.
<a href="https://openai.com" target="_blank">OpenAI</a>
c. title
Gives a tooltip when the mouse hovers over the link.
<a href="about.html" title="Learn more about us">About</a>
d. download
Allows users to download a file.
<a href="document.pdf" download>Download PDF</a>

4. Using Images as Links


Instead of text, you can use an image inside the <a> tag.
Example:
<a href="https://example.com">
<img src="logo.png" alt="Example Logo" width="100">
</a>
• This is often used for logos or banners on web pages.
• The alt attribute improves accessibility.

5. Link States and Styling


Links change appearance based on their state using CSS pseudo-classes.
State Pseudo-class Description
Normal a:link Default appearance of a link
Visited a:visited After being clicked
Hover a:hover When the user hovers over a link
Active a:active When the link is being clicked
Example CSS:
a:link {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}

6. Anchors Within the Same Page (Bookmark Links)


The <a> tag can also be used to navigate within the same page using IDs.
Step 1: Create the Anchor Target
<h2 id="contact">Contact Section</h2>
Step 2: Create the Link to It
<a href="#contact">Jump to Contact Section</a>
• Useful for long pages, navigation menus, or table of contents.

7. Email and Telephone Links


Email Links
Start with mailto: and open the user's email client.
<a href="mailto:[email protected]">Contact Support</a>
Add subject and body:
<a href="mailto:[email protected]?subject=Help&body=Need Assistance">Email
Us</a>
Telephone Links
Start with tel: and initiate calls on mobile devices.
<a href="tel:+919876543210">Call Us</a>

8. Creating a Link That Opens a File


To allow users to download files, use the download attribute.
<a href="resume.pdf" download>Download Resume</a>
Specify a filename:
<a href="photo.jpg" download="profile_picture.jpg">Download Image</a>

9. Nesting and Validations


• Avoid nesting links inside each other – it is invalid HTML.
• Always use valid and accessible href values.
• Use descriptive text for better SEO and accessibility.

10. Security and Best Practices


Security Tips:
• Always validate and sanitize href URLs to avoid malicious redirects.
• Use rel="noopener noreferrer" with target="_blank" to prevent tab hijacking.
<a href="https://secure.com" target="_blank" rel="noopener noreferrer">Secure Site</a>
Best Practices:
• Avoid "Click Here" as link text; use meaningful context.
• Provide visual cues (e.g., underline, color).
• Test links to ensure they are not broken.
• Use CSS for better user interaction.

11. Summary Table


Feature Tag Example
Basic Link <a href="page.html">Link</a>
New Tab <a href="page.html" target="_blank">Link</a>
Tooltip <a href="page.html" title="Info">Link</a>
Image Link <a href="#"><img src="logo.png"></a>
Anchor/Bookmark <a href="#section">Go</a>, <h2 id="section">Target</h2>
Email <a href="mailto:[email protected]">Email</a>
Telephone <a href="tel:+123456789">Call</a>
Download <a href="file.zip" download>Download</a>

Advanced Email Links in HTML

1. Introduction to Email Links


HTML provides a special way to create links that allow users to send emails directly from
the webpage. These are called email links, and they are created using the <a> (anchor)
element with the mailto: protocol.
Basic Syntax:
<a href="mailto:[email protected]">Send Email</a>
When clicked, this link opens the default email client (like Outlook, Apple Mail, or Gmail)
with the recipient's email address pre-filled.

2. Components of an Email Link


The href attribute can include not just the email address but also other parameters to fill out
parts of the email like:
• Subject
• CC (Carbon Copy)
• BCC (Blind Carbon Copy)
• Body content
Basic Format with Parameters:
mailto:[email protected]?subject=SubjectText&body=BodyText
Use & to connect multiple parameters.

3. Adding Subject to Email


You can specify a subject line by adding the subject parameter.
Example:
<a href="mailto:[email protected]?subject=Feedback">Give Feedback</a>
When clicked, the email client opens with "Feedback" in the subject field.

4. Adding Body Text


You can pre-fill the body of the email message.
Example:
<a
href="mailto:[email protected]?body=I%20need%20help%20with%20my%20order.">
Send Support Request</a>
• %20 is used to represent a space (URL encoding).
• The body field is useful for templates or automatic messages.

5. Adding Subject and Body Together


You can combine both subject and body by joining them with &.
Example:
<a
href="mailto:[email protected]?subject=Product%20Enquiry&body=I%20am%20intereste
d%20in%20your%20services.">
Email Sales Team</a>
This will fill both the subject and message body.

6. Adding CC and BCC


• CC (Carbon Copy): Sends a copy to another recipient.
• BCC (Blind Carbon Copy): Sends a copy without showing the recipient to others.
Example with CC:
<a href="mailto:[email protected][email protected]">
Email with CC</a>
Example with BCC:
<a href="mailto:[email protected][email protected]">
Email with BCC</a>
Combined Example:
<a
href="mailto:[email protected][email protected]&[email protected]&subj
ect=Meeting&body=Please%20confirm%20attendance.">
Email Team</a>

7. Encoding Special Characters in Email Links


In a URL (including mailto: links), certain characters must be encoded:
Character URL Encoded
Space %20
@ %40
, %2C
: %3A
/ %2F
? %3F
& %26
= %3D
Without encoding, the link may not work properly in all browsers.

8. Opening Email Link in a New Tab


Although mailto: links typically open in the user’s email client, you can still use
target="_blank" for consistency with other links:
<a href="mailto:[email protected]" target="_blank">Contact Support</a>
However, the behavior depends on the user's email setup and device.

9. Styling Email Links with CSS


Just like other links, email links can be styled using CSS to match your website's design.
Example:
a[href^="mailto:"] {
color: green;
text-decoration: underline;
font-weight: bold;
}
• This selector targets all mailto: links using ^= (starts with).

10. Use Cases for Advanced Email Links


Use Case Description
Feedback or Contact Forms Pre-fill user queries in the subject and body
Customer Support Links Email addresses for complaints or queries
Job Applications Attach resumes and write a default subject line
Referral or Sharing Emails Send product links with pre-filled messages to friends
Newsletter Subscriptions Allow users to subscribe via email

11. Accessibility Tips


• Use clear, descriptive link text.
<a href="mailto:[email protected]">Email the Support Team</a>
• Avoid "Click here" links.
• Make sure email links are accessible via keyboard navigation.

12. Limitations of mailto: Links


• Depends on local email client: Some users may not have a default email app
configured.
• No file attachments: Cannot attach files automatically.
• Not trackable: Less trackable than form submissions.
• URL length limits: Long messages can get cut off.

13. Alternatives to mailto:


If mailto: links do not meet the requirement, consider these options:
• Use an HTML form to send messages through a server-side script (e.g., PHP,
Node.js).
• Use third-party services like Formspree, Google Forms, or Typeform.
• Provide contact details with an easy-to-copy email.
14. Security Tips for Email Links
• Avoid exposing raw email addresses to reduce spam:
o Use JavaScript encoding or obfuscation.
o Example:
<script>
document.write('<a href="mailto:' + 'user' + '@' + 'domain.com">Email Us</a>');
</script>
• Add CAPTCHA forms if using forms instead of email links.

15. Full Example: Complete Email Link


<a
href="mailto:[email protected][email protected]&[email protected]
m&subject=Website%20Help&body=Hello%2C%20I%20need%20assistance%20with%20y
our%20website.">
Contact Website Support
</a>
• Opens the email client
• Fills out the CC, BCC, subject, and message body

16. Summary
Feature Description
mailto: Opens default email application
subject Adds a pre-filled subject
body Adds a pre-filled message body
cc, bcc Sends copy to additional recipients
URL Encoding Required for special characters
CSS Styling Possible using attribute selectors
Security Tips Avoid exposing plain-text emails to scrapers

You might also like