Modern HTML

Assignment

Solution
Assignment Solution
1. List out the features of HTML5.

Ans: Some of the main features of HTML5 are as follows -

Improved Multimedia support - HTML5 allows for the integration of multimedia elements such as audio and
video directly into web pages without the need for plugins like Flash.

Canvas element - HTML5 introduced the <canvas> element, which allows for dynamic, interactive graphics to
be created and manipulated within a web page.

Geolocation API - HTML5 provides an API for obtaining the user's location, enabling web applications to offer
location-based services.

Local Storage - HTML5 introduced the localStorage API, which allows for the storage of data on the user's
device, improving performance and reducing the need for round-trips to the server.

New Structural Elements - HTML5 introduced new semantic elements such as <header>, <footer>, <nav>, and
<article> that makes it easier to structure and organize content on a web page.

Form Improvements - HTML5 introduced several improvements to forms, including new input types like date,
time, and color, as well as new attributes such as required and autofocus.

Accessibility improvements - HTML5 provides better support for accessibility, including the ability to provide
alternative text for images and improved support for screen readers.

2. What are HTML Entities? List out 5 commonly used HTML entities.

HTML Entities:

HTML entities are special codes that represent reserved characters, symbols, or characters with specific
meanings in HTML. They are used to display characters that might otherwise be interpreted as HTML code or
cause rendering issues in web browsers. HTML entities are written using an ampersand (&) followed by a
specific code or name, and ending with a semicolon (;).

5 Commonly Used HTML Entities:

&lt; - Represents the less-than symbol <.

Example: <p>This is an example &lt;em&gt;text&lt;/em&gt;.</p>

&gt; - Represents the greater-than symbol >.

Example: <p>For more information, visit our website &gt; <a href="#">here</a>.</p>

&amp; - Represents the ampersand symbol &.

Example: <p>For further details, contact us &amp; we'll assist you.</p>

&quot; - Represents a double quotation mark "

Example: <p>The title of the book is "The Great Gatsby".</p>

&copy; - Represents the copyright symbol ©.

Example: <p>&copy; 2023 ACME Corporation. All rights reserved.</p>

Full Stack Web Development
Assignment Solution
3. Define accessibility in the context of web development. Discuss why it's essential to create accessible
websites and how it benefits different user groups

Accessibility in Web Development: Accessibility in web development refers to designing and coding websites
in a way that ensures people with disabilities can perceive, understand, navigate, and interact with digital
content effectively. It involves making web content inclusive and usable for everyone, regardless of their
abilities.

Importance of Accessible Websites:

Inclusivity: Accessible websites ensure that everyone, including people with disabilities, can access and use
online information and services.

Legal Compliance: Many countries have laws requiring websites to be accessible, avoiding legal issues and
promoting equal access.

User Experience: Accessible design often leads to improved user experiences for everyone, including clear
navigation and content structure.

Business Growth: Accessible websites reach a wider audience, increasing engagement, loyalty, and potential
customer base.

Benefits for User Groups:

Visual Impairments: Accessibility provides screen reader support and text alternatives, aiding blind and
visually impaired users.

Hearing Impairments: Captions and transcripts benefit those with hearing impairments by making audio
content understandable.

Motor Disabilities: Keyboard navigation and easy-to-click elements assist users with motor limitations.

Cognitive Disabilities: Accessible design simplifies content and layout, aiding individuals with cognitive
challenges.

Elderly Users: Accessible websites accommodate age-related limitations, ensuring usability for elderly users.

Mobile Users: Accessible design improves mobile experiences through simplified and responsive layouts

List any 3 ways which help us in improving the accessibility of HTML

Use Semantic HTML Elements: Using semantic HTML elements helps improve accessibility by providing
meaningful structure to your content. Semantic elements like <header>, <nav>, <main>, <article>, and <footer>
convey the purpose of different sections to assistive technologies, making it easier for users with disabilities to
navigate and understand the content.

Full Stack Web Development

Assignment Solution
Provide Alt Text for Images: Adding descriptive alt text to images using the alt attribute ensures that users who
cannot see the images can understand their content and purpose. Screen readers read aloud the alt text,
making visual content accessible to people with visual impairments. Aim to make alt text concise, informative,
and relevant to the image.

Use Color with Care: Color plays an important role in web design, but it should not be the only means of
conveying information. Ensure that color is not the sole indicator of meaning. For example, when using error
messages, pair color with text that explains the error. Additionally, maintain sufficient color contrast between
text and background to enhance readability for users with low vision.

5. Create a web page that highlights the features of HTML5. Use appropriate semantic tags to structure the
content and showcase at least three key features of HTML5 with explanations.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

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

<title>HTML5 Features Showcase</title>

</head>

<body>

<header>

<h1>HTML5 Features Showcase</h1>

<p>Welcome to our beginner-friendly webpage showcasing HTML5 features.</p>

</header>

<section>

<h2>Feature 1: Video Playback</h2>

<p>

HTML5 introduced the <code>&lt;video&gt;</code> element for embedding

videos directly in web pages.

</p>

<video width="400" controls>

<source src="sample-video.mp4" type="video/mp4" />

Your browser does not support the video tag.

</video>

</section>

<section>

<h2>Feature 2: Form Validation</h2>

<p>

HTML5 offers built-in form validation, reducing the need for custom

JavaScript code.

</p>

<form>

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

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

<br />

Full Stack Web Development

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

</form>

</section>

<section>

<h2>Feature 3: Semantic Tags</h2>

<p>

HTML5 introduced semantic tags like <code>&lt;header&gt;</code>,

<code>&lt;nav&gt;</code>, <code>&lt;main&gt;</code>, and more, which

improve page structure and accessibility.

</p>

<article>

<h3>Article Title</h3>

<p>

This is a sample article content. Semantic tags make it easier to

structure your content and improve search engine optimization.

</p>

</article>

</section>

<footer>

<p>Created by Your Name &copy; 2023</p>

</footer>

</body>

</html>
Output:

Full Stack Web Development

Assignment Solution
6. Create a simple web page which has a table. The table must have 2 columns HTML and HTML5. The table
should include a minimum of three rows describing the differences between HTML and HTML5.

Solution:
<!-- 10. Create a simple webpage which has a table. The table must have 2 columns HTML and
HTML5. The table should include minimum three rows describing the differences between HTML
and HTML5. -->

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

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

<title>HTML v/s HTML5</title>

</head>

<body>

<h1>HTML v/s HTML5</h1>

<table border="1">

<thead>

<tr>

<th>HTML</th>

<th>HTML5</th>

</tr>

</thead>

<tbody>

<tr>

<td>

It required plugins like Adobe Flash to support audio and video

content.

</td>

<td>

Provides built-in support for multimedia elements such as video and

audio without the need for a plugin.

</td>

</tr>

<tr>

<td>It has fewer elements as compared to HTML5.</td>

<td>

It includes new elements and form attributes such as time, date, and

colour. Required and autofocus in input types of the tag element as

well.

</td>

</tr>

<tr>

<td>It does not have support for local storage.</td>

<td>It has support for local storage i.e. localStorage.</td>

</tr>
Full Stack Web Development
Assignment Solution
<tr>

<td>

Less semantic elements, thereby providing less web accessibility

features.

</td>

<td>

<p>

It supports more semantic elements, such as &lt;header&gt;,

&lt;footer&gt;, &lt;nav&gt;, and &lt;article&gt;, thereby

improving accessibility.

</p>

</td>

</tr>

</tbody>

</table>

</body>

</html>
Output:

Full Stack Web Development