Welcome to CodeYourCraft's HTML5 Tutorial! In this lesson, we'll take a deep dive into the world of HTML5, the latest and most versatile version of HTML. By the end of this tutorial, you'll have a solid understanding of HTML5, ready to create your own web pages.
HTML (HyperText Markup Language) is the standard language for creating web pages. HTML5 is the fifth and current version of HTML, introducing new elements, attributes, and APIs that enhance the web and make it more interactive.
HTML5 simplifies web development by providing easier syntax and more powerful features. It's essential for creating modern, responsive web pages and applications.
Every HTML5 document starts with a DOCTYPE declaration, followed by the HTML tag.
<!DOCTYPE html>
<html lang="en">The HTML tag contains two parts: the root element and the head and body sections.
head Section šThe head section contains metadata (information about the HTML document) like the title, links to external files, and character set.
<head>
<title>My First HTML5 Page</title>
</head>body Section šThe body section contains the content you'll see in the browser, such as text, images, and videos.
<body>
<h1>Welcome to My First HTML5 Page!</h1>
</body>HTML5 introduces new semantic elements, making the code more descriptive and easier to understand.
header, nav, main, aside, footer elements<header>
<h1>Logo</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
</header>
<main>
<h2>Welcome to My Website</h2>
<p>This is some text in the main content area.</p>
</main>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
</ul>
</aside>
<footer>
<p>Ā© 2022 My Website</p>
</footer>HTML5 also enhances forms with new input types and validation.
email, url, number, date, time<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="number">Number:</label>
<input type="number" id="number" name="number" min="1" max="100" step="5" required>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday" required>
<label for="time">Time:</label>
<input type="time" id="time" name="time" required>
<button type="submit">Submit</button>
</form>HTML5 provides native support for audio and video elements.
audio and video elements<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video element.
</video>Which HTML tag is used to represent the root of an HTML document?
That's it for the introduction to HTML5! In the next lesson, we'll delve deeper into HTML5, exploring more elements, attributes, and best practices. Stay tuned! šÆ