0% found this document useful (0 votes)

7 views64 pages

HTML Notes (1) SOME

The document provides a comprehensive overview of HTML, detailing its definition, importance in web development, and historical evolution. It covers the basic structure of an HTML document, including essential elements like <head>, <body>, and various text formatting tags. Additionally, it includes examples and explanations of how to use these elements effectively for creating well-structured web pages.

Uploaded by

mutisya546

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

0% found this document useful (0 votes)

7 views64 pages

HTML Notes (1) SOME

Uploaded by

mutisya546

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

SOMATECH IT

HTML OUTLINE
1. Introduction to HTML

• What is HTML?
• Importance of HTML in Web Development
• History and Evolution

1.1 What is HTML?

HTML (Hypertext Markup Language) is the fundamental markup language used to create web
pages. It provides the structure and layout for web content by defining various elements such as
headings, paragraphs, images, links, and multimedia.

• Hypertext: Refers to text that contains links to other content, enabling users to navigate
between different pages or sections.
• Markup Language: A system for annotating text to define the structure and presentation
of the document’s content.

1.2 Importance of HTML in Web Development

HTML is essential in web development for the following reasons:

• Content Structure: HTML offers a logical framework to organize content on a web page.
• Interactivity: It works seamlessly with CSS (Cascading Style Sheets) and JavaScript to
style and add dynamic interactivity to the page.
• Cross-Browser Compatibility: HTML is supported by all modern web browsers, ensuring
that the content is accessible on different platforms.
• Search Engine Optimization (SEO): Proper use of semantic HTML improves the page’s
visibility and ranking in search engines.

1.3 History and Evolution of HTML

HTML has evolved significantly over the years:

• 1989: Tim Berners-Lee proposed HTML while working at CERN.

• 1991: The first HTML specifications were published.
• 1995: HTML 2.0 standardized the language for early web developers.
• 1997: HTML 4.0 introduced new multimedia elements and form controls.
• 2008: HTML5 was proposed, focusing on better support for multimedia and more semantic
elements.

SOMATECH IT – 0726 674 946 1

• 2014: HTML5 was officially recommended by the World Wide Web Consortium (W3C),
becoming the current standard.

1.4 Basic HTML Example

Here’s a simple example of an HTML document that includes a heading, a paragraph, and a
hyperlink:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Introduction to HTML</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a simple example of an HTML webpage.</p>
<a href="[Link] Example</a>
</body>
</html>

Explanation

1. Document Type Declaration (<!DOCTYPE html>): Informs the browser that the
document follows HTML5 standards.
2. HTML Element (<html>): The root element that encapsulates all the content on the page.
3. Head Section (<head>): Contains metadata, including the character set and page title.
4. Meta Tags (<meta>): Provides additional information about the webpage, such as
encoding and viewport settings.
5. Title (<title>): Specifies the title that appears on the browser tab.
6. Body Section (<body>): Contains the visible content of the webpage.
7. Heading (<h1>): Defines the main heading on the page.
8. Paragraph (<p>): Represents a block of text.
9. Anchor (<a>): Creates a hyperlink to another webpage.

1.5 Key Features of HTML

HTML offers several key features that make it an essential tool for web development:

• Platform Independent: HTML works across all devices and operating systems, making it
universally compatible.

SOMATECH IT – 0726 674 946 2

• Flexible and Extensible: HTML integrates seamlessly with CSS and JavaScript to
enhance the design and functionality of web pages.
• Backward Compatible: New versions of HTML maintain support for older code, ensuring
long-term compatibility.
• Accessibility: HTML includes features like ARIA roles to improve accessibility for users
with disabilities.

1.6 HTML in Action (Example Use Case)

Consider an online portfolio website for a web developer. The homepage might include:

• A hero section with a welcoming heading and introduction.

• Navigation links to sections such as Projects, Blog, and Contact.
• Embedded multimedia elements, like a project showcase video.
• A contact form for visitors to get in touch with the developer.

Example HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Developer Portfolio</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Welcome to My Portfolio</h1>
<nav>
<ul>
<li><a href="#projects">Projects</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<section id="projects">
<h2>My Projects</h2>
<p>Here are some of the amazing projects I have worked on.</p>
</section>

<section id="contact">
<h2>Contact Me</h2>
<form action="submit_form.php" method="POST">
SOMATECH IT – 0726 674 946 3
<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" required></textarea>

<footer>
<p>© 2025 My Portfolio. All Rights Reserved.</p>
</footer>
</body>
</html>

Explanation

• Header Section: Contains a welcoming heading and a navigation menu linking to various
sections of the website.
• Projects Section: Displays a heading and a description of the developer's projects.
• Contact Section: Contains a form with fields for the user's name, email, and message,
allowing visitors to contact the developer.
• Footer: Includes a copyright notice.

This example demonstrates how HTML can be used to structure a complete and functional
portfolio website, with navigation links, sections for content, and a contact form.

2. HTML Basic Structure

• HTML Document Declaration (<!DOCTYPE html>)

• HTML Document Layout (<html>, <head>, <body>)
• Basic Page Setup:
o Title (<title>)
o Metadata (<meta>)
o Linking stylesheets (<link>)

SOMATECH IT – 0726 674 946 4

A well-structured HTML document is essential for ensuring that web browsers can correctly
interpret and display content. Understanding the fundamental elements of an HTML document is
key to building effective, maintainable, and accessible web pages.

2.1 HTML Document Declaration (<!DOCTYPE html>)

The <!DOCTYPE html> declaration tells the web browser which version of HTML is being
used. It is crucial because it ensures that the page is rendered using modern HTML standards,
avoiding compatibility issues with older browsers.

• Placement: It must appear as the very first line in the HTML document.
• In HTML5: The declaration is simple and case-insensitive:

<!DOCTYPE html>

• Purpose: This declaration prompts browsers to render the page in standards mode rather
than in quirks mode, providing consistent rendering across different browsers.

2.2 HTML Document Layout (<html>, <head>, <body>)

An HTML document consists of three core sections:

2.2.1 HTML Element (<html>)

• The <html> element is the root element that wraps all other HTML content.
• It usually includes a lang attribute, which specifies the language of the document.

2.2.2 Head Section (<head>)

The <head> section contains metadata and resources that are not directly visible on the webpage
but are important for the document's functioning and SEO (Search Engine Optimization).

• Elements commonly found in the <head> section:

o Title of the document
o Meta tags (e.g., character set, viewport settings)
o Links to stylesheets
o Scripts (often linked externally)

SOMATECH IT – 0726 674 946 5

Example:

2.2.3 Body Section (<body>)

The <body> section contains the visible content of the webpage, including text, images, videos,
and other multimedia elements.

• Common elements inside the <body>:

o Headings
o Paragraphs
o Images
o Links
o Forms

Example:

<body>
<h1>Welcome to My Website</h1>
<p>This is a sample paragraph.</p>
</body>

2.3 Basic Page Setup

2.3.1 Title (<title>)

The <title> element specifies the title of the document, which is displayed in the browser's tab
and used by search engines for indexing.

Example:

<title>My First Web Page</title>

2.3.2 Metadata (<meta>)

Meta tags provide additional information about the webpage that helps browsers and search
engines process the content.

SOMATECH IT – 0726 674 946 6

• Common Meta Tags:
1. Character Set: Defines the character encoding for the document, ensuring proper
display of text characters.

2. Viewport Settings: Controls the page's appearance and scaling on different

devices, ensuring the page is mobile-friendly.

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

scale=1.0">

3. Description: Provides a brief description of the webpage’s content, often used by

search engines to display snippets in search results.

<meta name="description" content="A sample webpage about

web development basics.">

2.3.3 Linking Stylesheets (<link>)

The <link> element is used to link external resources, such as CSS stylesheets, to the document.

• Common Attributes:
o rel: Defines the relationship between the document and the linked resource (e.g.,
"stylesheet").
o href: Specifies the URL of the linked resource.

Example:

<link rel="stylesheet" href="[Link]">

Complete Basic HTML Template

Here’s a comprehensive example of a basic HTML document that incorporates all of the discussed
elements:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>HTML Basic Structure</title>
<link rel="stylesheet" href="[Link]">
</head>

SOMATECH IT – 0726 674 946 7

<body>
<h1>Welcome to My Website</h1>
<p>This page demonstrates the basic structure of an HTML
document.</p>
</body>
</html>

Summary

This template highlights the essential structural components needed to create a functional HTML
document. By understanding how to properly use the <!DOCTYPE html> declaration, <html>,
<head>, and <body> elements, you can ensure that your web pages are well-formed, accessible,
and ready for browsers to render correctly. This foundation is crucial for creating web pages that
are both visually appealing and maintainable.

3. Text and Formatting Elements

• Headings (<h1> to <h6>)

• Paragraphs (<p>)
• Line Breaks (<br>)
• Bold and Italic (<b>, <strong>, <i>, <em>)
• Lists:
o Ordered (<ol>)
o Unordered (<ul>)
o Definition Lists (<dl>)

HTML provides a variety of elements for structuring and formatting text on a webpage.
Understanding these elements is essential for creating well-organized, readable, and visually
appealing content.

3.1 Headings (<h1> to <h6>)

Headings are used to define the titles and subtitles of a webpage, helping to organize content
hierarchically. HTML offers six levels of headings, with <h1> representing the most important
and <h6> the least.

• Usage:
o <h1> is typically reserved for the main title of the page or section.

SOMATECH IT – 0726 674 946 8

o <h2> to <h6> are used for subsections, each one denoting a lower level of
importance.

Example:

<h1>Main Heading</h1>
<h2>Subheading Level 2</h2>
<h3>Subheading Level 3</h3>
<h4>Subheading Level 4</h4>
<h5>Subheading Level 5</h5>
<h6>Subheading Level 6</h6>

3.2 Paragraphs (<p>)

The <p> element defines a block of text and is commonly used to group content into readable
paragraphs. Web browsers automatically add some space between paragraphs for better
readability.

• Usage: Each paragraph of text should be enclosed within a <p> tag.

Example:

<p>This is a paragraph of text. HTML paragraphs help structure

content into easily readable blocks.</p>

3.3 Line Breaks (<br>)

