Scribd
Upload
7 views59 pages

Complete HTML Tutorial

Chapter 1 introduces HTML as a markup language essential for structuring web content, with HTML5 being the current standard. It covers the history of HTML versions and how browsers interpret HTML files to display content. The chapter emphasizes the importance of proper syntax and structure in HTML documents.

Uploaded by

Sanket Pawar
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
7 views59 pages

Complete HTML Tutorial

Chapter 1 introduces HTML as a markup language essential for structuring web content, with HTML5 being the current standard. It covers the history of HTML versions and how browsers interpret HTML files to display content. The chapter emphasizes the importance of proper syntax and structure in HTML documents.

Uploaded by

Sanket Pawar
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

Complete HTML Tutorial – Chapter 1

Chapter 1: Introduction to HTML


1.1 What is HTML?

 HTML stands for HyperText Markup Language.


 It is not a programming language, but a markup language used to structure content
on the web.
 Every webpage is built using HTML to define headings, paragraphs, lists, images,
links, forms, and more.

Explanation:
Think of HTML as the skeleton of a webpage. CSS is like the skin and styling, and
JavaScript is the interactive behavior. HTML tells the browser what content exists and its
role, e.g., this is a heading, this is a paragraph, this is an image.

Example:

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>

1.2 History and Versions of HTML

1. HTML 1.0 (1993): First version, very basic, only text and links.
2. HTML 2.0 (1995): Standardized by IETF; added forms and tables.
3. HTML 3.2 (1997): Introduced scripting, applets, and more tags.
4. HTML 4.01 (1999): Added CSS support; widely used for many years.
5. XHTML (2000s): XML-based strict HTML; more rigid syntax.
6. HTML5 (2014–present): Modern standard; supports audio, video, canvas, semantic
tags, APIs.

Note: Always use HTML5 for modern websites.

1.3 How HTML Works with Browsers

 HTML files are plain text documents with the .html extension.
 A browser reads the HTML file and displays the webpage visually.
 HTML defines content and structure, but not styling (handled by CSS).
 Example: <h1> tells the browser this is a heading, <p> is a paragraph.

Example in Browser:

<h1>Welcome to My Website</h1>
<p>This paragraph is displayed below the heading.</p>

✅ Summary of Chapter 1

 HTML = structure of webpages.


 HTML5 is the current standard.
 Browsers interpret HTML to display content visually.

💻 Practice Exercises:

1. Create a file called chapter1.html.


2. Add a heading with your name.
3. Add a paragraph describing your hobby.
4. Open it in a browser and see the result.
Chapter 2: HTML Basics
2.1 Structure of an HTML Document
Every HTML page follows a standard structure:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph text.</p>
</body>
</html>

Explanation of each part:

1. <!DOCTYPE html>
o Declares the document type as HTML5.
o Helps the browser render the page correctly.
2. <html> … </html>
o The root element of an HTML document.
o Contains all other HTML elements.
3. <head> … </head>
o Contains metadata (not displayed directly on the page).
o Includes title, links to CSS, scripts, and meta information.
4. <meta charset="UTF-8">
o Sets the character encoding to UTF-8.
o Ensures special characters (like ü, é, ₹) are displayed correctly.
5. <title> … </title>
o Defines the title shown in the browser tab.
6. <body> … </body>
o Contains all the content displayed on the webpage: headings, paragraphs,
images, links, etc.

2.2 Syntax Rules


 Tags are enclosed in angle brackets < >.
 Most tags come in pairs: an opening tag <p> and a closing tag </p>.
 Tags must be properly nested:

<p>This is <strong>bold</strong> text.</p> <!-- Correct -->


<p>This is <strong>bold</p></strong> text. <!-- Incorrect -->

 Browsers try to fix errors, but correct syntax ensures consistent display.
2.3 Case Sensitivity, Whitespace, and Indentation
1. Case Sensitivity
o HTML is not case-sensitive, but lowercase is best practice.
o Example: <P> = <p> in HTML, but use <p>.
2. Whitespace
o Spaces, tabs, and new lines are ignored by the browser.
o Use whitespace for readability.
3. Indentation
o Indent nested tags to make your code easier to read.
o Example:

<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph text</p>
</body>
</html>

2.4 Simple Example Page


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Basics Example</title>
</head>
<body>
<h1>Welcome to HTML Basics</h1>
<p>This is a paragraph explaining the basics of HTML structure.</p>
<p>Remember to always close your tags and indent properly!</p>
</body>
</html>

Explanation:

 <h1>: Main heading.


 <p>: Paragraph text.
 Tags are properly nested and indented.

✅ Summary of Chapter 2

 Every HTML page has a standard structure: <!DOCTYPE>, <html>, <head>, <body>.
 Proper syntax, nesting, and indentation is important.
 Lowercase tags and UTF-8 charset are best practices.

💻 Practice Exercises:

1. Create a file chapter2.html.


2. Add a <title> of your choice.
3. Add two headings <h1> and <h2> with some text.
4. Add two paragraphs explaining your favorite hobby.
5. Open it in a browser and check if everything displays correctly.
Chapter 3: HTML Elements and Tags
3.1 What is an HTML Element?
 An HTML element is a building block of a webpage.
 It consists of:
1. Opening tag – e.g., <p>
2. Content – e.g., This is a paragraph.
3. Closing tag – e.g., </p>

Example:

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

 Here, <p> is the opening tag, </p> is the closing tag, and This is a paragraph element. is the
content.

Note: Some elements do not have content and are self-closing (e.g., <img>, <br>).

3.2 What is an HTML Tag?


 Tags are the names inside the angle brackets (< >).
 They define the purpose of the element.
 Opening tag: <h1>
 Closing tag: </h1>

Example:

<h1>Welcome to HTML</h1>

 <h1> indicates this text is a main heading.

3.3 What are Attributes?


 Attributes provide additional information about an element.
 Syntax: attribute="value" inside the opening tag.

Example:

<p id="para1" class="text">This is a paragraph with attributes.</p>

 id="para1" → Unique identifier.


 class="text" → Group of similar elements.
Common Attributes: id, class, title, style, lang, dir, data-*

3.4 Block-Level vs Inline Elements


Block-level elements:

 Start on a new line and take full width.


 Examples: <div>, <p>, <h1>–<h6>, <section>, <article>

Example:

<h1>Heading</h1>
<p>This is a paragraph.</p>

Inline elements:

 Do not start on a new line; only take as much space as needed.


 Examples: <span>, <a>, <strong>, <em>

Example:

