HTML Bangla Tutorial
HTML5
Anisul Islam
MSc in Software, Web & Cloud YouTube : anis3730
Researcher Assistant, TU, Finland Website : [Link]
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> - [Link] <source src=“anthem.mp3" type="audio/mpeg" >
Your browser does not support the audio tag.
• <video> - [Link] </audio>
• Graphics
<video width=“400" height=“300" controls
• <canvas> - [Link] autoplay loop muted poster=“[Link]”>
• Vector graphics – svg (small in size and load faster <source src=“love.mp4" type="video/mp4">
on web) - [Link] <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
• [Link]
• [Link]
development/whats-new-in-html-5-4ce9d62bf114