The <br> element is used to insert a line break within a block of text. It doesn't create a new
paragraph, making it ideal for situations where you need to break the text without starting a new
block.

• Usage: Often used within paragraphs or addresses to control line spacing.

Example:

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

a break.</p>

3.4 Bold and Italic Text (<b>, <strong>, <i>, <em>)

• Bold Text:
o <b>: Used to make text bold for stylistic purposes, without conveying any special
importance.

SOMATECH IT – 0726 674 946 9

o <strong>: Makes text bold, indicating that it has semantic importance or
urgency.
• Italic Text:
o <i>: Used to style text in italics for visual emphasis.
o <em>: Indicates text that should be emphasized, typically displayed in italics.

Examples:

<p>This is <b>bold</b> text and this is

<strong>important</strong> text.</p>
<p>This is <i>italic</i> text and this is
<em>emphasized</em> text.</p>

3.5 Lists

Lists are used to organize related items, either in a specific order or without any particular order.
HTML provides three types of lists:

3.5.1 Ordered Lists (<ol>)

An ordered list displays a set of items in a numbered sequence, useful for instructions, rankings,
or items that need to follow a specific order.

• Usage: Each item in an ordered list is defined using the <li> (list item) element.

Example:

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

3.5.2 Unordered Lists (<ul>)

An unordered list displays a set of items without any specific order, using bullet points by default.

• Usage: Each item in an unordered list is also defined with the <li> element.

Example:

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

SOMATECH IT – 0726 674 946 10

</ul>

3.5.3 Definition Lists (<dl>)

A definition list is used to display terms and their corresponding definitions. It consists of <dt>
(definition term) for the term and <dd> (definition description) for the definition.

• Usage: This type of list is perfect for glossaries or dictionaries.

Example:

<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

Summary

These HTML text and formatting elements help structure and present content in a readable and
organized way. Whether you are defining headings, creating paragraphs, formatting text with bold
or italic styles, or organizing items into lists, using these elements correctly ensures that your
webpage is both functional and visually appealing. By employing these elements, you create a
more user-friendly and accessible web experience.

4. Links and Navigation

• Hyperlinks (<a>)
o Anchor Links
o External and Internal Links
• Navigation Bar Basics

HTML provides powerful tools for linking web pages and creating navigational structures. This
section covers hyperlinks and basic navigation bar concepts.

4.1 Hyperlinks (<a>)

The <a> (anchor) element is used to create hyperlinks, allowing users to navigate to other web
pages or sections of the same page.

SOMATECH IT – 0726 674 946 11

Syntax:

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

• href Attribute: Specifies the destination URL.

• Link Text: The clickable text that appears to users.

Example:

<a href="[Link] Example Website</a>

4.1.1 Anchor Links

Anchor links enable navigation within the same webpage by linking to specific sections marked
by id attributes.

Example:

<a href="#section1">Go to Section 1</a>

<h2 id="section1">Section 1</h2>

<p>This is Section 1 content.</p>

4.1.2 External and Internal Links

• External Links: Navigate to a different website.

Example:

<a href="[Link] target="_blank">Visit

Google</a>

• The target="_blank" attribute opens the link in a new tab.

• Internal Links: Navigate to another page within the same website.

Example:

<a href="[Link]">About Us</a>

4.2 Navigation Bar Basics

A navigation bar is a collection of links that help users navigate a website. Typically, it is structured
using <nav>, <ul>, and <li> elements.

Example:

SOMATECH IT – 0726 674 946 12

<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Services</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>

Explanation:

• <nav>: Defines the navigation section of the page.

• <ul>: Creates an unordered list to group navigation links.
• <li>: Represents each list item.
• <a>: Provides the clickable links.

Styling the Navigation Bar (Optional)

Navigation bars can be styled with CSS to enhance usability and appearance.

Basic CSS Example:

nav ul li {
margin: 0 15px;
}

nav ul li a {
color: white;
text-decoration: none;
}

nav ul li a:hover {
text-decoration: underline;
}
</style>

This setup covers the fundamentals of links and navigation in HTML, providing essential tools for
building user-friendly and interconnected web pages.

SOMATECH IT – 0726 674 946 13

5. Images and Multimedia

• Image Insertion (<img>)

o Attributes: src, alt, width, height
• Audio (<audio>)
• Video (<video>)
• Embedding External Media (<iframe>)

In HTML, images, audio, video, and external media can be included with the following elements
and attributes:

1. Image Insertion (<img>)

• The <img> tag is used to embed images.

o Attributes:
▪ src: Specifies the path to the image (required).
▪ alt: Provides alternative text for the image if it cannot be displayed
(important for accessibility).
▪ width: Specifies the width of the image in pixels.
▪ height: Specifies the height of the image in pixels.

Example:

<img src="[Link]" alt="A beautiful sunset" width="600"

height="400">

2. Audio (<audio>)

• The <audio> tag is used to embed sound content in a document, such as music or other
audio files.
o Attributes:
▪ controls: Adds audio controls (like play, pause, etc.).
▪ src: Specifies the path to the audio file.

Example:

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

SOMATECH IT – 0726 674 946 14

3. Video (<video>)

• The <video> tag is used to embed a video file.

o Attributes:
▪ controls: Adds video controls (like play, pause, volume).
▪ src: Specifies the path to the video file.
▪ width: Specifies the width of the video.
▪ height: Specifies the height of the video.

Example:

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

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

4. Embedding External Media (<iframe>)

• The <iframe> tag is used to embed external content like other web pages, videos, and
more.
o Attributes:
▪ src: Specifies the URL of the content to be embedded.
▪ width: Specifies the width of the iframe.
▪ height: Specifies the height of the iframe.

Example:

These HTML tags are essential for embedding multimedia content within a webpage.

6. Forms and User Input

• Form Structure (<form>)

• Input Types (<input>)
• Select and Dropdowns (<select>, <option>)
• Text Areas (<textarea>)
• Buttons (<button>)
• Fieldsets and Legends (<fieldset>, <legend>)
• Form Validation

SOMATECH IT – 0726 674 946 15

1. Form Structure (<form>)

The <form> element is a container for all user input elements such as text fields, checkboxes,
radio buttons, and buttons. It represents an interactive form used to collect and submit user data.

Attributes:

• action: Specifies the URL to which the form data will be sent when the form is
submitted. This is required for the form to know where the data should go after submission.
o Example: action="submit_form.php"
• method: Specifies the HTTP method to be used when sending the form data. There are
two main methods:
o GET: Appends form data to the URL, usually for non-sensitive data.
o POST: Sends form data as part of the HTTP request body, typically used for
sensitive or large amounts of data.
o Example: method="POST"
• name: Defines the name of the form. It can be useful if you want to access the form
dynamically through JavaScript.
o Example: name="contactForm"

Example:

<form action="/submit-form" method="POST">

</form>

2. Input Types (<input>)

The <input> element is one of the most used HTML elements in forms. It is a versatile tag that
allows for various types of user input, such as text, password, radio buttons, checkboxes, and more.

Attributes:

• type: Specifies the type of input element. Common types include:

o text: A single-line text input.
o password: A text input that hides the text entered (useful for passwords).
o email: Allows input of email addresses and validates the format.
o number: Accepts numeric values.
o radio: Allows selection of one option from a group.
o checkbox: Allows for multiple selections (can be checked or unchecked).
o submit: Submits the form.
• name: Defines the name of the input element. The name is important because it is used to
reference the form data when it is submitted.
o Example: name="username"

SOMATECH IT – 0726 674 946 16

• value: Specifies the default value for the input field, or the value to be sent when the
form is submitted.
o Example: value="Submit"
• placeholder: Provides a hint inside the input field, which disappears once the user
starts typing.
o Example: placeholder="Enter your email"
• required: Makes the input field mandatory for the user to fill out before submitting the
form.
o Example: required

Example:

<input type="text" name="username" placeholder="Enter your

username" required>

3. Select and Dropdowns (<select>, <option>)

The <select> element is used to create a dropdown list, allowing the user to choose from
multiple options. Each option within the dropdown is defined by the <option> element.

Attributes:

• name: Defines the name of the select element. This is important for submitting the form
data.
o Example: name="country"
• multiple: When included, this attribute allows users to select more than one option at a
time.
o Example: multiple

Example:

<select name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>

4. Text Areas (<textarea>)

The <textarea> element is used for multi-line input, such as when a user needs to type a
paragraph or message. Unlike <input>, <textarea> is typically used for larger blocks of text.

Attributes:

SOMATECH IT – 0726 674 946 17

• name: Defines the name of the text area, which is used to reference the data when the form
is submitted.
o Example: name="comments"
• rows: Specifies the visible height of the text area in terms of the number of visible rows.
o Example: rows="4"
• cols: Specifies the visible width of the text area in terms of the number of characters per
row.
o Example: cols="50"
• placeholder: Provides a hint or message inside the text area before the user starts
typing.
o Example: placeholder="Enter your message"

Example:

<textarea name="comments" rows="4" cols="50"

placeholder="Enter your comments here"></textarea>

5. Buttons (<button>)

The <button> element is used to create clickable buttons. These buttons can trigger different
actions like submitting the form or resetting form fields.

Attributes:

• type: Specifies the type of button. Common values are:

o submit: Submits the form data to the server.
o reset: Resets the form fields to their default values.
o button: A generic button that does not perform any default action.
• name: Defines the name of the button. Useful for identifying the button when the form is
submitted.
o Example: name="submitBtn"
• value: Defines the value to be sent when the form is submitted, useful for buttons with
different actions.
o Example: value="Submit"

Example:

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

6. Fieldsets and Legends (<fieldset>, <legend>)

The <fieldset> element is used to group related elements within a form, providing a visual
structure. The <legend> element provides a title or description for the group of form elements.
SOMATECH IT – 0726 674 946 18
Attributes

• name: Defines the name of the fieldset (although not often used in modern practice).

Example:

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

7. Form Validation

HTML5 includes built-in form validation features that help ensure users provide correct input
before submitting the form. These validations can be set with attributes.

Common Validation Attributes:

• required: Specifies that the field must be filled out before the form can be submitted.
o Example: required
• pattern: Specifies a regular expression that the input must match. This is used for more
specific validation, such as ensuring an input matches an email format or a custom pattern.
o Example: pattern="[A-Za-z]{3,}"
• min, max: Defines the range of acceptable values for numeric inputs.
o Example: min="18" max="100"
• maxlength: Defines the maximum number of characters allowed in a text field.
o Example: maxlength="50"