<p>This is <strong>bold</strong> and <em>italic</em> text.</p>

3.5 Empty / Self-Closing Tags


 Some elements do not need a closing tag.
 Examples: <br>, <hr>, <img>, <input>, <meta>, <link>

Example:

<p>Line one.<br>Line two after a line break.</p>


<img src="image.jpg" alt="Sample Image">

Note:

 HTML5 allows no slash (<br>), but XHTML required <br />.


 Always include alt in <img> for accessibility.

3.6 Examples of Common HTML Elements


<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph explaining HTML elements.</p>
<a href="https://example.com" target="_blank">Visit Example</a>
<img src="logo.png" alt="Logo Image">
<br>
<hr>
<span>This is inline text.</span>
<div>This is a block container.</div>

Explanation:

 <h1> → Main heading


 <h2> → Subheading
 <p> → Paragraph
 <a> → Link
 <img> → Image
 <br> → Line break
 <hr> → Horizontal line
 <span> → Inline element
 <div> → Block container

✅ Summary of Chapter 3

 HTML elements = building blocks (opening tag + content + closing tag).


 Tags define the element type; attributes provide extra information.
 Block-level elements start on new lines; inline elements do not.
 Self-closing tags have no content and don’t require closing.

💻 Practice Exercises

1. Create a file chapter3.html.


2. Add headings (<h1>–<h3>) with some text.
3. Add two paragraphs with inline formatting (<strong>, <em>).
4. Add a link and an image with proper attributes.
5. Insert a line break <br> and a horizontal rule <hr>.
6. Open in a browser and observe how block and inline elements behave.
Chapter 4: Text Formatting Tags
4.1 Headings (<h1> to <h6>)
 HTML provides six levels of headings: <h1> is the largest, <h6> is the smallest.
 Headings are block-level elements and are important for SEO and page structure.

Example:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Heading</h3>
<h4>Subsection Heading</h4>
<h5>Smaller Heading</h5>
<h6>Smallest Heading</h6>

Explanation:

 <h1>should be used for the main title of the page.


 Only one <h1> per page is recommended for SEO.
 Headings help organize content and make it readable.

4.2 Paragraphs <p>


 Paragraphs are used to display blocks of text.
 They are block-level elements.

Example:

<p>This is a paragraph of text that explains the content of the webpage.</p>


<p>Another paragraph can be added below.</p>

Note:

 Browsers automatically add space before and after paragraphs.


 Use multiple <p> tags for separate text blocks.

4.3 Line Break <br> and Horizontal Rule <hr>


 <br>: Inserts a line break without starting a new paragraph.
 <hr>: Inserts a horizontal line, often used to separate sections.

Example:

<p>This is the first line.<br>This is the second line.</p>


<hr>
<p>Text after a horizontal line.</p>

Note:

 <br> is inline; <hr> is block-level.

4.4 Bold, Italic, Underline, Small, Strong, Emphasis


Tag Description Example
<b> Bold text (visual) <b>Bold Text</b>
<strong> Important text (semantic + bold) <strong>Important Text</strong>
<i> Italic text (visual) <i>Italic Text</i>
<em> Emphasized text (semantic + italic) <em>Emphasis</em>
<u> Underline <u>Underlined Text</u>
<small> Smaller text <small>Small Text</small>

Example:

<p>This is <b>bold</b> and <i>italic</i> text.</p>


<p>This is <strong>strong</strong> and <em>emphasized</em> text.</p>
<p>This is <u>underlined</u> text and <small>small text</small>.</p>

Tip:

 Use <strong> and <em> instead of <b> and <i> for semantic HTML, which helps
accessibility and SEO.

4.5 Superscript <sup> and Subscript <sub>


 <sup>: Displays text above the normal line (superscript).
 <sub>: Displays text below the normal line (subscript).

Example:

<p>H<sub>2</sub>O is water.</p>
<p>E = mc<sup>2</sup> is Einstein's equation.</p>

Explanation:

 Useful for chemical formulas, mathematical expressions, and footnotes.


4.6 Combined Example
<h1>Text Formatting Example</h1>
<p>This is a <strong>strong</strong> word and an <em>emphasized</em> word.</p>
<p>H<sub>2</sub>O is water and CO<sup>2</sup> is carbon dioxide.</p>
<p>Here is a line break:<br>Second line after break.</p>
<hr>
<p>This is <u>underlined</u> and <small>small text</small>.</p>

Explanation:

 Shows use of headings, paragraphs, bold/italic/underline, subscript/superscript, line


breaks, and horizontal rules.
 Combines multiple text formatting tags in a real-world scenario.

✅ Summary of Chapter 4

 Use headings <h1>–<h6> to structure content.


 Paragraph <p> for text blocks.
 <br> for line breaks, <hr> for horizontal separation.
 Use semantic tags like <strong> and <em> instead of <b> and <i>.
 Use <sub> and <sup> for subscript and superscript content.

💻 Practice Exercises

1. Create a file chapter4.html.


2. Add a heading <h1> with the page title.
3. Add three paragraphs with a mix of bold, italic, underlined, and small text.
4. Write a paragraph using subscript (e.g., chemical formula) and superscript (e.g.,
E=mc²).
5. Insert a line break <br> in one paragraph and a horizontal line <hr> between two
paragraphs.
6. Open the page in a browser and verify all formatting.
Chapter 5: HTML Attributes
5.1 What are HTML Attributes?
 Attributes provide additional information about an HTML element.
 They are always written inside the opening tag.
 Syntax:

<tagname attribute="value">Content</tagname>

Example:

<p id="para1" class="text">This is a paragraph with attributes.</p>

 id="para1" → Unique identifier for the element.


 class="text" → Group multiple elements for styling or scripting.

Note: Attributes enhance functionality, styling, and behavior of elements.

5.2 Global Attributes


 Global attributes can be used on any HTML element.
 Common global attributes:

Attribute Description Example


id Unique identifier <p id="para1">Text</p>
class Group of elements <div class="container">Content</div>
title Extra info shown on hover <span title="Info">Hover me</span>
style Inline CSS <p style="color:red;">Red text</p>
hidden Hides element <div hidden>Hidden Text</div>

Example:

<p id="firstPara" class="text" title="This is a paragraph" style="color:blue;">


This paragraph uses multiple global attributes.
</p>

5.3 Core Attributes


 Core attributes define language and text direction.
 Examples:
Attribute Purpose Example
lang Language of element <p lang="en">Hello</p>
dir Text direction <p dir="rtl">‫<ابحرم‬/p>

