HTML5
HTML5 (HyperText Markup Language 5) is the latest standard used to design and structure web
pages. It introduces improved document structure, advanced form elements, native multimedia
support, and semantic tags that enhance accessibility and search engine optimization.
1. HTML5 Structure
HTML5 follows a standard document structure that helps browsers correctly render web pages.
Basic Structure
<!DOCTYPE html>
<html>
<head>
<title>My First HTML5 Page</title>
</head>
<body>
<h1>Welcome to HTML5</h1>
<p>This is a sample webpage.</p>
</body>
</html>
Explanation
<!DOCTYPE html>
Declares the document as an HTML5 document.
<html>
Root element that wraps the entire webpage.
<head>
Contains metadata such as title, styles, and scripts.
<body>
Contains all visible content shown to the user.
2. Forms in HTML5
HTML5 provides enhanced form controls and built-in validation.
Example: HTML5 Form
<form>
Name: <input type="text" required><br><br>
Email: <input type="email" required><br><br>
Age: <input type="number"><br><br>
<input type="submit">
</form>
Explanation
<form> – Defines a form
<input> – Accepts user input
New input types: email, number, date, etc.
required attribute provides automatic validation
Advantages
Reduces JavaScript usage
Improves user experience
Better data validation
3. Tables in HTML5
Tables are used to display data in rows and columns.
Example: HTML5 Table
<table border="1">
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>101</td>
<td>Divya</td>
<td>90</td>
</tr>
</table>
Explanation
<table> – Creates table
<tr> – Table row
<th> – Table heading
<td> – Table data
4. Multimedia Elements in HTML5
HTML5 supports audio and video without external plugins like Flash.
Audio Example
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
Video Example
<video width="300" controls>
<source src="movie.mp4" type="video/mp4">
</video>
Explanation
<audio> and <video> embed media
controls attribute provides play, pause, volume options
Works across modern browsers
5. Semantic Tags in HTML5
Semantic tags clearly describe the meaning of content, improving readability and SEO.
Common Semantic Tags
<header> – Top section of page
<nav> – Navigation links
<section> – Grouped related content
<article> – Independent content
<footer> – Bottom section of page
Example Using Semantic Tags
<header>
<h1>My Website</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
<section>
<article>
<h2>HTML5</h2>
<p>HTML5 improves web development.</p>
</article>
</section>
<footer>
<p>© 2025 My Website</p>
</footer>
Advantages of HTML5
Simple and standardized structure
Native audio and video support
Improved forms with validation
Better SEO using semantic tags
Cross-platform and browser compatible