Example:

<input type="email" name="email" required>

Example of a Complete Form

<form action="/submit-form" method="POST">

<fieldset>
<legend>Contact Information</legend>

SOMATECH IT – 0726 674 946 19

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

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

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

This form includes fields for name, email, and a message, and it validates that the fields are filled
out before submission.

7. Tables and Data Representation

• Basic Table Structure (<table>, <tr>, <td>, <th>)

• Table Attributes (border, cellpadding, cellspacing)
• Table Head, Body, and Foot (<thead>, <tbody>, <tfoot>)

1. Basic Table Structure (<table>, <tr>, <td>, <th>)

HTML tables are used to represent tabular data (such as a list of items or statistics) in a structured
format. A table is composed of rows and columns. Below are the essential components of a table:

Table Element:

• <table>: This is the container element for the entire table structure. It is used to define a
table.

Example:

Table Row Element:

• <tr>: Represents a row in the table. A table can have multiple <tr> elements inside it,
each representing a row.
SOMATECH IT – 0726 674 946 20
Example:

Table Data Cell Element:

• <td>: Defines a table cell that holds data. Each <td> is placed inside a <tr>, and each
<tr> represents a row of data in the table.

Example:

Table Header Cell Element:

• <th>: Defines a header cell in the table, typically used for titles or headings of columns
or rows. The content of a <th> is bold by default, and it is centered in the cell.

Example:

<th>Name</th>
<th>Age</th>
<th>Country</th>

Basic Table Example:

<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>USA</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>28</td>
<td>Canada</td>

SOMATECH IT – 0726 674 946 21

</tr>
</table>

This creates a table with 3 columns (Name, Age, Country) and 2 rows of data.

2. Table Attributes (border, cellpadding, cellspacing)

There are several attributes that can be used to enhance the appearance and behavior of tables.
Although HTML5 recommends using CSS for table styling, some older attributes are still
supported.

border:

• The border attribute is used to define the thickness of the border around the table cells.
It takes a value in pixels, which represents the width of the border.
o Example: border="1"

Example:

<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>USA</td>
</tr>
</table>

cellpadding:

• The cellpadding attribute defines the space between the content of a cell and its border.
It is set in pixels.
o Example: cellpadding="10"

Example:

<table border="1" cellpadding="10">

<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>

SOMATECH IT – 0726 674 946 22

In this case, there will be 10 pixels of space between the text in each cell and its border.

cellspacing:

• The cellspacing attribute defines the space between each cell. It is also specified in
pixels.
o Example: cellspacing="5"

Example:

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

<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>USA</td>
</tr>
</table>

This will create a 5-pixel gap between each cell.

3. Table Head, Body, and Foot (<thead>, <tbody>, <tfoot>)

To create more semantic and accessible tables, HTML5 introduced grouping elements that allow
you to divide the table into different sections: the header, body, and footer. This is particularly
useful for complex tables with large amounts of data.

<thead> (Table Head):

• The <thead> element groups the header content of the table. It typically contains the
table headings (<th>) that describe the data in each column.
• This element can be styled separately from the rest of the table and can also be fixed on
scrolling when combined with CSS.

SOMATECH IT – 0726 674 946 23

Example:

<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>

<tbody> (Table Body):

• The <tbody> element contains the body of the table, which holds the actual data
represented by <td> elements. It is used to group the data rows (<tr>).
• This allows browsers and assistive technologies to distinguish between header and body
content.

Example:

<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>USA</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>28</td>
<td>Canada</td>
</tr>
</tbody>

<tfoot> (Table Foot):

• The <tfoot> element is used to group footer content. It often contains summary
information or totals for columns, such as a total amount in a financial table.
• Like the header, the footer can be styled separately, and it can be displayed at the bottom
of the table when data is too large and requires scrolling.

Example:

<tfoot>
<tr>
<td>Total</td>
<td>58</td>
<td>-</td>

SOMATECH IT – 0726 674 946 24

</tr>
</tfoot>

Complete Table Example with Head, Body, and Foot:

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

<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>USA</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>28</td>
<td>Canada</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>58</td>
<td>-</td>
</tr>
</tfoot>
</table>

This example illustrates

• A table head (<thead>) with column headings.

• A table body (<tbody>) with two data rows.
• A table foot (<tfoot>) with a total row.

SOMATECH IT – 0726 674 946 25

Summary of Key Points

• Basic Table Structure: The <table> tag holds rows (<tr>), and each row holds either
data cells (<td>) or header cells (<th>).
• Table Attributes:
o border: Controls the thickness of the table border.
o cellpadding: Adds space between cell content and the cell border.
o cellspacing: Adds space between adjacent cells.
• Table Sections:
o <thead>: Groups header content.
o <tbody>: Groups body content (data rows).
o <tfoot>: Groups footer content (such as totals or summaries).

These elements allow developers to structure tables semantically, making them more accessible,
maintainable, and visually appealing.

8. Semantic HTML Elements

• Sectioning Elements: <section>, <article>, <aside>, <header>, <footer>,

<main>
• Inline Elements: <span>, <mark>
• Importance of Semantic Elements for Accessibility and SEO

1. Sectioning Elements: <section>, <article>, <aside>, <header>, <footer>,

<main>

Semantic HTML elements help to structure the content of a web page in a meaningful way, which
improves accessibility, search engine optimization (SEO), and maintainability of the code.

<section> (Section):

• The <section> element is used to group related content within a webpage. Each section
typically has its own heading and represents a thematic grouping of content. It’s used for
organizing the content into distinct sections, like chapters in a book or groups of content in
an article.
• Example uses: news sections, feature sections, or grouped content on a page.

Example:

<section>
<h2>Latest News</h2>

SOMATECH IT – 0726 674 946 26

<p>Breaking news content goes here...</p>
</section>

<article> (Article):

• The <article> element is used to represent a standalone piece of content that can be
distributed independently or reused. Articles are typically used for blog posts, news
articles, or user-generated content.
• An <article> is typically a complete, self-contained unit of content that could exist on
its own.

Example:

<article>
<h2>How to Improve Your Website’s SEO</h2>
<p>In this article, we will explore ways to improve your
website's visibility...</p>
</article>

<aside> (Aside):

• The <aside> element represents content that is tangentially related to the content around
it. This is often used for sidebars, related links, advertisements, or additional information
that is relevant but not central to the main content.
• Asides can be included within sections, articles, or other content areas to offer additional
context or supplementary information.

Example:

<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#">SEO Tips</a></li>
<li><a href="#">Optimizing for Mobile</a></li>
</ul>
</aside>

<header> (Header):

• The <header> element represents the introductory content or navigational links for a
section or the entire page. A page can have multiple headers, but the most common one is
the header for the entire document, which typically contains the website logo, main
navigation, and title.

SOMATECH IT – 0726 674 946 27

Example:

<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>

<footer> (Footer):

• The <footer> element represents the footer of a section or the entire page. It usually
contains information like copyright notices, contact information, or links to privacy
policies.

Example:

<footer>
<p>© 2025 My Website. All rights reserved.</p>
</footer>

<main> (Main):

• The <main> element represents the primary content of the document. There should only
be one <main> element per page, and it excludes content like headers, footers, and
sidebars. It is the part of the document that is directly related to or expands upon the central
topic of the page.

Example:

<main>
<h2>Welcome to My Website</h2>
<p>This is the main content of the page...</p>
</main>

SOMATECH IT – 0726 674 946 28

2. Inline Elements: <span>, <mark>

Inline elements do not cause a line break and can be placed within other block-level elements.
They are generally used for small portions of content like text or links that need to be styled or
identified separately without affecting the flow of the document.

<span> (Span):

• The <span> element is a generic inline container used to apply styles or group small
chunks of text. It does not inherently have any meaning and is often used with CSS to style
or manipulate specific parts of text or content.
• Example uses: highlighting part of a paragraph, styling a specific word, or marking inline
text for JavaScript manipulation.

Example:

<p>The <span style="color: red;">quick</span> brown fox

jumped over the lazy dog.</p>

In this case, the word "quick" is wrapped with a <span> to apply red color styling.

<mark> (Mark):

• The <mark> element is used to highlight text that is relevant to the user's current context,
such as a search result or keyword match. The content inside the <mark> tag is typically
highlighted with a yellow background by default.

Example:

<p>We found the <mark>best</mark> SEO tips in this

article.</p>

The word "best" is highlighted because it is marked with the <mark> element.

3. Importance of Semantic Elements for Accessibility and SEO

Accessibility:

• Screen Readers: Semantic HTML elements like <header>, <footer>, <main>, and
<section> provide a clearer structure to assistive technologies, such as screen readers,
making it easier for visually impaired users to navigate the page. Screen readers can
interpret the meaning of the page structure, helping users to quickly understand the layout
and find the information they need.

SOMATECH IT – 0726 674 946 29

• Keyboard Navigation: Proper use of semantic elements and proper HTML structure
ensures that users can navigate the page using the keyboard. This is crucial for users with
mobility impairments who cannot use a mouse.
• Forms and Labels: Using semantic elements, such as <label> for form inputs, ensures
that users can easily identify which fields they need to fill out, improving the overall user
experience.

SEO (Search Engine Optimization):

• Content Understanding: Search engines rely on the structure of a webpage to understand

its content. Using semantic elements like <article>, <section>, and <header>
allows search engines to better comprehend the context of the page, which can positively
impact rankings.
• Rich Snippets: Properly used semantic elements help search engines understand and
display content in rich snippets, like news articles or event listings, which enhances
visibility in search results.
• Keyword Relevance: Wrapping relevant content in semantic tags can also improve the
relevance of the content for specific search queries. For example, the use of <h1> and
<h2> tags for headings and subheadings allows search engines to understand the topic
hierarchy of the page.

Other Benefits

• Maintainability: Semantic HTML elements make the code more readable and easier to
maintain, especially in large websites. Developers can quickly identify the purpose of
different sections of a page, which is beneficial for collaboration and long-term code
maintenance.
• Mobile Accessibility: Semantic HTML provides a consistent structure across devices,
ensuring that mobile users can also benefit from well-structured, accessible content.