Explanation:

 Important for multilingual websites and accessibility.


 dir="rtl" → right-to-left text (e.g., Arabic, Hebrew).

5.4 Boolean Attributes


 Boolean attributes have only two states: true or false.
 If present, the attribute is true; if absent, it is false.
 Examples: disabled, readonly, checked, hidden, required

Example:

<input type="text" placeholder="Enter name" required>


<input type="checkbox" checked> Accept Terms
<button disabled>Submit</button>

Explanation:

 required → User must fill input.


 checked → Checkbox pre-selected.
 disabled → Button or input not clickable.

5.5 Data-* Attributes


 Custom attributes for storing extra data on HTML elements.
 Syntax: data-name="value"
 Can be accessed using JavaScript.

Example:

<div id="product1" data-id="101" data-category="electronics">


Laptop
</div>

 data-id="101" and data-category="electronics" are custom data attributes.

5.6 Combined Example


<p id="para1" class="highlight" title="Hover text" lang="en" dir="ltr">
This paragraph uses multiple attributes.
</p>

<input type="text" placeholder="Enter your name" required>


<input type="checkbox" checked> Subscribe to newsletter
<button disabled>Submit</button>

<div data-id="101" data-category="electronics">Laptop</div>

Explanation:

 Shows global, core, boolean, and custom data attributes.


 Demonstrates how attributes enhance functionality and accessibility.

✅ Summary of Chapter 5

 Attributes add extra information to elements.


 Global attributes: id, class, title, style.
 Core attributes: lang, dir.
 Boolean attributes: checked, disabled, readonly, required.
 Custom data attributes: data-* for JavaScript integration.

💻 Practice Exercises

1. Create a file chapter5.html.


2. Add a paragraph with id, class, title, style, lang, and dir attributes.
3. Add a text input with required and a checkbox with checked.
4. Add a button with disabled.
5. Add a <div> with data-id and data-category.
6. Test your page in a browser and inspect elements with DevTools.
Chapter 6: Links and Anchors
6.1 The <a> Tag
 The <a> tag creates hyperlinks in HTML.
 Syntax:

<a href="URL">Link Text</a>

 href → The destination URL.


 Link Text → The clickable text shown to users.

Example:

<a href="https://www.example.com">Visit Example</a>

 Clicking this opens https://www.example.com.

6.2 Attributes of <a> Tag


Attribute Description Example
href URL or link target <a href="page.html">Link</a>
target Where to open the link _blank, _self, _parent, _top
rel Relationship of linked page nofollow, noopener, noreferrer
title Tooltip text <a title="Click here">Link</a>

Example:

<a href="https://www.example.com" target="_blank" rel="noopener" title="Open Example in new tab">


Visit Example
</a>

 target="_blank" → Opens link in a new tab.


 rel="noopener" → Improves security when opening new tabs.

6.3 Internal Links


 Links within the same website or page.
 Example of linking to another page:

<a href="about.html">About Us</a>

 Example of bookmark link to a section on the same page:


<h2 id="contact">Contact Us</h2>
<a href="#contact">Go to Contact Section</a>

6.4 External Links


 Links to other websites.
 Must include the full URL:

<a href="https://www.wikipedia.org" target="_blank">Wikipedia</a>

6.5 Email Links


 Use mailto: in href to open email client:

<a href="mailto:[email protected]">Send Email</a>

6.6 Phone Links


 Use tel: to create clickable phone numbers (useful for mobile):

<a href="tel:+919876543210">Call Us</a>

6.7 Bookmark Links (Using id)


 Bookmark links navigate to a specific section in the same page.

<h2 id="services">Our Services</h2>


<a href="#services">Go to Services Section</a>

 Clicking the link scrolls the page directly to the id="services" section.

6.8 Combined Example


<h1>Links Example</h1>

<p>External Link: <a href="https://www.example.com" target="_blank"


rel="noopener">Example.com</a></p>

<p>Internal Link: <a href="about.html">About Us Page</a></p>

<p>Email Link: <a href="mailto:[email protected]">Send Email</a></p>

<p>Phone Link: <a href="tel:+919876543210">Call Us</a></p>

<h2 id="services">Our Services</h2>


<p><a href="#services">Jump to Services Section</a></p>

Explanation:

 Shows external, internal, email, phone, and bookmark links.


 Demonstrates href, target, rel, and id usage.
 Provides practical real-world examples.

✅ Summary of Chapter 6

 <a> tag is used for all types of links.


 href defines the destination; target controls
where the link opens.
 Internal links navigate inside the website, external links to other sites.
 mailto: and tel: are used for email and phone links.
 Bookmark links navigate to sections on the same page using id.

💻 Practice Exercises

1. Create a file chapter6.html.


2. Add an external link to any website with target="_blank".
3. Add an internal link to another HTML page.
4. Add a mailto: link for sending email.
5. Add a tel: link for a phone number.
6. Create a bookmark link that scrolls to a section in the same page.
7. Test all links in the browser.
Chapter 7: Lists in HTML
7.1 Ordered Lists <ol>
 Ordered lists are numbered lists.
 Each item is wrapped in <li> (list item) tags.

Syntax:

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Example:

<h2>Steps to Learn HTML</h2>


<ol>
<li>Understand basic structure</li>
<li>Learn text formatting tags</li>
<li>Practice links and images</li>
</ol>

Note:

 You can change the type of numbering using the type attribute:
o type="1" → numbers (default)
o type="A" → uppercase letters
o type="a" → lowercase letters
o type="I" → uppercase Roman numerals
o type="i" → lowercase Roman numerals

7.2 Unordered Lists <ul>


 Unordered lists are bulleted lists.
 Each item is also wrapped in <li> tags.

Syntax:

<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>

Example:

<h2>HTML Learning Resources</h2>


<ul>
<li>W3Schools</li>
<li>MDN Web Docs</li>
<li>FreeCodeCamp</li>
</ul>

Note:

 Bullets can be customized using CSS, e.g., list-style-type: circle;.

7.3 Description Lists <dl>


 Used for terms and descriptions.
 Consists of <dt> (definition term) and <dd> (definition description).

Syntax:

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>

<dt>JS</dt>
<dd>JavaScript programming language</dd>
</dl>

Explanation:

 <dt> → Term being defined


 <dd> → Description of the term

Note: Best for glossaries or definitions.

7.4 Nested Lists


 Lists can be nested inside other lists for hierarchy.

Example:

<h2>Web Development Topics</h2>


<ol>
<li>HTML
<ul>
<li>Basics</li>
<li>Elements & Tags</li>
</ul>
</li>
<li>CSS
<ul>
<li>Selectors</li>
<li>Box Model</li>
</ul>
</li>
<li>JavaScript</li>
</ol>

