Scribd
Upload
14 views15 pages

HTML

Uploaded by

fowmila j
Copyright
© © All Rights Reserved
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
14 views15 pages

HTML

Uploaded by

fowmila j
Copyright
© © All Rights Reserved
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
You are on page 1/ 15

Unit:2 HTML

HTML : Introduction–Getting started–Creating and saving an HTML document–


Document Layout of HTML Page–HTML elements– Some other formatting Styles–
Hypertext Links.

HTML (HyperText Markup Language) is the core language for creating web pages. It provides the
foundation and structure for all content on the internet. Using HTML, we can define text, images, links,
tables, and multimedia elements, telling the browser how to display each item on the screen.
While HTML handles the layout and organization of a webpage, CSS (Cascading Style Sheets) is used to
style and design the page, and JavaScript adds interactive features. Together, these three technologies create
the look, feel, and functionality of modern websites.
 HTML is a markup language, not a programming language.
 It is used to label and organize content on web pages.
 HTML instructs web browsers on how to display text, images, links, and other elements.
 It is a static language, meaning it cannot create interactive features by itself.
 CSS can be added to HTML for styling (colors, layouts, fonts, etc.).
 JavaScript can be combined with HTML to add interactivity and dynamic behavior.
 Together, HTML, CSS, and JavaScript build modern, interactive, and visually appealing websites.

Getting Started with HTML


HTML Editor
 An HTML Editor is a software tool used to create and edit HTML code.
 It provides helpful features like syntax highlighting, tag auto-completion, and error detection to
make coding easier.
Types of HTML Editors
1. Text-Based Editors
o Allow users to write code directly.
o Provide features like syntax highlighting and code completion for better control.
o Examples: Sublime Text, Visual Studio Code, Brackets.
2. WYSIWYG (What You See Is What You Get) Editors
o Provide a graphical interface to design web pages visually.
o Automatically generate HTML code in the background.
o Examples: Adobe Dreamweaver, BlueGriffon.
Popular Free HTML Editors
1. Notepad – Simple and basic editor for beginners.
2. Brackets – Lightweight and beginner-friendly.
3. Sublime Text Editor – Fast, feature-rich with many plugins.
4. Atom – Open-source editor with collaboration features.
5. Visual Studio Code – Powerful, widely used by developers for HTML and other languages.
HTML Comments – Introduction
 HTML comments are annotations inside HTML code that don’t appear on the webpage.
 They help developers understand, organize, and maintain their code more easily.
 Although browsers ignore comments, they remain visible when viewing the page’s source code.
How to Add a Comment-The standard format is: <!-- Your comment goes here -->
Why Are Comments Useful?
 Clarify Code: Add explanations for sections of HTML for easier review later.
 Disable Code Temporarily: Hide parts of code without deleting them.
 Team Collaboration: Provide helpful notes for other developers working on the project.

Comment Descriptions Syntax

Single- The single-line comment is given inside the


<!-- comment -->
line ( <!-- comment --> ) tag.
Comment Descriptions Syntax

<!-- Multi
It follows the syntax of a single-line comment by adding
Multi-line Line
multiple lines in the comment.
Comment -->

Types of HTML Comments

HTML involves understanding its basic structure and how to create and view an HTML file.
1. Choose a Text Editor:
 Select a text editor for writing your HTML code. Options include simple text editors like Notepad (Windows)
or TextEdit (Mac), or more advanced code editors like Visual Studio Code, Sublime Text, or Notepad++, which
offer features like syntax highlighting.
2. Structure Your HTML Document:
 Every HTML document begins with a <!DOCTYPE html> declaration, specifying the document type.
 The entire document content is enclosed within the <html> tags.
 The <head> section contains metadata about the page, such as the title displayed in the browser tab (defined by
the <title> tag).
 The <body> section contains all the visible content of the webpage, such as headings, paragraphs, images, and
links.

Example of Basic HTML Structure:


<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to my page!</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
3. Add Content with HTML Tags:
 Use various HTML tags to structure and present your content within the <body>.
 Examples include:
o <h1>, <h2>, etc., for headings.
o <p> for paragraphs.
o <img> for images (with src attribute for the image path).
o <a> for links (with href attribute for the destination URL).
4. Save Your File:
Creating and Saving Your HTML Files
✅ 1. Open a Text Editor
 You can use:
o Basic editors: Notepad (Windows), TextEdit (Mac – set to plain text mode).
o Advanced editors: Visual Studio Code, Sublime Text, Notepad++ (better for coding).
✅ 2. Write Your HTML Code
Type a basic HTML structure into the editor:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first HTML webpage.</p>
</body>
</html>
✅ 3. Save Your File
📌 Important steps for saving:
 Click File → Save As…
 Choose a folder (e.g., Desktop or Documents).
 Type a file name (e.g., [Link]).
 In Notepad (Windows):
o Change Save as type → All Files.
o Use Encoding → UTF-8 (to support all languages).
 Press Save ✅
✅ 4. Open Your HTML File in a Browser
 Locate your saved file (e.g., [Link]).
 Double-click the file → it will open in your default web browser (Chrome, Firefox, Edge, etc.).
 ✅ Your first webpage is live on your computer!
✅ 5. Edit & Refresh
 Want to change something?
✔ Open the .html file again in your text editor.
✔ Make edits and Save.
✔ Go back to the browser and Refresh to see updates.

📌 Quick Tips
✅ Always save files with .html extension.
✅ Use a simple name like [Link] for your main page.
✅ Keep all images and related files in the same folder as your HTML file (easier to manage).
✅ Use UTF-8 encoding for best compatibility.
5. View in a Web Browser:
 Open your saved HTML file in a web browser (e.g., Chrome, Firefox, Safari) by double-clicking it or using the "Open
with" option. The browser will render the HTML code and display your webpage.

Document Layout of an HTML Page


Every HTML document follows a standard structure that helps browsers understand and display the webpage
correctly.
HTML pages are divided into two main sections: the HEAD (information about the page) and the BODY
(visible content).

1️<!DOCTYPE html> – Document Type Declaration


 Must be the first line in any HTML document.
 Tells the browser which HTML version is being used.
 For HTML5, we simply write:
<!DOCTYPE html>
 Ensures consistent rendering across different browsers.
2️<html> … </html> – Root Element
 The outermost tag that wraps all HTML code.
 Has an important attribute:
o lang → Specifies the page language for SEO and screen readers.
 Example:
<html lang="en">
<!-- Head and Body sections go here -->
</html>
3️<head> … </head> – The Head Section
 The head section contains metadata (information about the page, NOT displayed on the page).
 Important elements inside <head>:
o <title> → Sets the page title (seen in the browser tab).
<title>My First Webpage</title>
o <meta> → Provides information like character encoding, keywords, and description.
<meta charset="UTF-8">
o <link> → Links external files like CSS stylesheets or favicons.
<link rel="stylesheet" href="[Link]">
o <script> → Links JavaScript code for functionality.
<script src="[Link]"></script>

4️<body> … </body> – The Body Section


 Contains everything the user sees on the webpage.
 Includes:
o Headings: <h1> to <h6>
o Paragraphs: <p>
o Images: <img>
o Links: <a>
o Lists, tables, forms, videos, etc.
 Example:
<body>
<h1>Welcome!</h1>
<p>This is my first webpage.</p>
<img src="[Link]" alt="BCA Student">
</body>
5️Closing the HTML Document
 The <html> tag must always end with </html>.
 This signals the end of the document.
HTML element:-An HTML element is the core unit of any HTML document.
 It is made up of:
o Start tag (opening tag)
o Content (the data inside)
o End tag (closing tag)
 Elements are the building blocks of web pages, defining structure and meaning of content.
 Each element can represent different types of information like text, images, links, headings, or lists.
Example:- <p>This is a paragraph.</p>
Syntax:
<tagname >Your Contents... </tagname>
 HTML Element Code Example:
 In this example <p> is a starting tag, </p> is an ending tag and it contains some content between the