Summary of Key Points

• Sectioning Elements:
o <section>: Groups related content.
o <article>: Represents standalone content.
o <aside>: Contains tangentially related content, like sidebars.
o <header>: Defines introductory content or navigation.
o <footer>: Defines footer content (like copyright or contact info).
o <main>: Represents the main content of the page, excluding headers, footers, and
sidebars.
• Inline Elements:
o <span>: A generic inline container used for styling or small chunks of text.
o <mark>: Highlights text, typically used for search results or relevant content.

SOMATECH IT – 0726 674 946 30

• Importance for Accessibility and SEO:
o Accessibility: Helps assistive technologies understand and navigate content more
easily.
o SEO: Improves search engine comprehension of the content, aiding in better
ranking and visibility.
o Other Benefits: Enhances code readability, maintainability, and mobile
accessibility.

Using semantic HTML not only makes your website more accessible and SEO-friendly but also
improves the overall user experience and helps with future scalability.

9. HTML Graphics and Canvas

• SVG Graphics (<svg>)

• HTML5 Canvas (<canvas>)

1. SVG Graphics (<svg>)

SVG (Scalable Vector Graphics) is an XML-based markup language used for creating vector
graphics. SVGs are resolution-independent, which means they can scale to any size without losing
quality, making them ideal for high-resolution displays and responsive designs.

What is SVG?

• SVG is used to define vector-based graphics directly in the browser using XML. Unlike
raster images (like JPEG or PNG), SVG images are composed of paths, lines, curves, and
shapes that are defined by mathematical expressions, making them infinitely scalable.
• SVGs are used for various graphical elements such as icons, logos, illustrations, and
diagrams.

Basic Structure of an SVG:

• The <svg> element is the container for all SVG graphics.

• Inside an SVG container, you can use various elements like <circle>, <rect>,
<path>, <line>, and <polygon> to define graphical shapes.

Basic Example of SVG Graphics:

<svg width="100" height="100"

xmlns="[Link]
<circle cx="50" cy="50" r="40" stroke="black" stroke-
width="3" fill="red" />
</svg>

SOMATECH IT – 0726 674 946 31

In this example

• <svg> defines the container for the SVG graphics.

• <circle> defines a circle with a center at (50, 50), a radius of 40, a black stroke,
and a red fill.

SVG Shape Elements:

• <circle>: Draws a circle. You define its center (cx, cy) and radius (r).
• <rect>: Draws a rectangle. You define its position (x, y), width (width), and height
(height).
• <line>: Draws a straight line between two points (x1, y1 to x2, y2).
• <path>: Defines more complex shapes with specific paths, curves, and lines.

Example of Multiple Shapes:

<svg width="200" height="200"

xmlns="[Link]

<rect x="10" y="10" width="50" height="50" fill="blue" />

Benefits of SVG

• Scalable: No loss of quality regardless of size or resolution.

• Interactivity and Animation: SVGs can be styled with CSS and animated with JavaScript,
making them highly interactive.
• Searchable and Accessible: The content within SVG files is text-based and can be indexed
by search engines. It is also accessible to screen readers, which is important for
accessibility.

2. HTML5 Canvas (<canvas>)

The <canvas> element in HTML5 is used for rendering dynamic graphics on the fly using
JavaScript. It is essentially a blank area in which you can draw and manipulate graphics, such as
shapes, images, and animations, through the HTML5 canvas API.
SOMATECH IT – 0726 674 946 32
What is the <canvas> Element?

• The <canvas> element does not have any visual content by itself. It creates an area in
the web page where graphics can be drawn using JavaScript.
• Unlike SVG, which is based on markup and handles vector graphics, <canvas> is a
bitmap-based approach where you draw pixels directly.

Basic Syntax for <canvas>:

<canvas id="myCanvas" width="200" height="200"></canvas>

This example defines a canvas with a width and height of 200 pixels.

Drawing on Canvas

You use JavaScript to interact with the <canvas> element and draw shapes, images, or even
animations. The CanvasRenderingContext2D object provides methods for drawing and
manipulating graphics.

Basic Example: Drawing on Canvas

<canvas id="myCanvas" width="500" height="500"></canvas>

// Draw a rectangle
[Link] = "blue"; // Set the color to blue
[Link](10, 10, 150, 100); // Draw a rectangle at (10,
10) with width 150 and height 100

// Draw a circle
[Link]();
[Link](300, 50, 40, 0, 2 * [Link]); // Draw a circle at
(300, 50) with radius 40
[Link] = "red";
[Link]();
</script>

In this example

• The getContext("2d") method returns a drawing context that allows 2D shapes to be

drawn.
• The fillRect() method draws a rectangle, and arc() draws a circle.

SOMATECH IT – 0726 674 946 33

Common Canvas Drawing Methods

• fillRect(x, y, width, height): Draws a filled rectangle.

• strokeRect(x, y, width, height): Draws the outline of a rectangle.
• beginPath(): Begins a new path for drawing.
• arc(x, y, radius, startAngle, endAngle): Draws a circle or arc.
• fill(): Fills the current path with the current fill style.
• stroke(): Draws the outline of the current path with the current stroke style.

Drawing Images on Canvas

You can also draw images using the drawImage() method.

<canvas id="myCanvas" width="500" height="500"></canvas>

var img = new Image(); // Create a new image object

[Link] = 'path_to_image.jpg'; // Set the source of the
image

[Link] = function() {
[Link](img, 0, 0, 100, 100); // Draw the image on
the canvas
}
</script>

In this example, the image is drawn to the canvas once it has loaded.

Benefits of Canvas

• Dynamic and Interactive: Canvas allows for dynamic creation of graphics, which makes
it perfect for applications like games, real-time visualizations, or interactive graphics.
• Pixel Manipulation: Since canvas is pixel-based, you can manipulate every pixel directly
for advanced effects like pixel art or photo editing.
• Performance: Canvas can be more efficient than SVG when working with complex or
dynamic graphics because it doesn’t need to re-render the entire graphic for every small
change.

SOMATECH IT – 0726 674 946 34

Comparison of SVG and Canvas

Feature SVG Canvas

Rendering Vector-based (mathematical paths) Bitmap (pixel-based)
Type
Scalability Infinitely scalable without loss of Quality loss if scaled beyond
quality resolution
Use Cases Logos, Icons, Static Graphics Animations, Games, Real-time
visualizations
Performance Slower with large, complex Faster for dynamic, complex images
graphics
Manipulation Easy to manipulate with Can be manipulated with JavaScript
CSS/JavaScript

Summary of Key Points

• SVG Graphics:
o SVG is a vector graphics format that allows you to define shapes, paths, and lines
in XML format.
o It is scalable without loss of quality and is useful for static, resolution-independent
images like logos and icons.
o SVGs can be styled with CSS and animated with JavaScript.
• Canvas:
o The <canvas> element allows for drawing dynamic graphics on a web page using
JavaScript.
o It is pixel-based, ideal for real-time applications like games, visualizations, and
animations.
o Canvas is flexible and can be used to manipulate every pixel, making it suitable for
complex, interactive graphics.

Both SVG and Canvas have their unique strengths and can be used together to build interactive,
visually rich web applications depending on the requirements.

10. HTML Attributes and Global Attributes

• Common Attributes (class, id, title, style)

• Data Attributes (data-*)

1. Common HTML Attributes:

HTML attributes provide additional information about HTML elements and modify their behavior
or appearance. They are always specified in the opening tag and come in key-value pairs.

SOMATECH IT – 0726 674 946 35

class Attribute:

• Purpose: The class attribute is used to assign one or more class names to an element,
which can be targeted by CSS styles and JavaScript for styling or manipulation.
• Usage: It allows you to apply the same style to multiple elements that share the same class
name.

Example:

<div class="container">
<p class="highlighted">This is highlighted text.</p>
</div>

In this example, both the <div> and <p> elements have class attributes, allowing them to be
styled together or individually.

id Attribute

• Purpose: The id attribute uniquely identifies an element on the page. Each id must be
unique within a document.
• Usage: It is often used for element targeting in CSS, JavaScript, and anchor navigation.

Example:

<p id="intro">This is an introductory paragraph.</p>

Here, the paragraph is given a unique identifier (id="intro") which can be referenced by CSS
or JavaScript.

title Attribute:

• Purpose: The title attribute provides additional information about an element. It is

typically displayed as a tooltip when the user hovers over the element.
• Usage: It's often used for providing descriptions or clarifications about an element, like
links or images.

Example:

<a href="[Link] title="Visit

[Link]">Click here</a>

When a user hovers over the link, a small tooltip will appear with the text "Visit [Link]."

style Attribute:

SOMATECH IT – 0726 674 946 36

• Purpose: The style attribute allows you to apply inline CSS styles directly to an element.
It is used for quick, specific style modifications without needing an external or internal
stylesheet.
• Usage: It’s generally recommended to use this for very specific styling needs or testing,
but it is better to use external or internal stylesheets for larger projects.

Example:

<p style="color: blue; font-size: 18px;">This text is blue

and has a font size of 18px.</p>

Here, the style attribute applies inline styles directly to the <p> element, making its text blue
and adjusting its font size.

2. Data Attributes (data-*):

Data attributes provide a way to store custom data for an element. They allow you to store extra
information that doesn't affect the rendering of the page. Data attributes are often used for adding
data that can be accessed via JavaScript.

What are Data Attributes?

• Purpose: The data-* attributes are used to embed custom data in HTML elements. The
* can be replaced with any name you choose, and it can store any string of information.
• Usage: Data attributes do not influence the element's behavior or appearance, but they can
be accessed and manipulated using JavaScript to add dynamic functionality.

Example:

<div data-user="123" data-role="admin">

<p>User Information</p>
</div>

In this example

• The div element has two data attributes: data-user and data-role, which store the
user ID and role information.

Accessing Data Attributes in JavaScript:

You can retrieve the value of data attributes using JavaScript through the dataset property.

SOMATECH IT – 0726 674 946 37

Example:

<div id="user-info" data-user="123" data-role="admin">

<p>Click to view user details.</p>
</div>