Explanation:

 <ul> nested inside <ol> → shows sub-topics as bullet points under numbered main
topics.
 Indentation improves readability.

7.5 Combined Example


<h1>HTML Lists Example</h1>

<h2>Ordered List</h2>
<ol type="I">
<li>Learn HTML Basics</li>
<li>Practice Tags</li>
<li>Build Small Projects</li>
</ol>

<h2>Unordered List</h2>
<ul>
<li>Books</li>
<li>Websites</li>
<li>Video Tutorials</li>
</ul>

<h2>Description List</h2>
<dl>
<dt>HTML</dt>
<dd>Markup language for webpages</dd>
<dt>CSS</dt>
<dd>Used for styling webpages</dd>
<dt>JavaScript</dt>
<dd>Programming language for interactivity</dd>
</dl>

<h2>Nested List</h2>
<ol>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>PHP</li>
</ul>
</li>
</ol>

Explanation:

 Demonstrates all three types of lists and nesting.


 Useful for organized content and hierarchy.

✅ Summary of Chapter 7

 <ol> → Ordered (numbered) list


 <ul> → Unordered (bulleted) list
 <dl> → Description (terms & definitions)
 <li> → List item for both <ol> and <ul>
 Lists can be nested for hierarchical representation.

💻 Practice Exercises

1. Create a file chapter7.html.


2. Add an ordered list of your learning steps.
3. Add an unordered list of your favorite websites.
4. Add a description list with 3 terms and their definitions.
5. Create a nested list showing frontend and backend technologies.
6. Test all lists in a browser and observe numbering and bullets
Chapter 8: Images and Multimedia
8.1 Images (<img> Tag)
 The <img> tag is used to display images on a webpage.
 Self-closing tag – does not require a closing tag.

Syntax:

<img src="image.jpg" alt="Description" width="300" height="200">

Attributes:

Attribute Description
src Path to the image file (relative or absolute)
alt Alternative text if image doesn’t load; improves accessibility
title Tooltip text shown on hover
width Width of the image in pixels
height Height of the image in pixels

Example:

<img src="flower.jpg" alt="Beautiful Flower" width="400" height="300" title="Flower Image">

Tip: Always include alt for SEO and screen readers.

8.2 Figure and Figcaption


 <figure> is a container for images, diagrams, or illustrations.
 <figcaption> adds a caption below or above the image.

Example:

<figure>
<img src="mountain.jpg" alt="Mountain View" width="500">
<figcaption>A beautiful mountain view</figcaption>
</figure>

Explanation:

 Helps semantically group images with captions.


 Useful for articles, blogs, and tutorials.
8.3 Audio (<audio> Tag)
 Used to embed audio files.
 Supports controls, autoplay, loop attributes.

Syntax:

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

Attributes:

 controls → Shows play/pause controls


 autoplay → Starts playing automatically
 loop → Repeats audio after finishing

Example with autoplay and loop:

<audio controls autoplay loop>


<source src="music.mp3" type="audio/mpeg">
Your browser does not support audio playback.
</audio>

8.4 Video (<video> Tag)


 Used to embed videos.
 Supports multiple sources and attributes like controls, autoplay, loop, muted.

Syntax:

<video width="640" height="360" controls>


<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Attributes:

 controls → Show video controls


 autoplay → Start automatically
 loop → Repeat video
 muted → Start video muted

Example:

<video width="640" height="360" controls autoplay muted loop>


<source src="promo.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
8.5 <source> Tag
 <source>defines multiple media sources for <audio> or <video>.
 Helps cross-browser compatibility with different formats.

Example:

<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

8.6 Embedding YouTube or External Videos (<iframe>)


 Use <iframe> to embed videos from YouTube or other platforms.

Example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"


title="YouTube video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen>
</iframe>

Explanation:

 src → Video URL


 allowfullscreen → Allows fullscreen mode
 frameborder="0" → Removes border around iframe

8.7 Combined Example


<h1>Images and Multimedia Example</h1>

<h2>Image Example</h2>
<img src="flower.jpg" alt="Flower" width="400" title="Flower Image">

<h2>Figure with Caption</h2>


<figure>
<img src="mountain.jpg" alt="Mountain" width="500">
<figcaption>Beautiful Mountain View</figcaption>
</figure>

<h2>Audio Example</h2>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>

<h2>Video Example</h2>
<video width="640" height="360" controls autoplay loop muted>
<source src="promo.mp4" type="video/mp4">
Your browser does not support video.
</video>

<h2>Embedded YouTube Video</h2>


<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video" frameborder="0" allowfullscreen>
</iframe>

Explanation:

 Demonstrates images, figure captions, audio, video, and embedded YouTube


video.
 Combines multiple multimedia elements in a practical webpage example.

✅ Summary of Chapter 8

 <img> → Displays images, always include alt.


 <figure> + <figcaption> → Semantically group images with captions.
 <audio> → Embed audio with controls, autoplay, loop.
 <video> → Embed video with multiple sources and attributes.
 <iframe> → Embed external content like YouTube videos.

💻 Practice Exercises

1. Create a file chapter8.html.


2. Add an image with src, alt, width, and title.
3. Create a figure with a caption for the image.
4. Embed an audio file with controls and loop.
5. Embed a video file with controls, autoplay, and muted.
6. Embed a YouTube video using <iframe>.
7. Test in browser and check functionality of all multimedia elements
Chapter 9: Tables in HTML
9.1 Introduction to Tables
 Tables are used to display data in rows and columns.
 Main table tags: <table>, <tr> (table row), <th> (table header), <td> (table data).

Basic Structure:

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

Explanation:

 <table> → Container for the table


 <tr> → Defines a row
 <th> → Header cell, usually bold and centered
 <td> → Standard cell with data

9.2 Table Headers, Captions, and Footers


 Caption: Provides a title for the table using <caption>.
 Thead, Tbody, Tfoot: Group table sections for better semantics.

Example:

<table border="1">
<caption>Student Marks</caption>
<thead>
<tr>
<th>Name</th>
<th>Math</th>
<th>Science</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>Mary</td>
<td>95</td>
<td>88</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>185</td>
<td>173</td>
</tr>
</tfoot>
</table>

Explanation:

 <caption> → Table title


 <thead> → Table header section
 <tbody> → Table body
 <tfoot> → Table footer (e.g., totals or summary)

9.3 Merging Cells: Colspan and Rowspan


 colspan → Merge cells horizontally.
 rowspan → Merge cells vertically.

