Education
E-Learning
Learning HTML5 New Elements from Scratch
by sabari on | 2024-12-15 15:17:40 Last Updated by sabari on | 2024-12-17 12:08:33
Share: Facebook |
Twitter |
Whatsapp |
Linkedin Visits: 50
1. HTML5 <main> Element
Explanation:
The <main> element is a
semantic HTML5 element that represents the primary content of a document. This
content is directly related to the topic of the page and is distinct from headers,
footers, and sidebars. It is important because it helps search engines and
accessibility tools understand the core content of the page.
Why It is Important:
- It improves
accessibility and SEO by marking the
main content.
- It ensures
that content is organized properly, especially for screen readers.
- It helps
search engines identify the most relevant content on a webpage.
Code
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Main Element</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
</ul>
</nav>
</header>
<main>
<h2>Welcome to My Website!</h2>
<p>This is the main content of the page, where you will find articles, news, and updates.</p>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
Exercise:
- Create a
webpage that uses the
<main> element to
wrap the main content of the page. Make sure the content is distinct from
the header, navigation, and footer.
2. HTML5 <figure> and <figcaption> Elements
Explanation:
The <figure> element is
used to wrap media content such as images, videos, or diagrams. The <figcaption> element is used to provide a caption or description for
the media content inside the <figure> element.
Why It is Important:
- It makes
your media content semantically meaningful.
- Improves
accessibility by associating a caption with an image or video, helping
screen readers understand the context.
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Figure and Figcaption</title>
</head>
<body>
<main>
<h2>Gallery</h2>
<figure>
<img src="landscape.jpg" alt="Beautiful sunset over the mountains">
<figcaption>Sunset in the mountains, showcasing vibrant orange skies.</figcaption>
</figure>
</main>
</body>
</html>
Exercise:
- Add an
image to your webpage using the
<figure> element
and provide a description using <figcaption>.
3. HTML5 <mark> Element
Explanation:
The <mark> element is
used to highlight text. Typically, it is used for marking keywords, phrases, or
important information. By default, text wrapped in <mark> is highlighted with a yellow background.
Why It is Important:
- Helps
emphasize certain parts of the text, making it easier for users to spot
important content.
- Useful for
search results and when emphasizing important data.
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Mark Element</title>
</head>
<body>
<main>
<h2>Highlighted Text</h2>
<p>The <mark>HTML5</mark> specification introduced new features like <mark>semantic elements</mark> that make web development more accessible and efficient.</p>
</main>
</body>
</html>
Exercise:
- Highlight
important keywords or phrases in an article or blog post using the
<mark> element.
4. HTML5 <progress> Element
Explanation:
The <progress> element
represents the completion of a task. It is commonly used to show progress in
processes such as file uploads, downloads, or data processing. The element
visually represents the percentage of completion.
Why It is Important:
- It provides
a visual feedback for users about the progress of a task.
- Improves
user experience by showing how much of a task is completed.
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Progress Element</title>
</head>
<body>
<main>
<h2>File Upload Progress</h2>
<progress value="50" max="100">50%</progress>
<p>Progress: 50%</p>
</main>
</body>
</html>
Exercise:
- Create a
progress bar to show the completion percentage of a task (such as a file
upload or form submission).
5. HTML5 <meter> Element
Explanation:
The <meter> element
represents a scalar measurement within a defined range, such as a temperature
reading, disk space usage, or battery level. It is different from <progress>, as it shows an actual measurement rather than a task progress.
Why It is Important:
- It helps
display real-time measurements in a visual and intuitive way.
- Useful for
metrics that have a defined range, like volume, temperature, or battery
percentage.
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Meter Element</title>
</head>
<body>
<main>
<h2>Disk Space Usage</h2>
<meter value="0.6" min="0" max="1">60%</meter>
</main>
</body>
</html>
Exercise:
- Create a
<meter> element
that represents the amount of battery used (e.g., 75%).
6. HTML5 <output> Element
Explanation:
The <output> element
represents the result of a calculation or user action. It is typically used
with forms, where the result can be dynamically updated using JavaScript.
Why It is Important:
- Allows for
real-time feedback on calculations or user input.
- Makes it
easier to create interactive forms and applications.
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Output Element</title>
</head>
<body>
<main>
<h2>Simple Calculator</h2>
<form>
<input type="number" id="num1" value="5">
<input type="number" id="num2" value="3">
<button type="button" onclick="calculate()">Add</button>
</form>
<output id="result"></output>
</main>
<script>
function calculate() {
const num1 = document.getElementById("num1").value;
const num2 = document.getElementById("num2").value;
const result = parseInt(num1) + parseInt(num2);
document.getElementById("result").textContent = result;
}
</script>
</body>
</html>
Exercise:
- Build a
simple form where two numbers are inputted, and the sum is displayed using
the
<output> element
when a button is clicked.
7. HTML5 <wbr> Element (Word Break
Opportunity)
Explanation:
The <wbr> element
defines where a word can be broken if necessary. It does not force a break but
provides a hint for browsers to break the word at that location when needed,
particularly useful in responsive design.
Why It is Important:
- Helps with
responsive design by controlling how long words should be wrapped on small
screens.
- Useful for
preventing words from being cut off abruptly in narrow containers.
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 WBR Element</title>
</head>
<body>
<main>
<h2>Word Break Example</h2>
<p>Check out this long word: supercalifragilistic<wbr>expialidocious.</p>
</main>
</body>
</html>
Exercise:
- Try using
the
<wbr> element in
a long word or URL to see how it breaks when the text overflows.
Mini
Project: Interactive Portfolio Webpage Using HTML5 New Elements
This project will combine all the HTML5 new
elements we have discussed: <main>, <figure>, <figcaption>, <mark>, <progress>, <meter>, <output>, and <wbr>. You will
create an interactive portfolio page that features images, descriptions, a
progress bar, a meter for measurement, and some interactive elements.
Project
Concept:
The goal is to create a simple portfolio page that
includes the following features:
- Main Content Section: Wrap the
main content with the
<main> element.
- Images with Descriptions: Use
<figure> and <figcaption> to add
images with captions.
- Highlighted Text: Highlight
important keywords with the
<mark> element.
- Progress Bar: Show the
progress of a task (like loading a project).
- Meter: Display some measurable
value (like disk space usage).
- Dynamic Calculation: Use the
<output> element to
show the result of a simple calculation (e.g., addition of numbers).
- Word Breaks: Use the
<wbr> element to
allow words to break in the right places.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<style>
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
}
h1, h2 {
color: #333;
}
main {
padding: 20px;
}
figure {
margin: 20px 0;
}
figure img {
max-width: 100%;
height: auto;
}
progress {
width: 100%;
height: 20px;
margin-top: 10px;
}
meter {
width: 100%;
margin-top: 10px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Portfolio</h1>
</header>
<main>
<section>
<h2>About Me</h2>
<p>Hello! I am a passionate web developer with a love for creating interactive websites. Check out my work below!</p>
</section>
<section>
<h2>Projects</h2>
<figure>
<img src="project1.jpg" alt="Project 1 Image">
<figcaption>Project 1: Interactive Website</figcaption>
</figure>
<figure>
<img src="project2.jpg" alt="Project 2 Image">
<figcaption>Project 2: Mobile App Development</figcaption>
</figure>
</section>
<section>
<h2>Progress on Current Project</h2>
<progress value="40" max="100">40%</progress>
<p>Project is 40% completed.</p>
</section>
<section>
<h2>Disk Space Usage</h2>
<meter value="0.7" min="0" max="1">70%</meter>
<p>Disk space used: 70%</p>
</section>
<section>
<h2>Dynamic Calculation</h2>
<form>
<input type="number" id="num1" placeholder="Enter a number" value="5">
<input type="number" id="num2" placeholder="Enter another number" value="10">
<button type="button" onclick="calculateSum()">Calculate Sum</button>
</form>
<output id="result">Result will appear here</output>
</section>
<section>
<h2>Important Terms</h2>
<p>Learn about <mark>HTML5</mark>, <mark>CSS3</mark>, and <mark>JavaScript</mark> for web development!</p>
</section>
<section>
<h2>Word Break Example</h2>
<p>Here is a long word with a break opportunity: supercalifragilistic<wbr>expialidocious.</p>
</section>
</main>
<footer>
<p>© 2024 My Portfolio</p>
</footer>
<script>
function calculateSum() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById("result").textContent = "Sum: "+ sum;
}
</script>
</body>
</html>
Explanation
of Key Elements Used:
1.
<main>
Element:
- All the
main content is wrapped inside the
<main> element.
This ensures the page structure is semantic, and the content is easily
identifiable by search engines and screen readers.
2.
<figure>
and <figcaption> Elements:
- The
<figure> element
is used to group images with a description. Each project image is wrapped
inside <figure>, and a <figcaption> provides
a description of the image or project.
3.
<mark>
Element:
- The
<mark> element
is used to highlight important keywords like HTML5, CSS3, and JavaScript
in a paragraph. This helps draw attention to important terms in the
context of the page.
4.
<progress>
Element:
- The
<progress> element
visually shows the progress of a task. In this case, it represents how
much of a project has been completed. The value attribute
is set to 40%, indicating the progress, and the max is 100,
representing the full completion.
5.
<meter>
Element:
- The
<meter> element
represents a measurement, such as disk space usage. In this example, it
shows that 70% of disk space is used. The value attribute
sets the current value, and max is the
total possible value.
6.
<output>
Element:
- The
<output> element
is used to display the result of a calculation. When two numbers are
entered and the "Calculate Sum" button is clicked, the sum of
the numbers is displayed in the <output> element.
7.
<wbr>
Element:
- The
<wbr> element
is used in the long word
"supercalifragilistic<wbr>expialidocious" to suggest a
break point. This is useful in responsive designs where long words may
overflow the container.
Outcome:
By completing this mini-project:
- You will
have a webpage with structured, semantic HTML5 elements.
- You will
understand how to use the
<main>, <figure>, <figcaption>, <mark>, <progress>, <meter>, <output>, and <wbr> elements
in practice.
- You will
create a fully functional, interactive webpage with a calculator, progress
bar, and disk space meter.
Conclusion:
This project has covered the usage of key HTML5
new elements to enhance your webpage semantic structure, accessibility, and
interactivity. You have learned to:
- Use
<main> to define
the core content area of your page.
- Implement
media content with
<figure> and <figcaption>.
- Highlight
important information with
<mark>.
- Show task progress
with
<progress> and
measurable values with <meter>.
- Use
<output> to display
dynamic results.
- Control
word breaks with
<wbr> for better readability.