Here, the dataset property provides easy access to the data attributes (data-user and data-
role), allowing you to manipulate or use them dynamically within your JavaScript code.

Advantages of Data Attributes

• Store Custom Data: They offer a way to store extra data that is associated with an element
but isn't part of the content or visible to the user.
• Interaction with JavaScript: Data attributes allow you to store information that can later
be accessed by JavaScript, enabling dynamic page behavior.
• No Need for Additional Markup: Data attributes eliminate the need for extra HTML
elements (like hidden <input> fields) for storing data.

3. Global Attributes

Global attributes are attributes that can be used on any HTML element. These attributes apply
universally across all elements, and not just to a specific type of tag.

Examples of Common Global Attributes

• id: A unique identifier for an element (described above).

• class: Assigns one or more class names to an element (described above).
• style: Adds inline CSS styling (described above).
• title: Provides extra information, usually shown as a tooltip (described above).
• lang: Specifies the language of the element's content.
• data-*: Used to store custom data (described above).
• tabindex: Controls the tabbing order of elements when navigating using the keyboard.
• aria-*: A set of attributes used to improve accessibility for users with disabilities.

Example of Global Attributes

<button id="myButton" class="btn" title="Click me!"

tabindex="0">Click Me</button>
SOMATECH IT – 0726 674 946 38
• id="myButton": Provides a unique identifier for the button.
• class="btn": Assigns a class name to the button.
• title="Click me!": Provides additional information that appears as a tooltip when
the user hovers over the button.
• tabindex="0": Allows the button to be focused when tabbing through elements on the
page.

Summary of Key Points

• Common HTML Attributes

o class: Assigns a class name for styling and targeting.
o id: Uniquely identifies an element.
o title: Provides a tooltip with additional information.
o style: Defines inline CSS styles for an element.
• Data Attributes (data-*)
o Used to store custom data associated with an element.
o The data can be accessed via JavaScript using the dataset property, enabling
dynamic page functionality.
• Global Attributes
o Attributes that can be used with any HTML element, such as id, class, style,
title, lang, tabindex, and aria-*.
o These attributes improve flexibility, accessibility, and user interactivity.

HTML attributes provide critical metadata and additional functionality for web elements, making
the content more interactive, accessible, and customizable. Data attributes offer a flexible way to
store and interact with custom data in a web page.

11. HTML APIs and Advanced Features

• Geolocation API
• Drag and Drop API
• Web Storage API (LocalStorage and SessionStorage)

1. Geolocation API

The Geolocation API allows web applications to access the geographical location of a user's
device. This API is commonly used in applications such as maps, location-based services, and
geotagging.

SOMATECH IT – 0726 674 946 39

What is Geolocation API?

• The Geolocation API provides a way to retrieve the user's current geographic location,
which can include latitude, longitude, altitude, and other location-related information.
• This data is useful for building features like location-aware maps, location-based
recommendations, or gathering geographical data for analytics.

How to Use Geolocation API?

To use the Geolocation API, you can call the [Link] object and its
methods:

• getCurrentPosition(): Retrieves the current position of the user.

• watchPosition(): Watches the user's position and receives updates when the location
changes.
• clearWatch(): Stops the position watch.

Example: Getting the User's Current Location

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

[Link](showPosition,
showError);
} else {
[Link]("location").innerHTML =
"Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
let lat = [Link];
let lon = [Link];
[Link]("location").innerHTML =
"Latitude: " + lat + "<br>Longitude: " + lon;
}

function showError(error) {
switch([Link]) {
case error.PERMISSION_DENIED:

SOMATECH IT – 0726 674 946 40

[Link]("location").innerHTML =
"User denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
[Link]("location").innerHTML =
"Location information is unavailable.";
break;
case [Link]:
[Link]("location").innerHTML = "The
request to get user location timed out.";
break;
case error.UNKNOWN_ERROR:
[Link]("location").innerHTML = "An
unknown error occurred.";
break;
}
}
</script>

In this example, clicking the button triggers the getLocation() function, which attempts to
retrieve the user's geographic location using
[Link](). If successful, it displays the
latitude and longitude; if not, it shows an error message.

Important Considerations:

• Privacy: Geolocation data is sensitive, so users must grant permission for websites to
access their location.
• Accuracy: The accuracy of location data can vary depending on the device and method
used (e.g., GPS, Wi-Fi, IP address).
• Error Handling: Proper error handling is important to inform users if location data is
unavailable or permission is denied.

2. Drag and Drop API

The Drag and Drop API allows users to drag and drop elements within a web page. This feature
is commonly used for interactive user interfaces like file uploads, organizing content, or
rearranging elements on a page.

What is Drag and Drop API?

• The Drag and Drop API enables a web page to handle drag events and specify elements
that can be dragged and dropped.
• It uses event listeners for the dragstart, dragover, dragenter, dragleave, and
drop events to define the drag-and-drop behavior.

SOMATECH IT – 0726 674 946 41

Basic Elements of Drag and Drop:

1. Draggable Element: The element that the user can drag. This can be specified with the
draggable attribute or JavaScript.
2. Drop Target: The area where the dragged item can be dropped. This is typically an HTML
element where a user can place a dragged item.

Example: Implementing Drag and Drop

<div id="drag1" draggable="true"

ondragstart="drag(event)">Drag me!</div>

<div id="div2" ondrop="drop(event)"

ondragover="allowDrop(event)">Drop here</div>

function drag(ev) {
[Link]("text", [Link]); //
Store the ID of the dragged element
}

function drop(ev) {
[Link]();
var data = [Link]("text"); // Get the
stored data (ID of dragged element)
var draggedElement = [Link](data);
[Link](draggedElement); // Append the
dragged element to the drop target
}
</script>

In this example

• The div with the ID drag1 is draggable, and when it’s dragged, the dragstart event
stores its ID in the data transfer object.
• The div with the ID div2 serves as the drop target, and it uses the drop event to append
the dragged element inside it.

SOMATECH IT – 0726 674 946 42

Important Considerations

• Prevent Default Behavior: The ondragover and ondrop events require

[Link]() to prevent the browser’s default handling, which would
otherwise block the drop.
• Data Transfer: During a drag operation, the data being dragged (e.g., element ID, text,
etc.) is stored using the dataTransfer object.
• CSS for Visual Feedback: CSS can be used to enhance the drag-and-drop experience,
e.g., changing the cursor during drag or highlighting valid drop targets.

3. Web Storage API (LocalStorage and SessionStorage)

The Web Storage API provides storage options in the browser that allow data to persist on the
client side. There are two main types of web storage:

• LocalStorage
• SessionStorage

These storage options are typically used for saving user data, preferences, session states, and more.

What is Web Storage API?

The Web Storage API provides a way to store data as key-value pairs in the user's browser,
allowing you to persist data across page reloads and sessions.

• LocalStorage: Stores data with no expiration time. The data remains available even after
the browser is closed and reopened.
• SessionStorage: Stores data for the duration of the page session. Once the browser or tab
is closed, the data is cleared.

Basic Usage

• LocalStorage: Data stored in localStorage persists until it is explicitly deleted.

Example

<button onclick="saveData()">Save Data</button>

<button onclick="retrieveData()">Retrieve Data</button>

SOMATECH IT – 0726 674 946 43

function retrieveData() {
let username = [Link]("username");
alert("Stored username: " + username);
}
</script>

In this example

o [Link]("username", "john_doe") stores the value

"john_doe" under the key "username".
o [Link]("username") retrieves the value associated with
the key "username".
• SessionStorage: Data stored in sessionStorage is available only for the duration of
the page session.

Example

<button onclick="saveSessionData()">Save Session

Data</button>
<button onclick="retrieveSessionData()">Retrieve Session
Data</button>

function retrieveSessionData() {
let sessionID = [Link]("sessionID");
alert("Stored session ID: " + sessionID);
}
</script>

In this example:

o [Link]("sessionID", "12345") stores the

session ID.
o [Link]("sessionID") retrieves the stored session
ID.

Key Methods

• setItem(key, value): Stores a value for a given key.

• getItem(key): Retrieves the value for a given key.
• removeItem(key): Removes the item with the specified key.
• clear(): Clears all stored data.
SOMATECH IT – 0726 674 946 44
• key(index): Retrieves the key name at a given index.
• length: Returns the number of stored items.

Important Considerations

• Storage Limitations: Both LocalStorage and SessionStorage have storage size limits
(typically around 5-10MB).
• Security: Data stored in web storage is not encrypted and can be accessed by JavaScript
running on the same domain. Sensitive data should not be stored here.
• Persistence: localStorage persists across browser sessions, whereas
sessionStorage is cleared when the page session ends.

Summary of Key Points

• Geolocation API: Allows web applications to retrieve the user's geographic location
(latitude, longitude, etc.) using the [Link] object.
• Drag and Drop API: Enables users to drag and drop elements within a web page,
supporting interactive UIs like file uploads or element reordering.
• Web Storage API: Provides two types of storage: localStorage for data persistence
across sessions and sessionStorage for temporary data storage during a single
session.

These HTML APIs and advanced features enable the creation of more interactive, dynamic, and
personalized web applications that can respond to the user's actions and provide richer experiences.

12. Best Practices

• Proper Indentation and Readability

• Accessibility Guidelines (ARIA roles)
• Performance Optimization Tips
• Cross-browser Compatibility

1. Proper Indentation and Readability

What is Proper Indentation?

Proper indentation refers to the consistent use of spaces or tabs to align the code and make it
visually structured. This helps developers (and anyone reading the code) quickly understand its
hierarchy and relationships.

SOMATECH IT – 0726 674 946 45

Why is It Important?

• Improves Code Readability: Proper indentation makes code easier to read, understand,
and maintain.
• Facilitates Collaboration: When multiple developers work on the same codebase, proper
indentation ensures that everyone can easily follow and contribute to the code.
• Helps Debugging: Well-indented code makes it easier to spot errors in logic or structure.

Best Practices:

• Use Consistent Indentation: Choose either spaces or tabs for indentation and stick with it
across the entire project.
• Indent Nested Elements: Any nested HTML elements (inside <div>, <ul>, etc.) should
be indented to show their relationship to parent elements.
• Align Closing Tags: Place closing tags at the same level of indentation as the opening tag.

Example:

<div class="container">
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<p>This is a paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</div>