Example:

<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Marks</th>
</tr>
<tr>
<td>John</td>
<td>Math</td>
<td>Science</td>
</tr>
<tr>
<td rowspan="2">Mary</td>
<td>Math</td>
<td>95</td>
</tr>
<tr>
<td>Science</td>
<td>88</td>
</tr>
</table>

Explanation:

 colspan="2" → Merges two columns


 rowspan="2" → Merges two rows
9.4 Styling Tables
 Tables can be styled using HTML attributes or CSS.

HTML Attributes Example:

<table border="2" cellpadding="10" cellspacing="5">


<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>John</td>
<td>90</td>
</tr>
</table>

 border → Border thickness


 cellpadding → Space inside cells
 cellspacing → Space between cells

CSS Styling Example:

<style>
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>

9.5 Combined Example


<h1>HTML Tables Example</h1>

<table border="1" cellpadding="8" cellspacing="5">


<caption>Employee Details</caption>
<thead>
<tr>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>HR</td>
<td>50000</td>
</tr>
<tr>
<td>Mary</td>
<td>IT</td>
<td>60000</td>
</tr>
<tr>
<td rowspan="2">Alex</td>
<td>Finance</td>
<td>55000</td>
</tr>
<tr>
<td>Marketing</td>
<td>58000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total Employees</td>
<td>4</td>
</tr>
</tfoot>
</table>

Explanation:

 Demonstrates caption, header, body, footer, colspan, rowspan, and styling.


 Shows practical real-world table for employee data.

✅ Summary of Chapter 9

 <table> → Container for table


 <tr> → Table row
 <th> → Header cell
 <td> → Data cell
 <caption> → Table title
 <thead>, <tbody>, <tfoot> → Semantically separate sections
 colspan → Merge columns
 rowspan → Merge rows
 Tables can be styled using HTML attributes or CSS.

💻 Practice Exercises

1. Create a file chapter9.html.


2. Create a table of 4–5 students with Name, Class, Marks.
3. Add a caption and separate thead, tbody, tfoot.
4. Merge the header for marks using colspan.
5. Merge rows for a student with multiple entries using rowspan.
6. Style the table with CSS for borders, padding, and background colors.
7. Open in a browser and check all features.
Chapter 10: Forms in HTML
10.1 Introduction to Forms
 Forms are used to collect user input on a webpage.
 The main container is the <form> tag.

Basic Syntax:

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


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

Attributes of <form>:

Attribute Description
action URL to send form data (e.g., server script)
method HTTP method (GET or POST)
enctype Encoding type (application/x-www-form-urlencoded, multipart/form-data)

Explanation:

 action → Where the form data is submitted


 method → How data is sent (GET appends to URL, POST sends securely in body)

10.2 Input Types


 <input> collects various types of data.

Type Purpose Example


text Single-line text <input type="text" name="username">
password Hidden input <input type="password" name="pass">
email Email validation <input type="email" name="email">
number Numeric input <input type="number" name="age">
date Calendar picker <input type="date" name="dob">
checkbox Multiple selections <input type="checkbox" name="subscribe">
radio Single selection <input type="radio" name="gender" value="male">
file File upload <input type="file" name="resume">
color Color picker <input type="color" name="favcolor">
hidden Hidden data <input type="hidden" name="token" value="123">
Example:

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


<label>Username: <input type="text" name="username"></label><br>
<label>Password: <input type="password" name="pass"></label><br>
<label>Email: <input type="email" name="email"></label><br>
<input type="submit" value="Submit">
</form>

10.3 Textarea, Select, and Options


10.3.1 <textarea>

 Multi-line text input.


Syntax:

<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

10.3.2 <select> and <option>

 Dropdown selection menu.


Example:

<label>Choose a country:
<select name="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
</label>

 <optgroup> → Group options under a label:

<select name="fruits">
<optgroup label="Citrus">
<option value="orange">Orange</option>
<option value="lemon">Lemon</option>
</optgroup>
<optgroup label="Berries">
<option value="strawberry">Strawberry</option>
<option value="blueberry">Blueberry</option>
</optgroup>
</select>

10.4 Labels, Fieldset, and Legend


10.4.1 <label>

 Associates a text label with an input.


 Improves accessibility.
<label for="username">Username:</label>
<input type="text" id="username" name="username">

10.4.2 <fieldset> and <legend>

 Groups related form elements.


 <legend> → Title for the fieldset.

<fieldset>
<legend>Personal Details</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age">
</fieldset>

10.5 Buttons and Input Buttons


 <button> → Customizable button

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Hello')">Click Me</button>

 <input> buttons

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


<input type="reset" value="Reset">
<input type="button" value="Click Me" onclick="alert('Hi')">

10.6 Useful Input Attributes


Attribute Description
required Field must be filled
readonly Cannot edit value
disabled Disabled field
placeholder Placeholder text
maxlength Maximum characters allowed
pattern Regex pattern for validation

Example:

<input type="text" name="username" placeholder="Enter username" required maxlength="10" pattern="[A-Za-


z0-9]+">

10.7 Combined Form Example


<h1>HTML Form Example</h1>
<form action="submit.php" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

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

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

<label>Hobbies:</label>
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="sports"> Sports<br><br>

<label for="country">Country:</label>
<select id="country" name="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select><br><br>

<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Enter your
message"></textarea><br><br>

<button type="submit">Submit</button>
<button type="reset">Reset</button>
</fieldset>
</form>

Explanation:

 Demonstrates all common input types, labels, fieldset, legend, textarea, select,
checkboxes, radio buttons, and buttons.
 Includes attributes like required and placeholder for validation.

✅ Summary of Chapter 10

 <form> → Container for all form elements


 Inputs: text, password, email, number, date, checkbox, radio, file, color, hidden
 <textarea> → Multi-line text
 <select> + <option> + <optgroup> → Dropdown lists
 <label> → Improves accessibility
 <fieldset> + <legend> → Groups related fields
 Buttons: <button> and <input>
 Useful attributes: required, readonly, disabled, placeholder, maxlength, pattern
💻 Practice Exercises

1. Create a file chapter10.html.


2. Create a form with personal information: name, email, gender, hobbies.
3. Include a dropdown for country and textarea for message.
4. Use fieldset and legend to group fields.
5. Add submit and reset buttons.
6. Test required, placeholder, and maxlength attributes.
7. Open in a browser and check all form functionalities.
Chapter 11: Semantic HTML
11.1 Introduction to Semantic HTML
 Semantic HTML uses elements that clearly describe their purpose.
 Makes code more readable, accessible, and SEO-friendly.
 Examples of non-semantic vs semantic:

Non-Semantic Semantic

<div> <header>, <footer>, <main>

<span> <article>, <section>, <nav>

Benefits of Semantic HTML:

 Improves SEO (search engines understand content better)


 Enhances accessibility for screen readers
 Makes code more readable and maintainable

11.2 Common Semantic Elements


11.2.1 <header>
 Represents the introductory content or navigation for a page or section.
 Usually contains logo, title, or navigation links.

Example:

<header>
<h1>My Website</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</nav>
</header>

11.2.2 <footer>
 Represents the footer content of a page or section.
 Usually contains contact info, copyright, or social links.

Example:
<footer>
<p>&copy; 2025 My Website</p>
<a href="contact.html">Contact</a>
</footer>

11.2.3 <main>
 Represents the main content of the document.
 Only one <main> per page is allowed.

Example:

<main>
<h2>Welcome to My Website</h2>
<p>This is the primary content for users.</p>
</main>

11.2.4 <section>
 Represents a thematic grouping of content.
 Often has its own heading.

Example:

<section>
<h2>Services</h2>
<p>We provide web development and design services.</p>
</section>

11.2.5 <article>
 Represents independent content that can stand alone.
 Ideal for blog posts, news articles, or forum posts.

Example:

<article>
<h2>HTML Tutorial</h2>
<p>This article explains the basics of HTML.</p>
</article>

11.2.6 <aside>
 Represents sidebar content or tangential info.
 Often contains ads, links, or supplementary info.
Example:

<aside>
<h3>Related Topics</h3>
<ul>
<li>CSS Basics</li>
<li>JavaScript Introduction</li>
</ul>
</aside>

11.2.7 <nav>
 Represents navigation links.
 Helps users and screen readers find menu links easily.

Example:

<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>

11.3 Combined Semantic HTML Example


<body>
<header>
<h1>My Website</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="services.html">Services</a>
</nav>
</header>

<main>
<section>
<h2>Our Services</h2>
<p>We offer web development, design, and SEO services.</p>
</section>

<article>
<h2>Latest Blog Post</h2>
<p>Learn HTML step by step in this tutorial series.</p>
</article>

<aside>
<h3>Related Links</h3>
<ul>
<li><a href="css.html">CSS Basics</a></li>
<li><a href="javascript.html">JavaScript Basics</a></li>
</ul>
</aside>
</main>
<footer>
<p>&copy; 2025 My Website | <a href="contact.html">Contact Us</a></p>
</footer>
</body>

Explanation:

 Uses header, nav, main, section, article, aside, footer for a fully structured
webpage.
 Improves readability, accessibility, and SEO.

✅ Summary of Chapter 11
 Semantic HTML provides meaningful structure.
 Key elements: <header>, <footer>, <main>, <section>, <article>, <aside>, <nav>
 Benefits: SEO, accessibility, readability, maintainability.
 Helps browsers and assistive technologies understand content better.

💻 Practice Exercises
1. Create a file chapter11.html.
2. Add a <header> with website title and navigation links.
3. Add a <main> with two sections describing your services.
4. Add an <article> with a blog post or news snippet.
5. Add an <aside> with related links or advertisements.
6. Add a <footer> with copyright info and contact link.
7. Test in a browser and inspect elements for proper semantic structure.
Chapter 12: HTML5 New Features
HTML5 introduced many new features for modern web development, including new input
types, multimedia support, graphics, storage APIs, geolocation, and drag & drop.

12.1 New Input Types


HTML5 added new input types for better form validation and user experience.

Type Purpose Example

date Date picker <input type="date" name="dob">

time Time picker <input type="time" name="appt">

email Email validation <input type="email" name="email">

url URL validation <input type="url" name="website">

range Slider input <input type="range" min="0" max="100" value="50">

number Numeric input <input type="number" name="quantity" min="1" max="10">

search Search field <input type="search" name="query">

tel Telephone input <input type="tel" name="phone">

color Color picker <input type="color" name="favcolor">

Example:

<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>

<label for="website">Website:</label>
<input type="url" id="website" name="website"><br><br>

<label for="range">Volume:</label>
<input type="range" id="range" name="volume" min="0" max="100"><br><br>

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


</form>

Explanation:

 New input types improve user experience and reduce the need for JavaScript
validation.

12.2 Multimedia Support


 HTML5 made audio and video embedding native without plugins like Flash.
 Use <audio> and <video> tags.

Audio Example:

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

Video Example:

<video width="640" height="360" controls>


<source src="movie.mp4" type="video/mp4">
Your browser does not support video.
</video>

12.3 Graphics
12.3.1 <canvas> Tag
 <canvas>allows drawing graphics using JavaScript.
 Can be used for animations, charts, games, or visualizations.

Example:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">


Your browser does not support the canvas element.
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 50);
</script>

Explanation:

 getContext("2d") → 2D drawing context


 fillRect(x, y, width, height) → Draws a rectangle

12.3.2 <svg> Tag


 <svg> allows vector-based graphics directly in HTML.

Example:

Explanation:

 cx, cy → Center coordinates


 r → Radius
 stroke → Border color
 fill → Fill color

12.4 Storage APIs


HTML5 provides client-side storage for persistent data.

12.4.1 LocalStorage
 Stores data permanently in the browser until cleared.

Example:

<script>
localStorage.setItem("username", "John");
alert("Saved username: " + localStorage.getItem("username"));
</script>

12.4.2 SessionStorage
 Stores data temporarily for the session (cleared when tab closes).

Example:

<script>
sessionStorage.setItem("sessionName", "Sanket");
alert("Session Name: " + sessionStorage.getItem("sessionName"));
</script>

12.5 Geolocation API


 Allows webpages to get user’s location (with permission).

Example:

<button onclick="getLocation()">Get Location</button>


<p id="demo"></p>

<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById("demo").innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
document.getElementById("demo").innerHTML =
"Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>

12.6 Drag and Drop API


 HTML5 allows dragging elements and dropping them into targets.

Example:

<p id="drag1" draggable="true" ondragstart="drag(event)" style="width:100px;height:50px;border:1px solid


#000;">Drag me</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"


style="width:200px;height:100px;border:1px solid #000;"></div>

<script>
function allowDrop(ev) { ev.preventDefault(); }
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>

Explanation:
 draggable="true" → Makes element draggable
 ondragstart → Fires when drag begins
 ondragover → Must allow drop using preventDefault()
 ondrop → Handles the drop action

