Scribd
Upload
12 views17 pages

Class 02 - 075645

The document provides a comprehensive overview of HTML forms, input elements, and semantic HTML tags, detailing how to create forms for user input and the significance of using meaningful tags for accessibility and SEO. It includes examples of various input types, form validation, multimedia elements, global attributes, HTML entities, comments, and accessibility best practices. The document emphasizes the importance of using semantic HTML to enhance user experience and improve code readability.

Uploaded by

zubair47374
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views17 pages

Class 02 - 075645

The document provides a comprehensive overview of HTML forms, input elements, and semantic HTML tags, detailing how to create forms for user input and the significance of using meaningful tags for accessibility and SEO. It includes examples of various input types, form validation, multimedia elements, global attributes, HTML entities, comments, and accessibility best practices. The document emphasizes the importance of using semantic HTML to enhance user experience and improve code readability.

Uploaded by

zubair47374
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

🧾 HTML Forms and Input Elements

Forms are used to collect user input in a web page — such as registration info, feedback, login details,
etc.

🔸 <form> Tag

The <form> tag wraps all form elements.

<form action="submit.php" method="post">


<!-- form fields go here -->
</form>

Attribute Description

action URL where form data is sent

method GET or POST (GET shows data in URL, POST hides it)

🔸
Common <input> Types
Type Usage Example

text Single-line input <input type="text">

password Hidden characters <input type="password">

email Validates email format <input type="email">

number Numeric input <input type="number">

checkbox Multiple selections <input type="checkbox">

radio Single selection <input type="radio" name="gender">

submit Submit form <input type="submit">

reset Clear form fields <input type="reset">

file Upload file <input type="file">

date Pick a date <input type="date">

1
Type Usage Example

color Choose color <input type="color">

🔹 <label> Tag

Used to label inputs for better accessibility:

<label for="username">Username:</label>
<input type="text" id="username" name="username" />

🔹 <textarea> Tag

Used for multi-line text input (e.g. feedback):

<textarea rows="5" cols="30" placeholder="Your feedback here..."></textarea>

🔹
<select> and <option>

Used to create a dropdown list:

<label for="country">Choose country:</label>


<select id="country" name="country">
<option value="pk">Pakistan</option>
<option value="in">India</option>
<option value="us">USA</option>
</select>

🔹
<fieldset> and <legend>

Used to group related fields:

<fieldset>
<legend>Personal Info</legend>
<label for="name">Name:</label>
<input type="text" id="name" />
</fieldset>

✅
Form Validation (Basic HTML Validation)

2
Attribute Use

required Field must be filled before submitting

min / max Minimum/Maximum values for number or date

pattern Regular Expression for custom rules

Example with Validation:


<form>
<label for="username">Username:</label>
<input
type="text"
id="username"
required
pattern="[A-Za-z]{3,}"
title="Only letters, at least 3 characters"
/>

<label for="age">Age (18 to 60):</label>


<input type="number" id="age" min="18" max="60" required />

<label for="email">Email:</label>
<input type="email" id="email" required />

<input type="submit" value="Submit" />


</form>

📄
Full Form Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Example</title>
</head>
<body>
<h2>Registration Form</h2>

<form action="/submit" method="post">


<fieldset>
<legend>Personal Info</legend>

<label for="name">Full Name:</label><br />


<input type="text" id="name" name="name" required /><br /><br />

<label for="email">Email:</label><br />


<input type="email" id="email" name="email" required /><br /><br />

3
<label for="dob">Date of Birth:</label><br />
<input type="date" id="dob" name="dob" /><br /><br />

<label for="gender">Gender:</label><br />


<input type="radio" name="gender" value="male" checked /> Male
<input type="radio" name="gender" value="female" /> Female<br /><br />
</fieldset>

<fieldset>
<legend>Preferences</legend>

<label for="color">Favorite Color:</label>


<input type="color" id="color" name="color" /><br /><br />

<label for="file">Upload Picture:</label>


<input type="file" id="file" name="file" /><br /><br />

<label for="feedback">Feedback:</label><br />