In this example, you can clearly see the hierarchical structure with consistent indentation.

2. Accessibility Guidelines (ARIA Roles)

What are ARIA Roles?

ARIA (Accessible Rich Internet Applications) roles are attributes that can be added to HTML
elements to improve the accessibility of web pages for users with disabilities. ARIA roles help
assistive technologies (like screen readers) understand the purpose and behavior of elements on
the page.

SOMATECH IT – 0726 674 946 46

Why is Accessibility Important?

• Inclusivity: Ensures that all users, including those with disabilities, can interact with and
understand the content.
• Legal Compliance: Many countries have laws requiring websites to be accessible, such as
the Americans with Disabilities Act (ADA) in the U.S. and the Web Content Accessibility
Guidelines (WCAG).
• SEO Benefits: Accessible sites are easier for search engines to crawl, improving the
overall SEO.

Best Practices

• Use Semantic HTML: Whenever possible, use native HTML elements like <nav>,
<article>, <header>, and <footer>, which inherently have ARIA roles.
• Apply ARIA Roles: Use ARIA attributes to define the role and state of non-semantic
elements, like divs or spans. For example, a button styled as a div should use
role="button".
• Provide Text Alternatives: Use ARIA attributes such as aria-label, aria-
labelledby, or aria-describedby to provide alternative text for elements that
cannot have visible text, such as icons or images.

Example

In this example, the aria-label provides a text description for the button that will be read by
screen readers, improving accessibility.

Common ARIA Roles:

• role="button": Indicates that an element is functioning as a button.

• role="navigation": Denotes a navigation section.
• role="dialog": Marks an element as a modal dialog.

3. Performance Optimization Tips

Why is Performance Important?

Performance optimization ensures that your web pages load quickly and run efficiently, providing
a better user experience and improving SEO. Slow pages can frustrate users and negatively impact
conversion rates.

SOMATECH IT – 0726 674 946 47

Best Practices

• Minimize HTTP Requests: Reduce the number of HTTP requests needed to load your
page by combining CSS and JavaScript files and using image sprites.
• Compress Files: Minify CSS, JavaScript, and HTML files to reduce file sizes, which in
turn reduces the time required to download them.
• Optimize Images: Compress images and use appropriate formats (JPEG, PNG, WebP).
Ensure that images are not larger than necessary and use responsive images for different
screen sizes.
• Lazy Loading: Use lazy loading for images and other assets, so they are only loaded when
they are visible in the viewport. This reduces initial page load time.
• Use Caching: Implement browser caching to store assets locally, reducing the need to re-
download resources on subsequent visits.
• Use a Content Delivery Network (CDN): Serve static assets like images, CSS, and
JavaScript from a CDN to reduce load times by distributing content across multiple servers
worldwide.

Example

<img src="[Link]" loading="lazy" alt="Description of

image">

In this example, the loading="lazy" attribute ensures that the image is only loaded when it
becomes visible in the viewport.

4. Cross-browser Compatibility

What is Cross-browser Compatibility?

Cross-browser compatibility refers to the practice of ensuring that a web page works consistently
across different browsers (like Chrome, Firefox, Safari, Edge) and devices (desktops, smartphones,
tablets).

Why is it Important?

• User Experience: Ensures that all users, regardless of their browser or device, can access
and use the website without issues.
• Market Reach: Increases the potential audience by supporting various browsers and
devices, some of which may be preferred by different users.
• Consistent Appearance: Ensures that your website looks and functions as intended on all
platforms.

SOMATECH IT – 0726 674 946 48

Best Practices:

• Use Vendor Prefixes: Some CSS properties may require vendor prefixes for different
browsers (e.g., -webkit- for Safari/Chrome, -moz- for Firefox).
• Test Across Browsers: Regularly test your site on multiple browsers and devices to ensure
consistent performance and appearance.
• Graceful Degradation: Ensure that the core functionality of the website remains usable,
even if some advanced features don't work in older browsers.
• Feature Detection: Use JavaScript libraries like Modernizr to detect which features are
supported in the user’s browser and provide fallbacks or alternatives.
• Avoid Browser-Specific Features: Stick to standard HTML, CSS, and JavaScript to avoid
browser-specific quirks or incompatibilities.

Example:

/* Using vendor prefixes for cross-browser compatibility */

.box {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}

In this example, the -webkit- and -moz- prefixes ensure that the transition property works in
Webkit-based (Safari/Chrome) and Gecko-based (Firefox) browsers, while the standard
transition property works in other modern browsers.

Summary of Best Practices

• Proper Indentation and Readability: Maintain consistent indentation and structure to

make your code easier to read, maintain, and debug.
• Accessibility Guidelines (ARIA Roles): Use semantic HTML and ARIA roles to improve
the accessibility of your site for users with disabilities, enhancing inclusivity and meeting
legal requirements.
• Performance Optimization Tips: Optimize loading speed through techniques like
minimizing HTTP requests, compressing files, lazy loading, and using CDNs.
• Cross-browser Compatibility: Test your website across different browsers and devices
to ensure that it functions and appears correctly for all users, and use techniques like vendor
prefixes and feature detection to handle browser-specific quirks.

By following these best practices, you can create websites that are well-structured, accessible,
performant, and compatible across different browsers and devices, providing a seamless user
experience for all.

SOMATECH IT – 0726 674 946 49

13. HTML with CSS and JavaScript Integration

• Linking External CSS and JS Files

• Inline and Internal CSS
• Using JavaScript in HTML (<script>)

1. Linking External CSS and JS Files

Linking External CSS

CSS is used to style HTML elements. To keep your HTML and CSS code separate and
maintainable, it's common to link external CSS files to your HTML document.

• Linking CSS in the <head> Section: Use the <link> tag to reference an external CSS
file. The href attribute specifies the path to the CSS file, and the rel="stylesheet"
attribute defines the relationship between the document and the linked file.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>

In this example, the [Link] file is linked in the <head> section, which means all the styles
defined within that file will be applied to the HTML content.

Linking External JavaScript

JavaScript is used to add interactivity to your web pages. To link an external JavaScript file, use
the <script> tag with the src attribute pointing to the JavaScript file.

• Placing JavaScript at the Bottom: It is a common practice to place the <script> tag
right before the closing </body> tag, to ensure that the page content is loaded before the
JavaScript is executed.
SOMATECH IT – 0726 674 946 50
Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>

In this example, the [Link] file is linked at the end of the body section, ensuring that the
HTML content is loaded before the script is executed.

2. Inline and Internal CSS

Inline CSS

Inline CSS is defined directly within an HTML element using the style attribute. It is typically
used for quick, small styles on a single element.

• Use Case: Inline CSS is useful when you need to apply a style to just one specific element,
but it should be avoided for large-scale styling because it mixes content with presentation
and makes the code harder to maintain.

Example:

<p style="color: red; font-size: 20px;">This is an inline-

styled paragraph.</p>

In this example, the <p> element has the styles color: red and font-size: 20px directly
applied via the style attribute.

Internal CSS

Internal CSS is written within the <style> tag in the HTML document's <head> section. It is
used to apply styles to elements on a specific page and keeps the HTML and CSS separated, while
still being part of the same file.

SOMATECH IT – 0726 674 946 51

• Use Case: Internal CSS is useful when you want to style a single document but still keep
the styles in a central location within the document.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My Website</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>

In this example, the <style> tag within the <head> section contains the internal CSS, which is
applied to the body and heading elements.

3. Using JavaScript in HTML (<script>)

JavaScript can be added to an HTML page in two primary ways: inline within an element (using
the onclick, onchange, etc. attributes) or by using the <script> tag to reference external
JavaScript files.

Adding JavaScript Inline in HTML Elements

You can add JavaScript directly within HTML elements by using event handler attributes like
onclick, onmouseover, etc. This approach is useful for simple interactions.

SOMATECH IT – 0726 674 946 52

Example:

<button onclick="alert('Button clicked!')">Click

Me</button>

In this example, when the button is clicked, an alert box appears with the message "Button
clicked!" thanks to the inline JavaScript function defined within the onclick attribute.

Using the <script> Tag

To add JavaScript code within your HTML file, use the <script> tag. JavaScript can be placed
either in the <head> or at the end of the <body> section.

• Inline JavaScript: You can write JavaScript directly between the <script> tags.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My Website</title>
<script>
function showMessage() {
alert('Hello, this is a message!');
}
</script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
</body>
</html>

In this example, the showMessage() function is written inside the <script> tag, and when
the button is clicked, it triggers the function, displaying the alert.

• External JavaScript: It's a better practice to keep JavaScript code in a separate file and
link to it from the HTML document.

Example:

<!DOCTYPE html>
<html lang="en">
<head>

SOMATECH IT – 0726 674 946 53

In this example, the [Link] file contains the JavaScript code, and it is linked in the <head>
section. The function showMessage() would be defined in the external JavaScript file.

Best Practices for JavaScript Placement

• Place JavaScript at the End of the Body: To ensure that HTML elements are loaded
before JavaScript is executed, it’s generally a good practice to place <script> tags just
before the closing </body> tag.

Example:

<body>
<h1>Welcome to My Website</h1>
<script src="[Link]"></script>
</body>

• Use defer or async for External Scripts: If you must place the <script> tag in the
<head>, use the defer attribute to ensure the script executes after the HTML document
is fully parsed, or async to load the script asynchronously.

Example:

<script src="[Link]" defer></script>

Summary of HTML with CSS and JavaScript Integration

• Linking External CSS and JS Files: Use <link> for external CSS files and <script>
for JavaScript files to separate concerns and maintain modular code.
• Inline and Internal CSS: Inline CSS is used for styling individual elements, while internal
CSS is placed in the <style> tag in the document's <head> section for page-specific
styles.
• Using JavaScript in HTML: JavaScript can be added inline via event attributes or
included using <script> tags, either embedded in the HTML or linked as an external
file. External JavaScript is preferred for maintainability and performance.
SOMATECH IT – 0726 674 946 54
By properly integrating CSS and JavaScript, you can build dynamic, interactive, and well-styled
web pages while keeping your code organized and maintainable.

14. Debugging and Testing

• Developer Tools in Browsers

• HTML Validators

1. Developer Tools in Browsers

