Introducing HTML5
HTML5 was developed by observing how developers actually built web pages. Instead of enforcing strict rules, HTML5 embraced practical web development.
Real-world analogy: Just as a university updates its rules based on how students actually take notes, HTML5 evolved based on real developer practices.
Problems with Older HTML
- Different browsers behaved differently.
- Many websites used non-standard tags.
- Multimedia required Flash plugins.
- Heavy use of <div> tags.
- Limited form input types.
- Strict XHTML rules were difficult to follow.
HTML5 Reality
- Browsers already handled imperfect HTML.
- Developers wanted built-in multimedia.
- Semantic elements replaced meaningless div structures.
<p>Hello
<p>World
Semantic HTML
Semantic tags describe the purpose of the content.
| Bad | Good |
|---|---|
| <div id="header"> | <header> |
| <div id="menu"> | <nav> |
| <div id="content"> | <section> |
| <div id="footer"> | <footer> |
Document Structure
Before HTML5
<body>
<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
HTML5 Structure
<body>
<header>Website Title</header>
<nav>Menu</nav>
<section>Content</section>
<footer>Footer</footer>
</body>
Major HTML5 Structural Elements
<header>
<header>
<h1>ANITS</h1>
</header>
<nav>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
<section>
<section>
<h2>Computer Science Department</h2>
<p>Information here</p>
</section>
<article>
<article>
<h1>Sports</h1>
<section>
<h2>Cricket</h2>
</section>
</article>
<aside>
<aside>
Latest News
</aside>
<footer>
<footer>
Copyright 2026
</footer>
Section vs Article
| Section | Article |
|---|---|
| Groups related content. | Independent self-contained content. |
| Can contain multiple sections. | Can contain sections, images, headings. |
Open Media Effort
HTML5 removed the dependency on Flash by introducing native audio and video support.
| Before HTML5 | HTML5 |
|---|---|
| Flash required | No Flash |
| Plugin installation | Built-in support |
| Poor mobile support | Excellent mobile support |
| Security issues | More secure |
| Complex embedding | Simple tags |
Audio Element
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
Video Element
<video width="500" controls>
<source src="movie.mp4" type="video/mp4">
</video>