<textarea
id="feedback"
name="feedback"
rows="4"
cols="40"
placeholder="Your feedback..."
></textarea
><br /><br />
</fieldset>

<input type="submit" value="Register" />


<input type="reset" value="Clear Form" />
</form>
</body>
</html>

🧾
HTML Semantic HTML5 Tags
🔹
What is Semantic HTML?

Semantic HTML uses meaningful tags to describe the purpose of the content. These tags help:

• Improve code readability


• Boost SEO
• Enhance accessibility for screen readers and search engines

🧱
Structure Elements in HTML5

4
Tag Purpose

<header> Represents the top section of a page or section (usually includes logo, title, nav)

<footer> Bottom section with copyright, contact info, links

<main> Contains the main content of the document (only one per page)

<section> A thematic grouping of content (like a chapter or a part)

<article> Independent, self-contained content like blog posts, news articles

<aside> Sidebars, advertisements, or related links – content indirectly related to the main content

<nav> Used to define navigation links (menus, navbar)

🧩 Example: Semantic Page Layout

<!DOCTYPE html>
<html>
<head>
<title>Semantic HTML Example</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</header>

<main>
<section id="home">
<h2>Welcome!</h2>
<p>This is the homepage of our website.</p>
</section>

<section id="services">
<article>
<h3>Web Development</h3>
<p>We build modern and responsive websites.</p>
</article>

<article>
<h3>Graphic Design</h3>
<p>Creative designs for logos, banners, and more.</p>
</article>

5
</section>

<aside>
<h4>Related Links</h4>
<ul>
<li><a href="#">HTML Tutorials</a></li>
<li><a href="#">CSS Guides</a></li>
</ul>
</aside>
</main>

<footer>
<p>&copy; 2025 My Website. All rights reserved.</p>
</footer>
</body>
</html>

🔸 Grouping Elements: <div> and <span>

Tag Purpose

<div> Block-level container — groups elements for styling or scripting

<span> Inline container — used to style parts of text

Example:
<div class="card">
<h2>Title</h2>
<p>
This is a <span style="color: red">highlighted</span> text inside a
paragraph.
</p>
</div>

🧠
Quick Summary:
Semantic Tag Meaning

<header> Top section of page/section

<footer> Bottom section

<main> Main content

<section> Content grouping

6
Semantic Tag Meaning

<article> Standalone piece

<aside> Side info

<nav> Navigation

<div> Block-level generic container

<span> Inline-level generic container

🧾 HTML Class 10: Media Elements

Multimedia in HTML allows you to embed audio, video, and other interactive content like external
webpages, animations, or PDFs into your site.

🎵
1. Audio Element

The <audio> tag is used to add audio/sound to a webpage.

🔹
Basic Syntax:

<audio controls>
<source src="sound.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

🔹
Important Attributes:

Attribute Description

controls Shows play/pause volume controls

autoplay Starts playing automatically

loop Plays audio repeatedly

muted Mutes the audio

preload Suggests how the audio should load (auto, metadata, none)

🎬
2. Video Element

7
The <video> tag is used to embed videos.

🔹 Basic Syntax:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

🔹 Key Attributes:
Attribute Description

controls Displays video controls (play, pause, volume)

autoplay Starts video automatically

loop Repeats video

poster Image to show before video starts

muted Starts video without sound

preload How browser loads the video before play

🎥
Example with poster:
<video controls poster="thumbnail.jpg">
<source src="sample.mp4" type="video/mp4" />
</video>

🌐
3. Embedding External Content
🔹
<iframe> — Embed another HTML page inside the current page.

<iframe src="https://www.example.com" width="600" height="400"></iframe>


🔹
<embed> — Used to embed interactive content (like PDFs, Flash, etc.)

<embed src="file.pdf" width="500" height="400" type="application/pdf">


🔹
<object> — Older way to embed multimedia (also used for PDFs, Flash)

<object data="file.pdf" type="application/pdf" width="500" height="400">


PDF not supported
</object>
💡
Quick Tips:

• Use MP3 for audio, MP4 for video (they are widely supported).

8
• Always provide a fallback message for unsupported browsers.
• Use iframe to embed maps, videos (like YouTube), or other pages.

