Scribd
Upload
19 views

HTML5

The document discusses the history and key objectives of HTML5. It describes how HTML5 introduced more semantic tags, improved form types, enhanced support for graphics and media, improved storage capabilities, and removed some outdated elements. Examples are provided for most of the discussed features.

Uploaded by

mohammadsmsiam
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
19 views

HTML5

The document discusses the history and key objectives of HTML5. It describes how HTML5 introduced more semantic tags, improved form types, enhanced support for graphics and media, improved storage capabilities, and removed some outdated elements. Examples are provided for most of the discussed features.

Uploaded by

mohammadsmsiam
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/ 11

HTML Bangla Tutorial

HTML5

Anisul Islam
MSc in Software, Web & Cloud YouTube : anis3730
Researcher Assistant, TU, Finland Website : www.stduywithanis.com
Ex-Lecturer at Sylhet Engineering College, Sylhet.
Ex-Lecturer at JVBS, Sylhet. Facebook : studywithanis
Ex-Lecturer at Jhingabari College, Sylhet.
HTML History 3

• 1989 Tim Berners-Lee invented www.


• 1991 Tim Berners-Lee invented HTML.
• 1993 HTML 1.0
• 1995 HTML 2.0
• 1997 HTML 3.2
• 1999 HTML 4.01
• 2014 HTML5
HTML5’S Objectives 4

1. More Semantic Tags


2. Improve accessibility
3. More Form types
4. Improve graphics and Media
5. Improve storage facilities
6. Remove few things
1. More Semantic Tags 5

Non-Semantic Tags Semantic Tags


Meaningless tags Meaningful Tags
Example: div, span Example: <p>, <h1>, <form>, <table>

• HTML5 Semantic Tags: <header>, <nav>, <footer>, <menu>,


<section>, <progress>, <figure>, <figcaption> etc.
Non-Semantic vs Semantic 6
Non-Semantic Semantic
<body> <body>
<div class="header">Header here</header> <header>Header here</header>
<div class="nav">nav here</div> <nav>nav here</nav>
<div class="main"> <main>
<div>about me section</div> <section>about me section</section>
<div>contact section</div> <section>contact section</section>
</div> </main>
<div id="footer">footer here</div> <footer>footer here</footer>
</body> </body>
3. More Form types 7

<input type="text"> <input type="time">


<input type="date">
<input type="week">
<input type="email"> <input type="month">
<input type="number"> <input type="datetime">
<input type="url"> <input type="datetime-local">

<input type="text" placeholder ="Enter Your Name: " >


4. Improve graphics and Media 8

<audio controls autoplay>


• <audio> - https://youtu.be/nnrCS41iuAQ <source src=“anthem.mp3" type="audio/mpeg" >
Your browser does not support the audio tag.
• <video> - https://youtu.be/kpqX5pZtAJE </audio>
• Graphics
<video width=“400" height=“300" controls
• <canvas> - https://youtu.be/ZVsV0V96-pw autoplay loop muted poster=“poster.png”>
• Vector graphics – svg (small in size and load faster <source src=“love.mp4" type="video/mp4">
on web) - https://youtu.be/jXW7Fq2neow <source src=“love.mp4" type="video/mpeg">
Your browser does not support the video tag.
(progress bar video is here) </video>
5. Improve storage facilities
9

• Before Storage: temporary storage in cookies


• HTML5
• application cache,
• web SQL database and
• web storage.
6. Remove few things
10

• acronym
• applet
• big
• center
• dir
• font
• frame
• frameset
• noframes
• noscript
• strike
• tt
References 11

• https://www.geeksforgeeks.org/top-10-new-features-of-html5/

• https://medium.com/beginners-guide-to-mobile-web-
development/whats-new-in-html-5-4ce9d62bf114

You might also like