What are Developer Tools?

Developer tools (DevTools) are built-in tools provided by most modern web browsers (such as
Chrome, Firefox, and Edge) that allow developers to inspect, debug, and analyze their web pages.
These tools are essential for troubleshooting and optimizing web pages during the development
process.

Key Features of Developer Tools

1. Inspecting HTML and CSS

o Elements Panel: This allows you to view the HTML structure of the page and
interact with it. You can select elements on the page and modify their attributes,
styles, and content in real-time.
o Styles Panel: You can inspect and edit the CSS styles applied to any selected
HTML element. It also shows you which CSS file a style belongs to, making it easy
to find and fix issues.

Example: Right-click on an element and select "Inspect" to view its HTML and CSS in
the browser.

2. Console
o The Console Panel is used to view logged messages, warnings, and errors in your
JavaScript code. It's a useful tool for debugging JavaScript issues, testing snippets
of code, and reviewing logs.
o It can also be used to interact with the JavaScript runtime directly by typing
commands.

Example: [Link]('Hello, World!') outputs "Hello, World!" in the

console.

SOMATECH IT – 0726 674 946 55

3. Network Panel
o The Network Panel shows all the network requests (such as images, scripts, and
APIs) made by the page. You can view request and response headers, status codes,
and the time taken for each request.
o This panel is essential for troubleshooting performance issues, failed API calls, and
missing resources.
4. Performance Panel
o This tool helps you analyze the performance of your webpage. You can record and
inspect page load times, runtime performance, and the execution of JavaScript
functions.
o It helps identify bottlenecks or slow areas in your code that may be affecting the
user experience.
5. Mobile Emulation
o Developer tools allow you to simulate various mobile devices and screen sizes to
ensure your website is responsive and functions properly on different devices.
o You can change the device orientation, test touch events, and inspect media queries
in real-time.
6. JavaScript Debugger
o The Debugger Panel allows you to set breakpoints, step through JavaScript code,
and inspect variables during runtime. This is a critical feature for diagnosing and
fixing issues in complex JavaScript applications.

Example: Set a breakpoint in the code and refresh the page to pause at the breakpoint for
detailed inspection.

Using Developer Tools to Debug HTML

• Inspect HTML Structure: You can view how the HTML is rendered and check for
missing or misplaced elements.
• Edit CSS: You can dynamically modify the page's CSS to test changes without needing to
refresh the page, which speeds up the process of troubleshooting layout and styling issues.
• View Console Errors: Errors related to HTML, CSS, or JavaScript are displayed in the
console, helping you quickly pinpoint problems.

2. HTML Validators

What is an HTML Validator?

An HTML Validator is a tool that checks the syntax and structure of your HTML code to ensure
it adheres to the official HTML specifications (W3C standards). Validators help identify errors or
warnings that may affect the functionality or appearance of your web page.

Why Use an HTML Validator?

• Ensure Syntax Compliance: HTML Validators check your code for syntax errors (e.g.,
missing closing tags, incorrect nesting) and provide suggestions for corrections.

SOMATECH IT – 0726 674 946 56

• Improve Compatibility: By following HTML standards, you increase the likelihood that
your website will work properly across different browsers and devices.
• SEO Benefits: Well-structured HTML improves accessibility and search engine
optimization (SEO), as search engines can better parse and index your content.
• Accessibility: Valid HTML code is more likely to be accessible to assistive technologies,
enhancing the user experience for people with disabilities.

Popular HTML Validators:

1. W3C Markup Validation Service: The W3C Validator is the most used validator,
provided by the World Wide Web Consortium (W3C). It checks the validity of your HTML
code against the W3C's official standards.
o To use the W3C Validator, simply enter the URL of your website, or you can
directly upload the HTML file for validation.

Example:

o URL: [Link]
o This tool will scan your HTML and provide a detailed report of any errors,
warnings, and suggestions.
2. HTMLHint: HTMLHint is an open-source HTML linting tool that checks for various
issues, including syntax errors, accessibility problems, and best practices.
o It provides a more configurable set of rules and can be used both online and locally
as part of your development workflow.
o You can integrate HTMLHint into your build tools or IDE (Integrated Development
Environment) to automatically validate HTML files as you write code.

Example:

o URL: [Link]
3. Nu HTML Checker ([Link]): The Nu HTML Checker is a validator that checks
HTML5 documents. It is known for its accuracy and modern HTML5 features.

Example:

o URL: [Link]

Common HTML Errors Detected by Validators:

• Unclosed Tags: Missing closing tags for elements like <div>, <span>, <p>, etc.
• Unmatched Tags: A tag that is not properly nested or is incorrectly placed.
• Deprecated Elements: HTML elements that are no longer recommended or supported in
modern HTML (e.g., <font>, <center>).
• Attribute Errors: Missing or invalid attributes, such as using the wrong type for href or
src.

SOMATECH IT – 0726 674 946 57

• Improper Nesting: For example, placing block-level elements (like <div>) inside inline
elements (like <span>).
• Missing Alt Text for Images: Accessibility issues, such as images missing alt attributes,
which help users with visual impairments.

Example of a W3C Validator Output:

Line 24, Column 5: element "img" is missing required

attribute "alt".

In this example, the validator detects that an image is missing the alt attribute, which is important
for accessibility.

How to Use HTML Validators:

1. Upload a File or URL: You can either upload an HTML file directly or enter the URL of
a live webpage for validation.
2. Check for Errors: The validator will provide a report detailing any errors or warnings
found in your HTML.
3. Fix the Issues: Review the errors and make the necessary corrections in your HTML code.
4. Re-Validate: After fixing the issues, re-run the validator to ensure your HTML is now
valid.

Summary of Debugging and Testing Practices:

1. Developer Tools in Browsers:

o Use the Elements Panel to inspect and modify HTML/CSS.
o Use the Console to check JavaScript logs and errors.
o Use the Network Panel to troubleshoot failed resource requests.
o Use the Performance Panel to optimize page load times and performance.
o Use the Mobile Emulation feature to test responsiveness across devices.
o Utilize the JavaScript Debugger for setting breakpoints and step-through
debugging.
2. HTML Validators:
o Use W3C Validators to ensure HTML compliance with standards and catch
common errors.
o Other validators like HTMLHint and Nu HTML Checker can be integrated into
your workflow for continuous validation.
o Validators help with syntax errors, accessibility, SEO, and cross-browser
compatibility.

By utilizing both Developer Tools for real-time inspection and HTML Validators for
comprehensive code checks, you can debug and test your HTML code efficiently and ensure a
robust, accessible, and well-structured website.

SOMATECH IT – 0726 674 946 58

15. HTML5 New Features

• Structural Elements (<main>, <nav>)

• Form Enhancements (New input types)
• Audio and Video Support
• Interactive Elements

1. Structural Elements (<main>, <nav>)

<main> Element:

The <main> element is a structural HTML5 element introduced to define the dominant content
of the <body> of the document. It represents the primary content of the document, excluding
elements like headers, footers, and sidebars.

• Purpose: The <main> element improves document structure, making it clear to browsers
and assistive technologies what the central content is. It helps with accessibility and SEO
because search engines and screen readers can quickly identify the core content of the page.
• Usage: The <main> tag is typically used to wrap the most significant content of a
webpage. It can only appear once per page.

Example:

<body>
<header>
<h1>Website Header</h1>
</header>

<main>
<h2>Main Content Area</h2>
<p>This is where the primary content of the page goes.</p>
</main>

<footer>
<p>Website Footer</p>
</footer>
</body>

<nav> Element:

The <nav> element is another structural HTML5 element that defines a navigation section,
typically used to wrap links or navigation menus. It indicates that the enclosed links are for
navigating the website or document.

SOMATECH IT – 0726 674 946 59

• Purpose: The <nav> tag helps improve the semantics of the document by clearly marking
navigation sections. This aids in accessibility, allowing screen readers and search engines
to identify navigation areas of a page.
• Usage: The <nav> tag can contain links, menus, and other navigation-related content.

Example:

<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

2. Form Enhancements (New Input Types)

HTML5 introduced several new input types that provide enhanced form functionalities, making it
easier to create more interactive and user-friendly forms.

New Input Types:

• <input type="email">: Used for entering an email address. Browsers often validate
the email format before submitting.

Example:

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

• <input type="tel">: Allows for phone number input. Browsers may display a
number-specific keyboard on mobile devices.

Example:

<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone">

• <input type="url">: Used for entering URLs. It also validates that the entered value
is in the correct URL format.

SOMATECH IT – 0726 674 946 60

Example:

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

• <input type="date">: Used for selecting a date. This displays a calendar widget for
easy date selection.

Example:

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

• <input type="time">: Allows the user to input a specific time.

Example:

<label for="meeting">Meeting Time:</label>

• <input type="number">: Enables numeric input with built-in validation for

numbers only.

Example:

<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1"
max="10">

• <input type="range">: Used for creating a slider to choose a value from a range.

Example:

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

• <input type="color">: Allows the user to select a color using a color picker.

Example:

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

These new input types reduce the need for JavaScript to handle common validations and form
enhancements, providing better user experience and interface design.

SOMATECH IT – 0726 674 946 61

3. Audio and Video Support

HTML5 introduced native support for embedding and playing audio and video content without
relying on third-party plugins like Flash.

<audio> Element:

The <audio> element is used to embed sound content such as music, podcasts, or sound effects.
It supports various file formats like MP3, Ogg, and WAV.

• Attributes:
o controls: Adds built-in playback controls (play, pause, volume).
o autoplay: Automatically starts playing when the page loads.
o loop: Loops the audio when it finishes playing.

Example:

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

<video> Element:

The <video> element allows you to embed video content directly in HTML. It supports formats
like MP4, WebM, and Ogg.

• Attributes:
o controls: Adds built-in video controls (play, pause, volume, fullscreen).
o autoplay: Automatically starts playing the video when the page loads.
o loop: Loops the video when it finishes playing.
o muted: Mutes the audio of the video by default.

Example:

<video controls width="600">

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

These new HTML5 elements remove the need for plugins like Flash, ensuring better browser
compatibility and user experience.

SOMATECH IT – 0726 674 946 62

4. Interactive Elements

HTML5 introduced several new elements that allow for better interactivity and user engagement
on web pages.

