Scribd
Upload
6 views12 pages

HTML Intermediate Level

The document provides a comprehensive overview of semantic HTML elements, multimedia elements, forms, form validation, and SVGs & canvas in HTML. It explains the purpose and usage of various HTML tags, enhancing accessibility, SEO, and user experience. Additionally, it includes code examples for practical implementation of these concepts.

Uploaded by

rishicselab
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
6 views12 pages

HTML Intermediate Level

The document provides a comprehensive overview of semantic HTML elements, multimedia elements, forms, form validation, and SVGs & canvas in HTML. It explains the purpose and usage of various HTML tags, enhancing accessibility, SEO, and user experience. Additionally, it includes code examples for practical implementation of these concepts.

Uploaded by

rishicselab
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

Semantic HTML Elements

Semantic HTML refers to HTML elements that clearly describe their meaning
in a human- and machine-readable way. These tags help improve
accessibility, SEO, and code clarity by giving structure and context to the
content on a webpage.

📰 Article (`<article>`)
Represents self-contained content that could be independently
distributed or reused.
<article>
<h2>Breaking News</h2>
<p>This article contains the latest updates on the topic.</p>
</article>

📦 Section (`<section>`)
Defines a section in a document, such as a chapter or grouping of
content.
<section>
<h2>Our Services</h2>
<p>We offer web development, design, and SEO services.</p>
</section>

📌 Header (`<header>`)
Specifies a header for a document or section. Often includes
navigation or headings.
<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>

📞 Footer (`<footer>`)
Defines a footer for a document or section, typically including
contact info or links.
<footer>
<p>&copy; 2025 MyWebsite. All rights reserved.</p>
</footer>

👀 Aside (`<aside>`)
Contains content tangentially related to the main content, like
sidebars or tips.
<aside>
<h3>Did You Know?</h3>
<p>Semantic HTML improves accessibility and SEO.</p>
</aside>

🔍 Main (`<main>`)
Specifies the dominant content of the document, excluding headers,
footers, etc.
<main>
<h2>Welcome to Our Blog</h2>
<p>Here you will find all our latest articles and updates.</p>
</main>

📋 Nav (`<nav>`)
Defines navigation links used for navigating through the site.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>

🎬 HTML Multimedia Elements


HTML provides powerful multimedia elements that allow you to embed audio,
video, documents, and external content directly into web pages. These
elements enhance interactivity, accessibility, and user experience without
relying on plugins.
🔊 Audio (`<audio>`)
Used to embed audio content. Supports multiple sources for
compatibility and offers controls.
<audio controls>

<source src="audio.mp3" type="audio/mpeg" />

<source src="[Link]" type="audio/ogg" />

Your browser does not support the audio element.

</audio>

🎥 Video (`<video>`)
Embeds video content with controls, subtitles, and multiple source
formats for broad support.
<video width="600" controls>

<source src="movie.mp4" type="video/mp4" />

<source src="[Link]" type="video/ogg" />

Your browser does not support the video tag.

</video>

💬 Track (`<track>`)
Provides subtitles, captions, or descriptions for video/audio. Great
for accessibility.
<video width="600" controls>

<source src="movie.mp4" type="video/mp4" />

<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default />

</video>

📎 Source (`<source>`)
Allows defining multiple media sources (used inside `<audio>` and
`<video>`).
<audio controls>

<source src="audio.mp3" type="audio/mpeg" />

<source src="[Link]" type="audio/ogg" />

</audio>

📂 Embed (`<embed>`)
Embeds external content like PDFs or Flash (legacy). Modern use
includes PDFs and HTML files.
<embed src="[Link]" width="100%" height="500px" type="application/pdf" />

🧩 Object (`<object>`)
Embeds various types of media like HTML, PDF, Flash, or images.
More flexible than `<embed>`.
<object data="[Link]" type="application/pdf" width="100%" height="500">

<p>It appears you don't have a PDF plugin for this browser.</p>

</object>

🌐 Iframe (`<iframe>`)
Displays an external webpage inside the current page. Common for
maps, videos, etc.
<iframe src="[Link] width="100%" height="400" loading="lazy"
title="Example Site">

<p>Your browser doesn't support iframes.</p>

</iframe>

🔍 HTML Forms Deep Dive


📋 Form Structure
The <form> element wraps all form fields and defines the method
and action.
<form action="/submit" method="post">

<!-- form inputs -->

</form>

🎛 Fieldset & Legend


Use <fieldset> to group related fields and <legend> to label the
group.
<fieldset>

<legend>Personal Info</legend>

<label>Name: <input type="text" /></label>

</fieldset>

🚫 Disabled & Readonly


The 'disabled' attribute disables input; 'readonly' prevents editing
but allows selection.
<input type="text" value="Can't change" readonly />

<input type="text" value="Disabled" disabled />

✅ Required & Pattern Validation


