HTML5: New Elements and Features
Introduction:
In this session, we delve into HTML5, exploring its new elements and features that have revolutionized web development.
HTML5 is crucial for Web3 developers as it offers advanced functionalities and compatibility for building responsive and interactive decentralized applications (dApps).
Remember, watching the lesson video will offer a deeper understanding of this topic.
Learning Objectives:
By the end of this lesson, you will be able to:
- Understand the key features and enhancements introduced in HTML5.
- Learn about new semantic elements and their roles in structuring web content.
- Recognize the significance of HTML5 in Web3 development.
Lesson Video:
Key Features of HTML5:
- Semantic Elements: Elements like
<article>,<section>,<nav>, and<aside>provide clearer structure. - Form Enhancements: New form elements like
<date>,<time>,<email>,<url>, and more. - Multimedia Elements:
<video>and<audio>tags for embedding media without third-party plugins. - Graphics and Visual Effects: Support for scalable vector graphics (SVG) and canvas elements.
- Local Storage: Allows web applications to store data locally within the user’s browser.
Example Codes for Practical Application:
Expanding the Capstone Project
Expanding on our Token Minter dApp, let’s enhance its features using what you learned from this lesson.
Existing Code from Previous Lesson:
<!DOCTYPE html> <!-- Defines HTML5 document type -->
<html>
<head>
<title>Token Minter dApp</title> <!-- Page title -->
</head>
<body>
<!-- Header Section -->
<header>
<h1>Welcome to our Token Minter dApp</h1>
<!-- Navigation Menu -->
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#mint">Mint Tokens</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<!-- Main Content Section -->
<main>
<!-- Home Section -->
<section id="home">
<p>This dApp allows users to mint their own tokens on the blockchain.</p>
</section>
<section id="mint">
<p>Token minting section.</p>
<!-- Token minting form will be added here -->
<!-- Form -->
<form action="#">
<label for="tokenName">Token Name:</label>
<input type="text" id="tokenName" name="tokenName"><br>
<label for="amount">Amount:</label>
<input type="number" id="amount" name="amount"><br>
<input type="submit" value="Mint Token">
</form>
</section>
<section id="about">
<!-- Information about the dApp -->
</section>
<!-- Unordered List -->
<ul>
<!-- <li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li> -->
</ul>
<!-- Table -->
<table>
<tr>
<th>Token Name</th>
<th>Amount</th>
</tr>
<tr>
<td>Token A</td>
<td>100</td>
</tr>
<tr>
<td>Token B</td>
<td>200</td>
</tr>
</table>
<!-- Media Section -->
<section id="media">
<!-- Embedding an Image -->
<img src="/media/images/token-image.png" alt="Token minter image" width="500" height="100">
<br>
<!-- Embedding a Video -->
<video src="/media/videos/s1l7.mp4" controls width="400"></video>
<p>
<iframe
width="772" height="480"
src="https://www.youtube.com/embed/tNGYUJGs_xI"
title="How To Switch From Mainnet To Devnet on Solana Solflare Wallet - Web3 Development 101 Course Ep13"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</p>
<!-- Embedding Audio -->
<audio src="audio/mint-sound.mp3" controls></audio>
</section>
</main>
<!-- Footer Section -->
<footer>
<p>Contact us: <a href="mailto:hello@dProgrammingUniversity.com">hello@dProgramminguniversity.com</a></p>
<!-- External Link -->
<p>For more information, visit
<a href="https://dProgrammingUniversity.com/Discord" target="_blank" title="dPU Discord">
dProgramming University
</a>.
</p>
</footer>
</body>
</html>
Enhance the Capstone Project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Token Minter dApp</title>
</head>
<body>
<!-- Header Section -->
<header>
<h1>Welcome to our Token Minter dApp</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#mint">Mint Tokens</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<!-- Main Content Section -->
<main>
<article id="home">
<h2>Introduction to Token Minting</h2>
<p>This dApp allows users to mint their own tokens on the blockchain.</p>
</article>
<section id="mint">
<h2>Mint Your Tokens</h2>
<form action="#">
<input type="email" placeholder="Enter your email">
<input type="number" placeholder="Token amount">
<button type="submit">Mint</button>
</form>
</section>
<aside>
<h3>Learn More:</h3>
<p>Explore more about blockchain technology.</p>
</aside>
</main>
<footer>
<p>Contact us at <a href="mailto:hello@dProgrammingUniversity.com">hello@dProgrammingUniversity.com</a></p>
</footer>
</body>
</html>
Your code may look like this now after adding the above:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Token Minter dApp</title>
</head>
<body>
<!-- Header Section -->
<header>
<h1>Welcome to our Token Minter dApp</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#mint">Mint Tokens</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<!-- Main Content Section -->
<main>
<article id="home">
<h2>Introduction to Token Minting</h2>
<p>This dApp allows users to mint their own tokens on the blockchain.</p>
</article>
<section id="mint">
<h2>Mint Your Tokens</h2>
<form action="#">
<input type="email" placeholder="Enter your email">
<input type="number" placeholder="Token amount">
<button type="submit">Mint</button>
</form>
</section>
<aside>
<h3>Learn More:</h3>
<p>Explore more about blockchain technology.</p>
</aside>
</main>
<footer>
<p>Contact us at <a href="mailto:hello@dProgrammingUniversity.com">hello@dProgrammingUniversity.com</a></p>
</footer>
</body>
</html>
In this update, we transform the HTML document to conform with HTML 5.
Conclusion:
HTML5 introduces a range of new elements and features that enhance the functionality and semantic value of web pages.
These advancements are particularly beneficial in the development of Web3 applications, providing developers with tools for creating more interactive, accessible, and structured dApps. Embracing HTML5 in your Web3 projects will ensure modern standards and improved user experiences.
Resources & References:
To deepen your understanding of this lesson, you can explore the following resources:
These resources provide comprehensive guides and examples that will be invaluable as you learn and apply them in your journey of Web3 frontend development.
Support:
If you need help with this lesson, questions, suggestions and improvement. The best way to get help is to use the comment below:
1. First check existing comments if your questions have been answered before posting.
2. If no existing related question with an answer, then you can post a new one (kindly avoid duplicating previously asked and answered questions).
NOTE: This is the most recommended way of getting support directly from the instructor of this course. Posting on other platforms like Discord may get support from other community members and not from the course instructor directly.
Images|Videos|Links: To support your question with a screenshot, Github repo link or other media, kindly upload it somewhere online like Drive/Dropbox or Github (for codes) first, then post the link to it in your comment. Please do not upload media/codes directly, it may fail or cause your comment to be deleted.
Please ONLY post questions that are specific to this lesson not the entire course to ensure others can find it helpful. Each lesson allows comments relating to it ONLY. Off-lesson questions will be deleted even if they relate to this course as a whole but as long as they are not specific to this lesson, they are not allowed.