tags, which form an element
 <p> → Opening tag
 This is a paragraph. → Content
 </p> → Closing tag
✅ Together, these form the paragraph element.
Important Notes
 Some elements (like <img> or <br>) are self-closing and don’t need an end tag.
 Properly nesting elements keeps the HTML well-structured and error-free.
Key Points About HTML Elements
 Syntax:
o Opening tag: <tagname> – marks where content starts.
o Closing tag: </tagname> – marks where content ends.
o Content is placed between these tags.
 Case Sensitivity:
o HTML tags are not case-sensitive (<B> = <b>).
o Best practice: use lowercase tags for readability.
Nested HTML Elements
 Occur when one element is inside another.
 Create a hierarchical structure for better organization.
Example:
<html>
<head></head>
<body></body>
</html>
Here, <html> contains <head> and <body> — a nested structure.
<!DOCTYPE html>
<html>
<head> <title>BCA Student Details</title>
</head>
<body style="text-align: center">
<h1>BCA Student Details</h1>
<p>Information of BCA student</p>
<h2>Student Information</h2>
<p><b>Name:</b> Anu</p>
<p><b>Roll No:</b> 2422J119</p>
<p><b>Department:</b> BCA</p>
</body></html>

Types of HTML Elements


In HTML, elements are generally divided into two main categories depending on how they appear in the layout:
block-level elements and inline elements.
1. Block-Level Elements – These elements usually begin on a new line and extend across the full width of their
parent container, no matter how much content they hold. As a result, they stack one below the other vertically.
Block-level elements can include other block-level elements as well as inline elements inside them. Some
common block-level elements are:
Examples include ;- <div>, <p>, headings like <h1> to <h6>, lists such as <ol> and
<ul>, tables with <table>, forms with <form>, and semantic elements like <section>,
<article>, <nav>, <aside>, <header>, and <footer>.
Block-Level Elements with Details and Examples
<div>
A versatile container used to group other HTML elements together. It has no semantic meaning on its own but
is widely used for styling or layout purposes with CSS.
Example:-
<div style="background-color: lightgray; padding: 10px;">
<p>This is inside a div container.</p>
</div>
<p>
Defines a paragraph of text. Browsers usually add some margin before and after to separate paragraphs.
Example: <p>This is a paragraph of text.</p>
<h1>, <h2>, ..., <h6>
These are heading tags used to create headings of different importance levels. <h1> is the highest (or most important)
level, and <h6> is the lowest. They help with document structure and SEO.
Example:
<h1>Main Title</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<ol>, <ul>
<ol> defines an ordered (numbered) list, and <ul> defines an unordered (bulleted) list. They are used to group related
items.
Example:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>

<ul>
<li>Bullet one</li>
<li>Bullet two</li>
</ul>
<table>
Used to create a table displaying data in rows and columns. It typically contains <tr> (table row), <th> (table header),
and <td> (table data) elements.
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
</tr>
</table>

<form>
Defines a form for user input. It can include input fields like text boxes, buttons, checkboxes, and more, and is
used to collect data that can be sent to a server.
Example:
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>

Detailed Explanation of Semantic Tags


✅ 1️⃣ <header>
 The <header> element represents the introductory section of a webpage or a section within it.
 It usually contains the website title, logo, and primary navigation links that appear at the top.
 It helps browsers and assistive technologies understand where the start of the page or section begins.
✅ 2️⃣ <nav>
 The <nav> element is used to define a block of navigation links on a webpage.
 It contains the major links for moving around the site, such as Home, About, Services, or Contact.
 This tag helps search engines and screen readers identify which links are for navigating the website.
✅ 3️⃣ <main>
 The <main> tag represents the main and unique content of the <body> of a webpage.
 It excludes items that repeat across pages like the header, footer, and navigation menus.
 Only one <main> element should appear in a webpage to indicate the core content area.
✅ 4️⃣ <section>
 The <section> element is used to group related content together within the main part of a webpage.
 Each section typically has its own heading to describe the content theme.
 For example, a page may have separate <section> tags for Services, Team, or Testimonials.
