Computer Science
Grade 7
20 min
HTML5 Features
HTML5 Features
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Identify at least four new HTML5 semantic elements.
Explain the purpose of semantic elements like `<header>`, `<footer>`, `<nav>`, and `<article>`.
Structure a simple webpage using HTML5 semantic tags instead of generic `<div>` tags.
Embed a video into a webpage using the `<video>` tag.
Add basic attributes like `controls`, `width`, and `height` to media elements.
Describe the benefit of using HTML5 for modern web design.
Have you ever wondered how websites like YouTube or your favorite news blog are built to be so organized and interactive? 🤔 It's all thanks to some powerful new tools in HTML5!
In this lesson, we'll explore some of the coolest features of HTML5, the latest version of the language used to bu...
2
Key Concepts & Vocabulary
TermDefinitionExample
HTML5The newest version of HyperText Markup Language. It adds new features to make websites more powerful and interactive, like playing videos without plugins.Using `<video src='movie.mp4'></video>` is an HTML5 feature. Older HTML versions couldn't do this so easily.
Semantic ElementsHTML elements that clearly describe their meaning or purpose to both the browser and the developer. They tell us about the *type* of content inside them.The `<footer>` tag is a semantic element. It clearly tells you that the content inside it is the footer of a page, which usually contains copyrights or contact info.
<header>A semantic tag that defines the top section of a webpage or an article. It usually contains the main title, logo, and navigati...
3
Core Syntax & Patterns
Semantic Page Structure
<header>
<!-- Logo and Title -->
</header>
<nav>
<!-- Main Links -->
</nav>
<main>
<article>
<!-- Main Content -->
</article>
</main>
<footer>
<!-- Copyright Info -->
</footer>
Use semantic tags to outline the main sections of your webpage. This pattern creates a clear, readable, and meaningful structure that both humans and computers (like search engines) can understand.
Basic Video Embedding
<video src="path/to/video.mp4" width="320" height="240" controls>
Your browser does not support the video tag.
</video>
To embed a video, use the `<video>` tag. The `src` attribute points to the video file. The `widt...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
A webpage needs to be structured with a main title area, a navigation bar, two separate and complete blog posts, and a copyright section at the bottom. Which nesting of semantic tags is the most correct way to build this?
A.<body><header>...</header><nav>...</nav><article>...</article><article>...</article><footer>...</footer></body>
B.<body><article><header>...</header><nav>...</nav><footer>...</footer></article></body>
C.<body><header>...</header><section><article>...</article><article>...</article></section><footer>...</footer></body>
D.<body><header>...</header><nav>...</nav><footer>...</footer><article>...</article><article>...</article></body>
Challenging
A student's code is `<video src="assets/robot.mp4" controls>`. The video shows a 'file not found' error. The student confirms the file `robot.mp4` is in the same folder as their HTML file, not in an `assets` folder. What is the most likely error based on the 'Common Pitfalls'?
A.The `controls` attribute is breaking the video link.
B.The file path in the `src` attribute is incorrect.
C.The video file is corrupted and cannot be played.
D.The browser does not support the `.mp4` format.
Challenging
Evaluate this HTML structure for a page that contains a single blog post. What is the most significant semantic error in how the post's own title and content are structured?
`<body>
<header><h1>My Website</h1></header>
<nav>...</nav>
<main>
<h1>How to Bake a Cake</h1>
<p>First, you need flour...</p>
</main>
<footer><p>Copyright 2023</p></footer>
</body>`
A.The main content is not wrapped in an `<article>` tag, even though it's a self-contained post.
B.The `<footer>` should be inside the `<main>` tag.
C.There are two `<h1>` tags, which is not allowed.
D.The `<nav>` tag should be inside the `<header>` tag.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free