✅ Summary of Chapter 12
 New Input Types: date, time, email, url, range, search, color, number, tel
 Multimedia: <audio> and <video> tags
 Graphics: <canvas> (dynamic drawing), <svg> (vector graphics)
 Storage APIs: localStorage (persistent), sessionStorage (session-based)
 Geolocation: Get user location via navigator.geolocation
 Drag and Drop: Move elements interactively using HTML5 API

💻 Practice Exercises
1. Create a file chapter12.html.
2. Add a form with new input types: date, range, color, search.
3. Embed a video and audio file using HTML5 tags.
4. Draw a rectangle using <canvas> and a circle using <svg>.
5. Store a username in localStorage and display it in an alert.
6. Use geolocation to display your current latitude and longitude.
7. Implement a drag and drop element inside a div and test in the browser.
Chapter 13: Accessibility in HTML
Accessibility ensures that all users, including people with disabilities, can access and use
web content effectively. HTML provides features to improve accessibility.

13.1 Importance of Accessibility


 Makes websites usable for visually impaired, hearing impaired, and motor-
impaired users.
 Improves SEO and usability for everyone.
 Accessibility is required by standards like WCAG (Web Content Accessibility
Guidelines).

13.2 Alt Attributes for Images


 The alt attribute describes the content of images.
 Used by screen readers for visually impaired users.

Example:

<img src="logo.png" alt="Company Logo">

Explanation:

 If the image cannot load, alt text is displayed.


 Always provide descriptive, concise text.

Common Mistakes:

 Using alt="" for meaningful images (only okay for decorative images).
 Overly long descriptions in alt.

13.3 ARIA Roles and Attributes


ARIA (Accessible Rich Internet Applications) enhances accessibility for dynamic content.

16.3.1 Common ARIA Attributes


Attribute Description Example

role Defines the type of element <div role="navigation">Menu</div>

aria-label Provides a label for the element <button aria-label="Close">X</button>

aria-hidden Hides content from screen readers <div aria-hidden="true">Hidden content</div>

Example:

<nav role="navigation" aria-label="Main Menu">


<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>

<button aria-label="Close Menu">X</button>

Explanation:

 role="navigation" → Defines element as navigation for assistive tech


 aria-label="Main Menu" → Provides descriptive label
 aria-hidden="true" → Hides irrelevant content from screen readers

13.4 Keyboard Navigation


 Users with motor disabilities often navigate using a keyboard.
 Ensure all interactive elements are focusable using tabindex.
Example:

<a href="home.html" tabindex="1">Home</a>


<a href="about.html" tabindex="2">About</a>
<button tabindex="3">Submit</button>

Explanation:

 → Determines tab order


tabindex="1"
 Default focusable elements: <a>, <button>, <input>

Best Practices:

 Avoid removing keyboard focus from elements.


 Use semantic HTML for natural keyboard navigation.

13.5 Semantic HTML for Accessibility


 Using semantic tags like <header>, <main>, <nav>, <footer> improves screen reader
experience.
 Screen readers can identify page sections easily.

Example:

<header>
<h1>Website Title</h1>
</header>
<main>
<article>
<h2>Blog Post</h2>
<p>This is content for screen readers.</p>
</article>
</main>
<aside>
<h3>Related Links</h3>
</aside>
<footer>
<p>&copy; 2025 My Website</p>
</footer>

Explanation:

 Semantic structure helps assistive technology understand page layout.

13.6 Color Contrast


 Ensure text and background contrast is high enough.
 WCAG recommends a contrast ratio of at least 4.5:1.

Example:

<p style="color: #000000; background-color: #ffffff;">High contrast text</p>

Tools:

 Use online contrast checkers to verify readability.

13.7 Forms Accessibility


 Label all inputs using <label> or aria-label.
 Group inputs with <fieldset> and <legend> for context.

Example:

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

Explanation:

 Screen readers announce legend for grouped fields.


 <label> improves clarity of input fields.

13.8 Testing Accessibility


 Tools:
o WAVE (Web Accessibility Evaluation Tool)
o Lighthouse in Chrome DevTools
o Screen readers like NVDA or VoiceOver

Checklist:

1. All images have meaningful alt.


2. Interactive elements are keyboard accessible.
3. ARIA roles and labels are used where needed.
4. Semantic HTML used for structure.
5. Color contrast meets accessibility standards.
✅ Summary of Chapter 16
 Accessibility ensures websites are usable by everyone.
 Key techniques:
o alt for images
o ARIA roles and attributes
o Keyboard navigation (tabindex)
o Semantic HTML
o Color contrast
o Accessible forms
 Testing with tools and screen readers ensures compliance.