✅ 5️⃣ <article>
 The <article> element represents self-contained content that can stand alone or be shared
independently.
 Examples include blog posts, news stories, or product descriptions.
 Each <article> is treated as an independent unit, often with its own heading and content.
✅ 6️⃣ <aside>
 The <aside> element is used for content that is related to the main content but not essential to it.
 It is often used for sidebars, advertisements, callouts, or additional information.
 This tag signals that the information inside it is supporting the main topic.
✅ 7️⃣ <footer>
 The <footer> element defines the footer section for a webpage or for a specific section of content.
 It commonly contains copyright notices, privacy policy links, contact details, or site credits.
 The <footer> is usually found at the bottom of the page or section.

Why Use Semantic Tags?


 Improves accessibility: Screen readers and assistive devices can better interpret the page structure.
 SEO benefits: Search engines can better understand the content hierarchy.
 Easier maintenance: Clear structure helps developers navigate and manage the code.
 Consistent styling: Easier to target elements with CSS.
What is SEO?
SEO stands for Search Engine Optimization. It’s the practice of improving a website so that it ranks
higher in search engine results like Google, Bing, or Yahoo. The better your SEO, the more likely people
will find your website when they search for related topics.
SEO Benefits of Semantic Tags
 Improved crawlability: Search engines can more easily parse your content.
 Better content understanding: Semantic tags provide context (like headings, articles, sidebars).
 Enhanced accessibility: Screen readers also benefit, making your site more user-friendly.
 Potential ranking boost: Well-structured content is favoured by search engines.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Semantic HTML</title>
</head>
<body>

<header>
<h1>My Simple Website</h1>
</header>

<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>

<main>
<section>
<h2>About Us</h2>
<p>We build simple, clean websites using HTML and CSS.</p>
</section>

<article>
<h2>Latest News</h2>
<p>Our new tutorial series on HTML5 starts next week!</p>
</article>

<aside>
<h3>Quick Links</h3>
<p>Visit our blog for more tutorials.</p>
</aside>
</main>
<footer>
<p>&copy; 2025 My Simple Website</p>
</footer>
</body>
</html>
 2. Inline Elements - Inline elements do not start on a new line; they appear on the same line as
adjacent content, as long as there is space. They only take up as much width as their content requires.
Inline elements are typically used within block-level elements to add content or style. Can be placed
inside block elements but usually don’t contain block elements themselves.
 Examples: <a>, <span>, <strong>, <em>, <img>, <code>, <b>, <i>, and many others.
Why Use Inline Elements?
 To style or emphasize parts of text without disrupting the flow.
 To insert images or links directly inside text.
 🔹 <strong>
 The <strong> tag is used to make text bold and mark it as important. Unlike the <b> tag, which only
changes the appearance, <strong> carries semantic meaning – it tells browsers, screen readers, and
search engines that this word or phrase has high importance. This is very useful for accessibility
because screen readers will emphasize the word by changing tone. For example, <strong>bold
text</strong> will display as bold text and will also be treated as highlighted information.

 🔹 <em>
 The <em> tag is used to apply emphasis to a word or phrase, typically displayed in italic. It is more than
just styling; it tells the browser and assistive technologies (like screen readers) to stress that part of the
text. This makes <em> important for conveying meaning in documents where tone matters. For example,
<em>important</em> will look like important and will be read with stress by a screen reader.

 🔹 <a>
 The <a> tag, also known as the anchor tag, is used to create hyperlinks to other webpages, sections
within the same page, or even downloadable files. It requires the href attribute to specify the URL and
can use the target attribute to control how the link opens (_blank opens in a new tab). Hyperlinks are
the backbone of the web because they connect documents and allow navigation. For example, <a
href="[Link] target="_blank">Visit Example</a> makes the text clickable and
opens [Link] in a new tab.

 🔹 <code>
 The <code> tag is used to display computer code snippets in a monospace font. It’s an inline tag,