✅ Summary Table
Element Used for Important Attributes

<audio> Sound/music controls, autoplay, loop, muted, preload

<video> Video clips controls, poster, loop, muted, autoplay

<iframe> External pages src, width, height

<embed> PDFs/Media src, type, width, height

<object> General objects data, type, width, height

🧾 HTML Attributes

HTML attributes provide extra information about elements. They are always specified inside the opening
tag, and usually come in name="value" pairs.

🔹
Global Attributes

Global attributes can be used on any HTML element.

Description Example
Attribute

id Unique identifier for an element <p id="intro">Hello</p>

Groups elements for styling or


class <div class="card">Box</div>
JavaScript

<a href="#" title="Go to


title Tooltip text when you hover
home">Home</a>

style Inline CSS styles <h1 style="color:blue;">Heading</h1>

lang Declares language <html lang="en">

Custom data attributes (used in


data-* <div data-user="123">User</div>
JavaScript)

9
💡 Examples of Global Attributes
<p
id="welcome"
class="highlight"
title="Welcome message"
style="font-size: 18px"
>
Welcome to my website!
</p>
<button data-user-id="42">Click Me</button>

🔸 Inline vs. Block-level Elements


🟢 Inline Elements:

• Don’t start on a new line


• Only take up as much width as needed
• Used within lines of text

Examples: <span>, <a>, <b>, <img>, <i>, <strong>

<p>This is <strong>important</strong> text.</p>


🔷
Block-level Elements:

• Start on a new line


• Take up full width
• Can contain other block/inline elements

Examples: <div>, <p>, <h1>, <ul>, <table>

<div>
<h2>Block Title</h2>
<p>Block paragraph inside div.</p>
</div>

📋
Summary Table
Concept Explanation

Global Attributes Work on any element

Inline Elements Flow with text, don’t break lines

Block Elements Break onto a new line, full width

10
🧾 HTML Class 12: HTML Entities

🔹 What are HTML Entities?


HTML entities are used to display reserved characters (like <, >, &) or special characters (like ©, ®,
non-breaking spaces, etc.) in the browser.

They always start with an ampersand & and end with a semicolon ;.

🔹 Why Use HTML Entities?

Some characters like <, >, and & are part of HTML syntax. To display them as normal text (instead of
being interpreted by the browser), we use entities.

📋 Common HTML Entities

Character Entity Code Description

(space) &nbsp; Non-breaking space

< &lt; Less than

> &gt; Greater than

& &amp; Ampersand

" &quot; Double quote

' &apos; Apostrophe / Single quote

© &copy; Copyright

® &reg; Registered trademark

™ &trade; Trademark

€ &euro; Euro symbol

₹ &#8377; Indian Rupee symbol

✓ &#10003; Check mark

✏
Examples in Code

11
<p>10 &lt; 20 is true.</p>
<p>Use &quot;double quotes&quot; and &apos;single quotes&apos; properly.</p>
<p>&copy; 2025 MyCompany. All rights reserved.</p>

Output:

10 < 20 is true.
Use "double quotes" and 'single quotes' properly.
© 2025 MyCompany. All rights reserved.

🧠 Tips:

• Use &nbsp; to prevent line breaks between two words.


• Use &lt; and &gt; when showing code examples.

✅ Summary

• HTML Entities are used to display characters that are reserved in HTML.
• They help prevent misinterpretation by the browser.
• Always start with & and end with ;.
🧾
HTML Comments
🔹
What Are HTML Comments?

HTML comments are notes or explanations that you write inside your HTML code but are not displayed
on the web page.
🧩
Syntax of a Comment:
<!-- This is a comment -->

Everything inside <!-- and --> will be ignored by the browser.

🎯
When and Why to Use Comments
Purpose Example
🔍
<!-- This section handles the user profile -
Explain complex code
->
✅

Mark TODOs or future updates <!-- TODO: Add responsive design -->

12
Purpose Example

<!-- <p>This paragraph is hidden for now</p>


🚫 Temporarily disable code -->

🧑💻 Help team members understand the <!-- Navigation bar starts here -->
code