💻 Practice Exercises
1. Create a file chapter16.html.
2. Add images with descriptive alt attributes`.
3. Add a navigation menu using <nav> with role and aria-label.
4. Create a form with label, fieldset, and legend.
5. Test keyboard navigation for all interactive elements.
6. Check color contrast using online tools.
7. Test your page with a screen reader to ensure accessibility.

Chapter 14: Best Practices in HTML


Following best practices ensures your HTML is clean, maintainable, accessible, and
compatible across browsers.

14.1 Clean and Semantic Markup


 Use semantic HTML to clearly indicate the purpose of elements.
 Avoid excessive <div> and <span> for layout.

Example of semantic markup:

<header>
<h1>My Website</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</nav>
</header>
<main>
<article>
<h2>Blog Post</h2>
<p>This is a semantic HTML example.</p>
</article>
</main>
<footer>
<p>&copy; 2025 My Website</p>
</footer>

Benefits:

 Improves readability
 Helps SEO
 Enhances accessibility

14.2 Comments in HTML


 Use comments to document code.
 Comments are ignored by browsers.

Syntax:

<!-- This is a comment -->


<p>This is visible content.</p>

Best Practices:

 Use comments to describe sections or temporary notes.


 Avoid leaving unnecessary comments in production.

14.3 Proper Indentation


 Use consistent indentation to show hierarchy.
 Makes code readable and maintainable.

Example:

<body>
<header>
<h1>Title</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</nav>
</header>
</body>
Tip:

 Typically 2 or 4 spaces per level.


 Avoid mixing tabs and spaces.

14.4 Cross-Browser Compatibility


 Ensure your HTML works across all major browsers: Chrome, Firefox, Edge, Safari.

Tips:

1. Use standard HTML5 tags.


2. Avoid browser-specific features unless necessary.
3. Test using different browsers and devices.
4. Use CSS resets or normalize.css for consistent styling.

Example:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 Ensures responsive layout on all devices.

14.5 Validation with W3C Validator


 Validating HTML ensures error-free and standard-compliant code.

Steps:

1. Go to W3C Validator
2. Enter your HTML file or URL
3. Click Check

Benefits:

 Finds missing or misplaced tags


 Helps with cross-browser compatibility
 Improves SEO and accessibility

14.6 Mobile-Friendly and Responsive Design


 Use meta viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

 Ensures your page scales correctly on mobile devices.


 Combine with CSS media queries for responsive design.

Example Media Query:

@media (max-width: 600px) {


body {
font-size: 14px;
}
nav a {
display: block;
margin-bottom: 10px;
}
}

14.7 File Organization


 Keep HTML, CSS, JS, and images organized in folders.

Example Structure:

project/
├─ index.html
├─ about.html
├─ css/
│ └─ styles.css
├─ js/
│ └─ script.js
├─ images/
│ └─ logo.png

Benefits:

 Easy to maintain
 Scales better for larger projects

14.8 Avoid Deprecated Tags


 Avoid using old or obsolete tags like <font>, <center>, <big>.
 Use CSS instead for styling.

Example:

<!-- Avoid this -->


<font color="red">Hello</font>

<!-- Use this -->


<p style="color: red;">Hello</p>

✅ Summary of Chapter 14
 Semantic HTML improves readability and accessibility.
 Use comments to document sections.
 Maintain proper indentation for clarity.
 Ensure cross-browser compatibility.
 Validate your HTML with W3C Validator.
 Use mobile-friendly and responsive design practices.
 Organize files and folders properly.
 Avoid deprecated tags and rely on CSS for styling.

💻 Practice Exercises
1. Create a file chapter17.html.
2. Build a simple webpage using semantic HTML and proper indentation.
3. Add comments for header, main, and footer sections.
4. Test the webpage in multiple browsers.
5. Validate your HTML using W3C Validator and fix errors.
6. Make the page responsive with viewport meta tag and a simple media query.
7. Organize CSS, JS, and images in separate folders.

Chapter 15: Complete Example Projects


In this chapter, we will create full working webpages using all HTML concepts learned from
Chapters 1–17. This will help learners practice and consolidate their skills.

15.1 Project 1: Simple Webpage


Objective: Create a basic webpage with headings, paragraphs, links, and images.

HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
header, footer {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
nav a {
margin: 0 10px;
text-decoration: none;
color: #333;
}
img {
max-width: 200px;
display: block;
margin: 10px 0;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</header>

<main>
<h2>About This Website</h2>
<p>This is a simple webpage using HTML, CSS, and semantic tags.</p>
<img src="images/sample.jpg" alt="Sample Image">
<p>Visit <a href="https://www.example.com" target="_blank">Example Website</a> for more
resources.</p>
</main>

<footer>
<p>&copy; 2025 My Website | <a href="contact.html">Contact Us</a></p>
</footer>
</body>
</html>

15.2 Project 2: Portfolio Page


Objective: Create a portfolio page with semantic HTML and sections for skills and projects.

HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<h1>John Doe Portfolio</h1>
<nav>
<a href="#about">About Me</a>
<a href="#skills">Skills</a>
<a href="#projects">Projects</a>
</nav>
</header>

<main>
<section id="about">
<h2>About Me</h2>
<p>I am a web developer passionate about HTML, CSS, and JavaScript.</p>
</section>

<section id="skills">
<h2>Skills</h2>
<ul>
<li>HTML5 & CSS3</li>
<li>JavaScript</li>
<li>Responsive Design</li>
</ul>
</section>

<section id="projects">
<h2>Projects</h2>
<article>
<h3>Project 1</h3>
<p>Simple responsive website.</p>
</article>
<article>
<h3>Project 2</h3>
<p>Portfolio page using semantic HTML.</p>
</article>
</section>
</main>

<footer>
<p>&copy; 2025 John Doe | <a href="mailto:[email protected]">Email Me</a></p>
</footer>
</body>
</html>

Explanation:

 Uses semantic tags (header, main, section, article, footer).


 Includes navigation, lists, and links.
15.3 Project 3: Contact Form Page
Objective: Create a contact form using various HTML input types.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<style>
form {
max-width: 400px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
}
label, input, textarea, select, button {
display: block;
width: 100%;
margin-bottom: 10px;
}
</style>
</head>
<body>
<header>
<h1>Contact Me</h1>
</header>

<main>
<form action="submit_form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

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

<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" required></textarea>

<label for="subject">Subject:</label>
<select id="subject" name="subject">
<option value="general">General Inquiry</option>
<option value="support">Support</option>
<option value="feedback">Feedback</option>
</select>

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

<footer>
<p>&copy; 2025 My Website | <a href="mailto:[email protected]">Email Me</a></p>
</footer>
</body>
</html>
Explanation:

 Uses form elements: input, textarea, select, button.


 Includes required attributes for validation.

15.4 Project 4: Responsive Webpage with HTML5 Semantic


Tags
Objective: Create a full responsive page using semantic HTML and internal/external CSS.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Webpage</title>
<link rel="stylesheet" href="css/styles.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
nav a {
color: white;
margin: 0 10px;
text-decoration: none;
}
main {
padding: 20px;
}
@media (max-width: 600px) {
nav a {
display: block;
margin: 5px 0;
}
}
</style>
</head>
<body>
<header>
<h1>Responsive HTML5 Page</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 page adapts to different screen sizes using CSS media queries.</p>
</section>
<section id="services">
<h2>Services</h2>
<ul>
<li>Web Development</li>
<li>Web Design</li>
<li>SEO Optimization</li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Email: [email protected]</p>
<p>Phone: +1234567890</p>
</section>
</main>

<footer>
<p>&copy; 2025 My Website | All Rights Reserved</p>
</footer>
</body>
</html>

Explanation:

 Fully responsive webpage using semantic HTML.


 Uses media queries to adjust navigation links on smaller screens.

✅ Summary of Chapter 15
 We created four full projects:
1. Simple webpage
2. Portfolio page
3. Contact form
4. Responsive webpage with HTML5 semantic tags
 Practicing full projects helps consolidate HTML knowledge from chapters 1–17.
 All projects use semantic HTML, forms, images, links, CSS, and responsive
design.

💻 Practice Exercises
1. Create your own portfolio page using all semantic tags.
2. Add a contact form with multiple input types.
3. Make the webpage responsive with media queries.
4. Add images, audio, and video content.
5. Test accessibility and cross-browser compatibility.
6. Validate your HTML using W3C Validator.

You might also like