meaning the code appears within a sentence without breaking the flow of text. This tag is very useful for
documentation, tutorials, or any page where you want to show small bits of code. For example,
<code>print("Hello")</code> will render as print("Hello").

 🔹 <kbd>
 The <kbd> tag is used to show keyboard inputs or user-entered commands. It’s displayed in a
monospace font, and it’s useful for instructions, like telling users what keys to press. Many websites use
<kbd> in tutorials or manuals, e.g., <kbd>Ctrl</kbd> + <kbd>C</kbd> for “copy”. This helps users
instantly recognize that the text represents a keyboard key or shortcut.

 🔹 <b>
 The <b> tag makes text bold but unlike <strong>, it does not carry importance – it’s purely styling. It
is often used for visual emphasis, like making key words stand out in a sentence without implying
semantic weight. For example, <b>Warning</b> will look bold but doesn’t signal “important” to screen
readers. It’s best used for stylistic emphasis, not for conveying importance.

 🔹 <i>
 The <i> tag makes text italic for stylistic purposes. Unlike <em>, it does not imply emphasis but is
often used for things like foreign words, technical terms, or names of works. For example,
<i>Amigos</i> will look like Amigos but doesn’t carry any special meaning for accessibility. It’s
mostly visual styling, not semantic emphasis.

 🔹 <u>
 The <u> tag underlines text. It was originally used for stylistic underlines, but in HTML5 it’s often used
to mark non-textual annotations (like spelling errors in some browsers). Because underlined text can
be confused with hyperlinks, it’s not commonly used for normal styling anymore. Still,
<u>underline</u> will visually underline the word “underline”.

 🔹 <small>
 The <small> tag makes text smaller than the surrounding text. It’s often used for fine print,
disclaimers, or side comments in documents. It doesn’t carry much semantic meaning but is useful for
showing information that should look less prominent. For example, <small>Terms and conditions
apply.</small> will appear in a smaller font.
 🔹 <sub>
 The <sub> tag displays subscript text – text that appears below the baseline. It’s commonly used for
chemical formulas, math expressions, and scientific notation. For example, H<sub>2</sub>O displays as
H₂O. This is very important for correct scientific formatting.

 🔹 <sup>
 The <sup> tag displays superscript text – text that appears above the baseline. It’s useful for
exponents, ordinal indicators (like 1ˢᵗ, 2ⁿᵈ), and references. For example, x<sup>2</sup> appears as x².
Like <sub>, it’s crucial in academic and technical writing.
 To keep content semantically meaningful and accessible.
<!DOCTYPE html>
<html lang="en">
<head>

<title>Inline Elements Demo</title>


</head>
<body>
<h1>Inline Elements Demo</h1>
<p>This is a paragraph using <strong>strong</strong> (important bold) and <b>bold</b> (just bold style).</p>
<p>Here is <em>emphasis</em> (italic with meaning) and <i>italic</i> (just styling).</p>
<p>Click this <a href="[Link] target="_blank">link</a> to visit [Link].</p>
<p>Here is a line of <code>inline code</code> and <kbd>Ctrl + C</kbd> to copy text.</p>
<p>We can also <u>underline</u> text and show <small>small print text</small>.</p>
<p>Chemistry example: Water is written as H<sub>2</sub>O.</p>
<p>Math example: Square of x is written as x<sup>2</sup>.</p>
</body>
</html>

What You’ll See in the Browser:


✅ Heading: “Inline Elements Demo” (large bold title)
✅ Paragraph 1: Shows the difference between <strong> (important bold) and <b> (just bold).
✅ Paragraph 2: Shows the difference between <em> (emphasized italic) and <i>
(just italic).
✅ Paragraph 3: A clickable link that opens in a new tab.
✅ Paragraph 4: Shows inline code (monospace font) and keyboard input formatting
(Ctrl + C).
✅ Paragraph 5: Demonstrates underline and small print text.
✅ Paragraph 6: Shows H₂O using <sub>.
✅ Paragraph 7: Shows x² using <sup>.

Empty Elements in HTML (Void Elements)


