1. Doctype Declaration
In HTML5, the doctype declaration has been simplified to:
html
2. Semantic Elements
Semantic elements clearly describe their meaning to both the browser and the developer. Examples include:
<header>: Defines a header for a document or a section.<footer>: Specifies a footer for a document or a section.<article>: Defines independent, self-contained content.<section>: Defines a section in a document.<nav>: Defines navigation links.
Example:
html
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<article>
<h2>Article Title</h2>
<p>This is an article about...</p>
</article>
<footer>
<p>Copyright © 2024</p>
</footer>
</body>
</html>
3. Media Elements
HTML5 introduced easier ways to embed media:
<video>and<audio>tags for embedding video and audio content.<canvas>for drawing graphics via scripting (like JavaScript).
Example:
html
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
4. Form Elements
New form types for better input control, like email, date, time, url, search, and more.
Example:
html
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
5. Graphics and SVG
Scalable Vector Graphics (SVG) can be directly embedded in HTML5, enabling high-quality graphics.
Example:
html
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
6. Responsive Images
Using srcset and sizes attributes in the <img> tag allows for responsive images.
Example:
html
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" sizes="(max-width: 600px) 480px, 800px" alt="Responsive image">
7. Web Storage API
HTML5 introduced local storage for storing data locally within the user’s browser.
Example:javascript
localStorage.setItem("key", "value");
console.log(localStorage.getItem("key"));