Use 'required' to make a field mandatory and 'pattern' for regex
validation.
<input type="text" required pattern="[A-Za-z]+" title="Only letters allowed" />

📐 Min, Max, Step


Used with number, date, and range inputs to set constraints.
<input type="number" min="1" max="10" step="1" />
🧭 Autofocus, Autocomplete & Placeholder
Enhance user experience by controlling focus, suggestions, and
hints.
<input type="text" placeholder="Enter name" autocomplete="on" autofocus />

🔐 Hidden Inputs
Used to pass data that's not visible to the user.
<input type="hidden" name="userId" value="12345" />

📍 Input Labels & Accessibility


Always associate <label> with inputs using 'for' and 'id'.
<label for="email">Email:</label>

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

🔄 Reset vs Submit Buttons


'reset' clears the form; 'submit' sends it to the server.
<button type="submit">Send</button>

<button type="reset">Clear</button>

🧠 Custom Validation & onSubmit Event


Use JavaScript for advanced validations before form submission.
<form onsubmit="return validateForm()">

<!-- fields -->

</form>

✔️HTML Form Validation


✅ Required Field
Ensures the user must fill out the field before submitting the form.
<form>

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

<button type="submit">Submit</button>

</form>

🔢 Pattern Validation
Uses regular expressions to match the input pattern (e.g., zip code,
phone).
<form>

<label>ZIP Code: <input type="text" pattern="\d{5}" required /></label>

<button type="submit">Submit</button>

</form>

📏 Min & Max Attributes


Set minimum and maximum value restrictions for numeric or date
fields.
<form>

<label>Age: <input type="number" min="18" max="60" /></label>

<button type="submit">Submit</button>

</form>

📅 Date Range Validation


Limits date selection within a valid date range.
<form>

<label>Event Date: <input type="date" min="2025-01-01" max="2025-12-31" /></label>

<button type="submit">Submit</button>
</form>

📧 Custom Error Messages


Use JavaScript to display custom validation messages.
<form onsubmit="return validateForm()">

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

<span id="error" style="color:red"></span>

<button type="submit">Submit</button>

</form>

<script>

function validateForm() {

const email = [Link]('email');

const error = [Link]('error');

if (![Link]()) {

[Link] = 'Please enter a valid email address.';

return false;

return true;

</script>

🔁 Real-Time Validation with `oninput`


Provides instant feedback as the user types.
<form>

<input type="text" id="username" oninput="checkLength(this)" />

<span id="feedback" style="color:green"></span>

</form>

<script>

function checkLength(input) {
const feedback = [Link]('feedback');

if ([Link] < 5) {

[Link] = 'Too short';

} else {

[Link] = 'Looks good!';

</script>

🛠 Constraint API
Use JavaScript’s constraint validation API for dynamic checks.
<script>

const input = [Link]('input');

if (![Link]) {

// access [Link] to determine the type of error

[Link]([Link]);

</script>

🎨 SVGs & Canvas in HTML


🖼 Basic SVG Element
SVG (Scalable Vector Graphics) is used to draw vector-based
graphics directly in the browser.
<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

</svg>

📐 SVG Shapes
Common SVG shapes include `<circle>`, `<rect>`, `<ellipse>`,
`<line>`, `<polygon>`, and `<path>`.
<svg width="200" height="200">

<rect width="100" height="100" fill="blue" />

<line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="2" />

</svg>

✏️SVG with Text


You can add text within an SVG using the `<text>` element.
<svg width="200" height="60">

<text x="10" y="35" font-size="24" fill="black">Hello SVG</text>

</svg>

🔄 Animating SVG
Use SMIL or CSS animations to animate SVG shapes.
<svg width="120" height="120">

<circle cx="60" cy="60" r="10" fill="blue">

<animate attributeName="r" from="10" to="40" dur="1s" repeatCount="indefinite" />

</circle>

</svg>

🎨 Canvas Basics
The `<canvas>` element is used for drawing 2D graphics via
JavaScript.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#000;"></canvas>

<script>

const canvas = [Link]('myCanvas');

const ctx = [Link]('2d');


[Link] = 'red';

[Link](20, 20, 150, 50);

</script>

📈 Canvas Drawing (Lines & Shapes)


Draw lines, arcs, and complex shapes using the Canvas API.
<script>

const canvas = [Link]('myCanvas');

const ctx = [Link]('2d');

[Link]();

[Link](0, 0);

[Link](200, 100);

[Link]();

</script>

🌀 Canvas Animation
Create animations using requestAnimationFrame.
<script>

let x = 0;

function animate() {

const canvas = [Link]('myCanvas');

const ctx = [Link]('2d');

[Link](0, 0, [Link], [Link]);

[Link]();

[Link](x, 50, 20, 0, [Link] * 2);

[Link]();

x += 1;

requestAnimationFrame(animate);

}
animate();

</script>

You might also like