✅ Definition:
Empty elements are HTML elements that don’t have any content and therefore don’t need a closing tag.
They perform a specific function, like adding an image, line break, or metadata, without wrapping text or
other elements.
✅ Examples:
 <br> → Inserts a line break
 <img> → Displays an image
 <hr> → Draws a horizontal line (thematic break)
 <meta> → Provides metadata about the HTML document
 <link> → Links external resources like CSS files
 <input> → Creates form input fields
✅ Key Points:
 They don’t need </tag> (no closing tag).
 In XHTML or older HTML versions, you might see them self-closed like <br /> or <img
src="..." />.
 In HTML5, just <br> or <img> is enough.
<!DOCTYPE html>
<html>
<head>
<title>Empty Elements Example</title>
<meta charset="UTF-8">
</head>
<body>
<h2>Empty Elements Demo</h2>
<p>This is a paragraph.<br>Here is a line break using<br>.</p>
<hr>
<img src="[Link]" alt="Sample Image">
<input type="text" placeholder="Enter your name">
</body>
</html>

What is <meta charset="UTF-8">?


✅ The <meta> tag provides metadata (data about the webpage) to the browser.
✅ When used with the charset attribute, it tells the browser which character encoding to use for rendering
the page.
🔤 What is Character Encoding?
 Character encoding is a system that maps numbers (binary codes) to characters.
 It tells the browser how to interpret and display text.
 Example: The letter A is stored as 65 in ASCII, but different symbols and languages need more codes →
that’s where UTF-8 comes in.
🌍 What is UTF-8?
 UTF-8 stands for Unicode Transformation Format – 8-bit.
 It can represent 1.1 million+ characters from all writing systems in the world.
 Supports:
✅ English alphabets
✅ Non-English languages (മലയാളം, हिंदी, ‫العربية‬, 中文)
✅ Special characters (€, ©, ™)
✅ Emojis (😀, 🎉)
📌 Why is <meta charset="UTF-8"> Important?
✅ Ensures your website displays all languages & symbols correctly.
✅ Prevents “mojibake” (garbled text like � when characters aren’t recognized).
✅ Is now the standard for all modern websites.
✅ Syntax
<meta charset="UTF-8">
👉 It’s a void (empty) tag → no closing tag needed.
🖥 Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UTF-8 Example</title>
</head>
<body>
<h2>Welcome!</h2>
<p>This page supports multiple languages and symbols:</p>
<p>English: Hello!</p>
<p>മലയാളം: ഹലോ!</p>
<p>Hindi: नमस्ते!</p>
<p>Emoji: 😀 🎉 ❤️</p>
</body>
</html>
✅ Result → All text and emojis will display correctly.
📊 Other Common <meta> Tags (for context)
Meta Tag Purpose
<meta charset="UTF-8"> Sets character encoding.
Adds a short page description (important
<meta name="description" content="Learn HTML basics.">
for SEO).
<meta name="keywords" content="HTML, CSS, web design"> Adds keywords for search engines.
<meta name="author" content="Fowmila"> Declares the author of the page.
<meta name="viewport" content="width=device-width,
initial-scale=1.0"> Makes web pages mobile-friendly.

What are HTML Attributes?


 HTML attributes provide extra information about an HTML element.
 They are written inside the opening tag and modify the behavior, appearance, or functionality of
elements.
Key Points
 ✔ Placement – Always in the opening tag.
✔ Syntax – Usually written as name="value".
✔ Case Sensitivity – HTML5 is not case-sensitive, but lowercase is preferred.
✔ Boolean Attributes – Some attributes don’t need a value; their presence alone is enough (e.g.,
checked, disabled, hidden).

Types of HTML Attributes


1️ Global Attributes
✅ Definition:
 Can be used on ANY HTML element.
 Add general behavior, styling, or extra info.
✅ Examples:
 id → Unique identifier for an element
 class → Groups elements for CSS/JS
 style → Inline CSS styling
 title → Tooltip on hover
 hidden → Hides the element from the page
✅ Example Code:
<p id="intro" class="highlight" style="color:blue;" title="BCA Student Info">Hello!</p>

2️ Specific Attributes
✅ Definition:
 Work only with certain HTML elements.
 Control special behavior for those tags.