✏ Example in Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Comments</title>
</head>
<body>
<!-- This is the main heading -->
<h1>Welcome to My Website</h1>

<!-- Below is a paragraph -->


<p>This is a sample paragraph.</p>

<!-- <p>This is hidden and won't show up on the page.</p> -->


</body>
</html>

✅
Summary

• Comments are not shown on the web page.


• Useful for documentation, debugging, and team collaboration.
• Syntax: <!-- your comment here -->
🧾
Accessibility Basics in HTML
🔹
What is Accessibility (a11y)?

Accessibility means designing web pages so that everyone, including people with disabilities, can
easily use and navigate them — using screen readers, keyboard-only navigation, or assistive
technologies.

📸
1. alt Text for Images

• The alt attribute provides alternative text for images.


• Helps visually impaired users understand what the image is about.
• Also useful when the image fails to load.

13
✅ Good Example:
<img src="dog.jpg" alt="Golden retriever playing in the park">

❌ Bad Example:
<img src="dog.jpg">

(No alt means screen readers can't describe the image.)

🧱 2. Using Semantic Tags for Screen Readers

Semantic HTML tags describe the structure and meaning of web content, making it easier for assistive
technologies to read and understand the page.

✨ Semantic Tags Include:

Tag Purpose

<header> Page or section header

<nav> Navigation links

<main> Main content

<section> Logical section of content

<article> Independent article or blog

<aside> Sidebar or extra content

<footer> Page or section footer

Example:
<main>
<article>
<h2>How to Bake a Cake</h2>
<p>Follow these simple steps to bake a cake.</p>
</article>
</main>

Screen readers can understand this better than just using <div> and <span> everywhere.

🏷
3. Introduction to ARIA Attributes

14
ARIA = Accessible Rich Internet Applications
ARIA attributes provide extra information to assistive technologies.

🔰 Just an Intro — Here are a few common ARIA attributes:

Attribute Use

aria-label Adds a label for elements (especially icons)

aria-hidden="true" Hides content from screen readers

role="button" Tells screen readers this is a button

Example:
<button aria-label="Close">X</button>

✅ Summary

Topic Purpose

alt Text Describes images for screen readers

Semantic Tags Helps structure content for accessibility

ARIA Adds extra meaning for assistive tech

🧾
HTML Best Practices

Writing clean and well-structured HTML is important for:

• Better readability
• Easier debugging
• Improved collaboration
• Better SEO and accessibility

🔹
1. Indentation and Formatting
➡
Always indent nested elements properly. This helps you (and others) understand the structure of your
code.
❌
Bad Example:

<html><body><h1>Title</h1><p>Paragraph</p></body></html>
✅
Good Example:

15
<html>
<body>
<h1>Title</h1>
<p>Paragraph</p>
</body>
</html>

🛠 Use tools like VS Code to auto-format code using extensions like Prettier.

🔹 2. Keep Code Readable

• Use meaningful tag structure (<header>, <main>, <footer>, etc.)


• Use descriptive alt texts, comments, and spacing
• Avoid long lines — break them up where necessary
• Write consistent casing for attributes (lowercase preferred)

Example:
<!-- Navigation bar -->
<nav>
<ul>
<li><a href="#home">Home</a></li>
</ul>
</nav>

🔹
3. Avoid Deprecated Tags

Some tags are no longer supported in HTML5. Avoid using them.

❌ ✅
Deprecated Tag Use Instead

<center> CSS: text-align: center;

<font> CSS: font-family, font-size, etc.

<b> Prefer <strong> for meaning

<i> Prefer <em> for meaning

🔎
Focus on semantic HTML and use CSS for styling.

🔹
4. Validate Your HTML

16
Use the W3C HTML Validator to check your code for errors or warnings: https://validator.w3.org
👉

✅ It checks:

• Correct tag nesting


• Missing attributes
• Deprecated elements
• General syntax issues

✅ Summary
Best Practice Why It’s Important

Indentation Improves readability

Clean Code Easier to understand and edit

No Deprecated Tags Ensures modern, browser-safe code

Validation Helps catch errors early

17

You might also like