<details> and <summary> Elements:

The <details> element allows you to create a collapsible content block. The <summary>
element is used to define the clickable header that toggles the visibility of the content.

• Purpose: These elements provide a way to show and hide content on demand, improving
the user experience, especially for FAQs, menus, and information that may be secondary.

Example:

<details>
<summary>Click to learn more</summary>
<p>This is some additional information that can be
toggled.</p>
</details>

<progress> Element:

The <progress> element represents a progress bar to indicate the completion of a task (e.g., file
upload or download).

• Attributes:
o value: Specifies the current progress value.
o max: Specifies the maximum value.

Example:

<progress value="70" max="100">70%</progress>

<meter> Element:

The <meter> element represents a scalar measurement within a known range (e.g., disk usage,
temperature, or battery level).

• Attributes:
o value: Specifies the current value.
o min and max: Define the range of the value.

SOMATECH IT – 0726 674 946 63

Example:

<meter value="0.6" min="0" max="1">60%</meter>

Summary of HTML5 New Features

1. Structural Elements (<main>, <nav>): Introduces more meaningful structural tags to

enhance semantic web design, improving accessibility and SEO.
2. Form Enhancements: New input types like email, date, time, range, and color provide
built-in validation and enhance user interaction with forms.
3. Audio and Video Support: HTML5 natively supports audio and video embedding,
offering controls for playback and eliminating the need for plugins.
4. Interactive Elements: New elements like <details>, <progress>, and <meter>
introduce better interactive features for web users, enhancing usability and engagement.

These new features in HTML5 significantly improve the functionality, interactivity, and
accessibility of web pages, making it easier to build modern, dynamic websites without relying on
external plugins.

SOMATECH IT – 0726 674 946 64

HTML Unleashed: A Comprehensive Guide
No ratings yet
HTML Unleashed: A Comprehensive Guide
7 pages
Basic HTML Elements Explained
No ratings yet
Basic HTML Elements Explained
5 pages
Overview of HTML Basics and History
No ratings yet
Overview of HTML Basics and History
62 pages
HTML Basics and Structure Guide
No ratings yet
HTML Basics and Structure Guide
9 pages
Website Design and HTML Basics Guide
No ratings yet
Website Design and HTML Basics Guide
17 pages
Introduction To HTML
No ratings yet
Introduction To HTML
4 pages
Getting Started With HTML & CSS
No ratings yet
Getting Started With HTML & CSS
34 pages
HTML Essentials for Beginners Guide
No ratings yet
HTML Essentials for Beginners Guide
61 pages
The Complete HTML Ebook
No ratings yet
The Complete HTML Ebook
6 pages
Comprehensive HTML Tutorial Guide
No ratings yet
Comprehensive HTML Tutorial Guide
42 pages
Evolution of HTML: A Historical Overview
No ratings yet
Evolution of HTML: A Historical Overview
42 pages
Unit2 HTML
No ratings yet
Unit2 HTML
37 pages
Web Development Web Development For Beginners in HTML by Vickler, Andy (Vickler, Andy)
No ratings yet
Web Development Web Development For Beginners in HTML by Vickler, Andy (Vickler, Andy)
240 pages
HTML5 and CSS3 Lab Guide
No ratings yet
HTML5 and CSS3 Lab Guide
90 pages
HTML and CSS Web Development Guide
No ratings yet
HTML and CSS Web Development Guide
73 pages
HTML Introduction 1
No ratings yet
HTML Introduction 1
75 pages
Understanding HTML Basics and Usage
No ratings yet
Understanding HTML Basics and Usage
18 pages
HTML Basics: Structure and Best Practices
No ratings yet
HTML Basics: Structure and Best Practices
9 pages
Introduction to Web Technologies Guide
No ratings yet
Introduction to Web Technologies Guide
134 pages
Web Designing 1 & 2 Unit
No ratings yet
Web Designing 1 & 2 Unit
17 pages
Free HTML Tutorial for Beginners PDF
No ratings yet
Free HTML Tutorial for Beginners PDF
9 pages
HTML, CSS, and PHP Basics Guide
No ratings yet
HTML, CSS, and PHP Basics Guide
48 pages
HTML Basics with Code Examples
No ratings yet
HTML Basics with Code Examples
5 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
3 pages
Web Development Basics and Languages
No ratings yet
Web Development Basics and Languages
25 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
12 pages
HyperText Markup Language
No ratings yet
HyperText Markup Language
74 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
50 pages
Understanding HTML Basics and Structure
No ratings yet
Understanding HTML Basics and Structure
9 pages
HTML Notes in English
No ratings yet
HTML Notes in English
30 pages
Web Development Basics and Roadmaps
No ratings yet
Web Development Basics and Roadmaps
47 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
49 pages
Introduction to HTML Basics and Usage
No ratings yet
Introduction to HTML Basics and Usage
52 pages
Create a Personal Web Portfolio
No ratings yet
Create a Personal Web Portfolio
29 pages
History and Basics of HTML
No ratings yet
History and Basics of HTML
42 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
5 pages
Project Internship Report On Web Development and Web Desinging
No ratings yet
Project Internship Report On Web Development and Web Desinging
15 pages
Accessible Semantic HTML Guide
No ratings yet
Accessible Semantic HTML Guide
69 pages
Introduction to HTML Basics and Usage
No ratings yet
Introduction to HTML Basics and Usage
33 pages
Ncit 121 Basic HTML Web Programming
No ratings yet
Ncit 121 Basic HTML Web Programming
111 pages
Introduction To HTML For Beginners v3
No ratings yet
Introduction To HTML For Beginners v3
4 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
19 pages
Understanding HTML Basics and History
No ratings yet
Understanding HTML Basics and History
8 pages
IWT Module 4
No ratings yet
IWT Module 4
48 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
20 pages
HTML Basics: Structure and Usage Guide
No ratings yet
HTML Basics: Structure and Usage Guide
6 pages
HTML Basics: History and Structure Guide
No ratings yet
HTML Basics: History and Structure Guide
7 pages
An Introduction To HTML For Beginners
No ratings yet
An Introduction To HTML For Beginners
2 pages
HTML - New With Html5 Controls
No ratings yet
HTML - New With Html5 Controls
136 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
33 pages
Lesson 3 Notes
No ratings yet
Lesson 3 Notes
5 pages
Lesson 3: HTML Elements Overview
No ratings yet
Lesson 3: HTML Elements Overview
5 pages
Understanding HTML Structure and Elements
No ratings yet
Understanding HTML Structure and Elements
122 pages
Web Designing Notes
No ratings yet
Web Designing Notes
222 pages
Understanding HTML and Hyperlinks
No ratings yet
Understanding HTML and Hyperlinks
41 pages
HTML Basics Using Notepad
No ratings yet
HTML Basics Using Notepad
13 pages
HTML & CSS: Fundamentals and History
No ratings yet
HTML & CSS: Fundamentals and History
23 pages
HTML and CSS Course Outline
No ratings yet
HTML and CSS Course Outline
61 pages
HTML Basics: Structure & Examples
No ratings yet
HTML Basics: Structure & Examples
5 pages
ENR Ticket Reservation Details
No ratings yet
ENR Ticket Reservation Details
1 page
Standard Bed Sizes Chart
No ratings yet
Standard Bed Sizes Chart
3 pages
Elynk To Oracle Fastconnect
No ratings yet
Elynk To Oracle Fastconnect
12 pages
7th Grade Language Test on Film Analysis
No ratings yet
7th Grade Language Test on Film Analysis
5 pages
Google My Business Help
No ratings yet
Google My Business Help
1 page
Service Manual Acer Aspire 4736
100% (1)
Service Manual Acer Aspire 4736
196 pages
Understanding Innovation Types and Impact
No ratings yet
Understanding Innovation Types and Impact
45 pages
LTE Technology Overview and Optimization
No ratings yet
LTE Technology Overview and Optimization
31 pages
User Research Brief Workbook Guide
No ratings yet
User Research Brief Workbook Guide
18 pages
Network Fundamentals Final Exam 2013
No ratings yet
Network Fundamentals Final Exam 2013
6 pages
Network Forensics: Techniques & Technologies
No ratings yet
Network Forensics: Techniques & Technologies
64 pages
Marketing Campaign Cost Analysis
No ratings yet
Marketing Campaign Cost Analysis
15 pages
JNCIP-ENT Exam Prep Guide
No ratings yet
JNCIP-ENT Exam Prep Guide
3 pages
Basics of Networking
No ratings yet
Basics of Networking
13 pages
Public Domain Book Access Guidelines
100% (1)
Public Domain Book Access Guidelines
215 pages
Link Farming and Nudges in Social Media
No ratings yet
Link Farming and Nudges in Social Media
6 pages
Login Guide for Smarters Player Lite
100% (1)
Login Guide for Smarters Player Lite
31 pages
Understanding Information Security Basics
No ratings yet
Understanding Information Security Basics
34 pages
Network Architecture Upgrade Proposal
100% (2)
Network Architecture Upgrade Proposal
14 pages
Basic Computer Abbreviations List
No ratings yet
Basic Computer Abbreviations List
10 pages
Commsquare Traffic Analysis Solutions
No ratings yet
Commsquare Traffic Analysis Solutions
4 pages
Pro-Forma Application for PEZA eZTS
No ratings yet
Pro-Forma Application for PEZA eZTS
2 pages
Pakistan-India Tensions and Slurs
No ratings yet
Pakistan-India Tensions and Slurs
7 pages
Cisco Router and Switch Password Setup
No ratings yet
Cisco Router and Switch Password Setup
4 pages
Excel Expense Tracking Guide
No ratings yet
Excel Expense Tracking Guide
4 pages
Social Media Impact on Grade 11 Students
No ratings yet
Social Media Impact on Grade 11 Students
7 pages
New Year's Eve Ball Drop 2025
No ratings yet
New Year's Eve Ball Drop 2025
6 pages
Understanding SAN, NAS, and RAID Systems
No ratings yet
Understanding SAN, NAS, and RAID Systems
13 pages
Android vs iOS: Key Differences
No ratings yet
Android vs iOS: Key Differences
4 pages
Cyber Security Lab Manual
No ratings yet
Cyber Security Lab Manual
23 pages