✅ Examples:
 href → (for <a>) sets the link URL
 src → (for <img>, <script>, <video>) defines source file
 alt → (for <img>) adds alternative text
 action & method → (for <form>) define how form data is sent
✅ Example Code:
<a href="[Link] Example</a>
<img src="[Link]" alt="BCA Student">
<form action="/submit" method="POST">
<input type="text" name="name">
<input type="submit">
</form>
 Global Attributes – Can be applied to ANY HTML tag (e.g., id, class).
 Specific Attributes – Work with ONLY certain tags (e.g., href, src).
Detailed Notes – HTML Text Formatting Tags
1️<mark> – Highlighted Text
 Purpose: Highlights or marks important text with a yellow background by default.
 Why use it?
✔ Makes key points or keywords stand out in articles, tutorials, or notes.
✔ Helps users quickly spot relevant text.
 Best Practice: Avoid overusing it (too much highlighting loses meaning).
 Example:
<p>Please <mark>remember</mark> to submit the assignment.</p>
Output: Please <mark>remember</mark> to submit the assignment.

2️<del> – Deleted Text


 Purpose: Shows text that has been deleted or is no longer relevant.
 How it looks: A strikethrough line appears over the text.
 Usage:
✔ Editing or showing changes (e.g., “was $100 → now $80”).
✔ Often paired with <ins> to show updates.
 Example:
<p>Old price: <del>$500</del> New price: $400</p>
Output: Old price: $500 New price: $400

3️ <ins> – Inserted Text


 Purpose: Shows text that has been newly added.
 How it looks: Often underlined by default.
 Usage:
✔ Used for edits or legal documents to indicate what’s been inserted.
✔ Can be paired with <del> for revisions.
 Example:
<p>Offer <ins>extended</ins> until next Monday.</p>
Output: Offer <ins>extended</ins> until next Monday.

4️<abbr> – Abbreviation
 Purpose: Defines abbreviations or acronyms and gives them a tooltip with the full meaning.
 Why use it?
✔ Helps readers understand short forms.
✔ Improves SEO and accessibility (screen readers read full title).
 Example:
<p><abbr title="Bachelor of Computer Applications">BCA</abbr> is a degree course.</p>
Output: BCA → (hover shows “Bachelor of Computer Applications”).

5️<q> – Short Inline Quote


 Purpose: Displays short quotations inside a sentence.
 How it looks: Automatically adds quotation marks around the quoted text.
 Example:
<p>He said, <q>Learning HTML is fun.</q></p>
Output: He said, “Learning HTML is fun.”

6️<blockquote> – Long Quote


 Purpose: Used for long quotations (not inline).
 How it looks: Creates an indented block for the quote.
 Usage:
✔ Best for paragraphs or multiple lines of quoted text.
 Example:
<blockquote>
HTML is the foundation of every website.
Understanding it is the first step to becoming a web developer.
</blockquote>
Output: Shows an indented block of text.
7️<pre> – Preformatted Text
 Purpose: Displays text exactly as typed — including spaces and line breaks.
 How it looks: Uses a monospace font and keeps formatting.
 Usage:
✔ Best for code snippets, poetry, or text needing exact spacing.
 Example:
<pre>
Name: Anu
Course: BCA
College: XYZ College
</pre>
Output: Keeps the exact spacing and line breaks.
8️<sup> – Superscript
 Purpose: Displays text slightly above the normal text line.
 Usage:
✔ Exponents (x²), ordinal indicators (1ˢᵗ), references (like footnotes).
 Example:
<p>x<sup>2</sup> + y<sup>3</sup></p>
Output: x² + y³
9️<sub> – Subscript
 Purpose: Displays text slightly below the normal text line.
 Usage:
✔ Chemical formulas (H₂O), mathematical notation, footnotes.
 Example:
<p>H<sub>2</sub>O is water.</p>
Output: H₂O is water.
10️<bdo> – Bi-Directional Override
 Purpose: Overrides the text direction (LTR → RTL or vice versa).
 Usage: Useful for languages like Arabic or Hebrew.
 Example:
<bdo dir="rtl">This text is reversed.</bdo>
✅ Output: Text will display right to left.

🔗 Types of Hyperlinks in HTML – Detailed Explanation


HTML uses the <a> tag (anchor tag) to create hyperlinks. A hyperlink connects one resource to another – this
could be another webpage, a section on the same page, an email address, a phone number, or even a
downloadable file.
Behavior of Links (Default)
State Appearance
Normal Blue & underlined
Visited Purple
Hover Usually underlined (depends on browser)
Active Red (during click)

You can style these using CSS (:link, :visited, :hover, :active).

Default Behavior of Links (Anchor Tags)

HTML links are created using the <a> tag, and their behavior changes based on their state.
Here's how browsers typically style links by default:
State Appearance Description
Normal Blue & underlined The link hasn't been visited by the user.
Visited Purple & underlined The user has previously visited the linked URL.
Hover Usually underlined (sometimes color change) The mouse pointer is placed over the link.
State Appearance Description
Active Red (may vary) The moment the link is clicked but not released yet.

Below are the main types of hyperlinks with full explanations:

1️External Link
 An external link connects your webpage to another website outside your domain.
 This is the most common type of hyperlink.
 You can use the target="_blank" attribute to open the link in a new browser tab.
Example: <a href="[Link] target="_blank">Visit Wikipedia</a>
 When clicked, this will open the Wikipedia website in a new tab.

2️ Internal Link
An internal link connects pages within the same website or project folder.
It helps users navigate between different pages of your site.
Example: <a href="[Link]">About Us</a>
 When clicked, it opens the file [Link] from the same folder or website.

3️Anchor Link (Jump Link)


An anchor link takes the user to a specific section of the same webpage (or even another page).
You must first assign an id to the target element, and then link to that id with a #.
Example: <a href="#contact">Go to Contact Section</a>
<!-- Target Section -->
<h2 id="contact">Contact Us</h2>
 When clicked, the page scrolls directly to the “Contact Us” heading.

4️Email Link
An email link opens the user’s default email application (like Gmail or Outlook).
The mailto: attribute is used with the email address.
Example: <a href="[Link] us an email</a>
 When clicked, the email app opens with the recipient email pre-filled.
5️Phone Link
 A phone link is useful for mobile users because it opens the dialer with the number ready to call.
 The tel: attribute is used with the phone number.
Example: <a href="[Link] Us</a>
 On a mobile device, this opens the phone app and dials the number.
6 Downloadable Link
 A downloadable link lets users download a file instead of opening it in the browser.
 The download attribute forces the browser to save the file.
Example: <a href="files/[Link]" download>Download PDF</a>
* When clicked, the browser will download the file “[Link]”.

7️ Image as a Link
 Instead of text, you can use an image as a clickable link.
 Clicking on the image will take you to another page or site.
✅ Example:
<a href="[Link]
<img src="[Link]" alt="Click Me">
</a>
✔ When the user clicks the image, they are redirected to [Link].
🎨 Link Styling (CSS)
By default, links have different colors based on their state:
 🔵 Blue & underlined – Normal link
 🟣 Purple & underlined – Visited link
 🔴 Red – Active link (being clicked)
 ✏️You can change these with CSS pseudo-classes:
css
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: green; text-decoration: none; }
a:active { color: red; }
📌 Order matters! (Remember LoVe HAte → :link, :visited, :hover, :active)

🌐 Opening External Links in a New Tab


To open a website in a new tab, use:
<a href="[Link] target="_blank">Visit Google</a>
✅ Security Note:
Always add rel="noopener noreferrer" to prevent security risks (reverse tabnabbing):
<a href="[Link] target="_blank" rel="noopener noreferrer">Open Example</a>

📌 Why Are Hyperlinks Important?


 Hyperlinks are the foundation of the web – they connect websites, documents, and resources.
 They improve user navigation, SEO ranking, and interactivity.
 Knowing all types helps create professional, user-friendly websites.

*************************END********************

You might also like