Scribd
Upload
13 views

CSC336-WT Lec5 Slides

Lecture #5 covers HTML5, the latest version of the HTML standard, highlighting its key features such as responsive design, multimedia support, and semantic elements. It emphasizes the importance of semantic HTML for accessibility and SEO, and introduces various HTML5 elements like <header>, <footer>, <article>, and <section>. The lecture also discusses new input types, storage options, and the broad browser compatibility of HTML5.

Uploaded by

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

CSC336-WT Lec5 Slides

Lecture #5 covers HTML5, the latest version of the HTML standard, highlighting its key features such as responsive design, multimedia support, and semantic elements. It emphasizes the importance of semantic HTML for accessibility and SEO, and introduces various HTML5 elements like <header>, <footer>, <article>, and <section>. The lecture also discusses new input types, storage options, and the broad browser compatibility of HTML5.

Uploaded by

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

Lecture # 5

CSC336 Web Technologies


Credit Hours: 3(2, 1)

Course Instructor: SAIF ULLAH IJAZ


Lecturer CS Dept, CUI Vehari
MSc University of Leicester, UK
BSc COMSATS University Islamabad

Ethics in Information Technology, Sixth Edition 1


Introduction
to HTML5
What is HTML5?

<!DOCTYPE html>

HTML5 IS THE LATEST VERSION OF IT PROVIDES NEW ELEMENTS, FOCUSES ON BETTER SEMANTICS,
THE HTML STANDARD. ATTRIBUTES, AND BEHAVIORS FOR MULTIMEDIA SUPPORT, AND
MODERN WEB DEVELOPMENT. DEVICE INDEPENDENCE.
Key Features of HTML5

1. Responsive Design:
o websites automatically adjust their layout and content based on the screen size
2. Viewport Meta Tag:
o It ensures that websites scale correctly on different screens.
3. Flexible Multimedia:
o HTML5 supports native multimedia (video and audio) without requiring third-party plugins (like Flash)
4. Cross-Platform Compatibility:
o HTML5 offers features such as the <canvas> element, which allows developers to build interactive and
graphical content that works across multiple devices without requiring additional software.
5. Forms and Input Types:
o HTML5 introduces new input types (like email, tel, date, etc.) that automatically adjust for different devices.
For example, a tel input type would bring up a numeric keypad on a smartphone
6. Offline Support:
o HTML5 includes technologies like localStorage and service workers that enable offline capabilities,
allowing web apps to continue working even without an internet connection, irrespective of the device.
HTML5 vs Previous Versions

HTML5: Introduced
HTML4: Focused
new tags with
more on formatting
semantic meaning to
with elements like
improve readability
<div> and <span>.
and accessibility.
The Importance of Semantic HTML

Semantic HTML improves accessibility, SEO, Helps browsers and search engines
and maintainability. understand the structure and content of a
webpage.
Semantic Elements Overview

Definition: Elements that clearly describe their meaning, to both the


browser and the developer, in a human- and machine-readable way.

Examples include <table>, <form>, <article>, <section>, <header>, and


<footer>.
Semantic vs Non-Semantic Elements

NON-SEMANTIC ELEMENTS: <DIV>, SEMANTIC ELEMENTS: <FORM>,


<SPAN> (TELLS NOTHING ABOUT ITS <TABLE>, <ARTICLE>, <NAV>, <ASIDE>
CONTENT.) (CLEARLY DEFINES ITS CONTENT)
Semantic Elements in HTML
The <header>
Element

• Represents the introductory content for


its nearest ancestor or section.
• Typically contains navigational links,
logos, or headings.
• Example:
<header>
<h1>Welcome to My Website</h1>
<nav>...navigation...</nav>
</header>
The <footer>
Element

• Represents the footer of a section or


document.
• Commonly contains copyright info,
disclaimers, or links.
• Example:
<footer>
<p>&copy; 2024 My Website</p>
</footer>
The <article>
Element

• Represents a self-contained
composition in a document, like a blog
post or news article.
• Example:
<article>
<h2>Latest News</h2>
<p>This is a news article.</p>
</article>
The <section>
Element

• Defines sections of a webpage, grouping


related content.
• Best for organizing thematic content.
• Example:

<section>
<h2>About Us</h2>
<p>Details about the company...</p>
</section>
The <nav> Element
• Represents navigation links to other parts of the
website or external sites.
• Typically used for primary navigation menus.
• Example:

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
The <aside>
Element

• Represents content indirectly


related to the main content, like
sidebars or pull quotes.
• Example:
<aside>
<p>Related article or content.</p>
</aside>
• <figure>: Used to mark up self-
contained content like images,
diagrams, or code listings.
• <figcaption>: Provides a caption or
description for the figure.
The <figure> and • Example:
<figcaption>
Elements <figure>
<img src="image.jpg" alt="Description">
<figcaption>Figure 1: An example image.</figcaption>
</figure>
Multimedia in HTML5

HTML5 introduces native support for Elements: <audio> and <video>. Example (video):
audio and video without plugins.
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
The <canvas> Element

• Used for drawing graphics, animations, or


games using JavaScript.
• Supports 2D and 3D graphics via WebGL.
• Example:
<canvas id="myCanvas" width="500" height="400">
</canvas>
New Input Types in HTML5

HTML5 introduces new input types for Examples: email, url, date, range, Example:
better form validation. number, etc.
<input type="email" placeholder="Enter your email">
HTML5 Storage Options
localStorage: Stores data with no expiration
date.

sessionStorage: Stores data for the session


duration.

Example: localStorage.setItem('key', 'value');


Browser Compatibility and Support

HTML5 is widely supported in modern


browsers.

Features like semantic elements, audio,


video, and canvas work seamlessly
across Chrome, Firefox, Safari, and Edge.
Lesson Learning Outcomes (LLOs)
• HTML5 simplifies and modernizes web development.
• Semantic elements enhance accessibility and structure.
• Multimedia and storage features improve interactivity.
• Final Tip: Always use semantic elements for a more maintainable
and SEO-friendly codebase.

You might also like