HTML Elements: Exploring Common HTML Elements
Introduction:
This session focuses on familiarizing you with the most commonly used HTML elements.
Understanding these elements is key, especially for those embarking on their journey in Web3 frontend development.
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 what HTML elements are and their roles in web development.
- Be familiar with various commonly used HTML elements.
- Know how to apply these elements in practical scenarios, particularly in Web3 contexts.
Lesson Video:
What are HTML Elements?
HTML elements form the building blocks of web development. They are used to structure and display content on the web. An HTML element typically consists of a start tag, content, and an end tag. Some elements, known as void elements, do not require an end tag.
- Definition: An HTML element refers to everything from the start tag to the end tag, including the content in between. If an element contains other elements, they are called child elements.
- Purpose: Elements represent the structure and content within your HTML document. They dictate how content should be displayed and function on a web page.
- Examples:
- Paragraph Element:
<p>This is a paragraph.</p> - Image Element:
<img src="image.jpg" alt="description" /> - Div Element:
<div><p>Paragraph inside a div.</p></div>
- Paragraph Element:
Key Differences Between HTML Tag And HTML Element:
- Syntax: A tag is a part of an element that signifies its start or end. An element consists of a start tag, content, and an end tag.
- Role: Tags are used to mark the beginning and end of an element. Elements are the entire package: start tag, content, and end tag.
- Hierarchy: Elements can contain other elements (nested), but tags cannot contain other tags; they only define where an element starts or ends.
Common HTML Elements:
<div>: A container for content or other HTML elements. Used for layout and styling purposes.<span>: Inline container, useful for styling small portions of text or elements.<header>and<footer>: Define the header and footer sections of a webpage.<nav>: Denotes a navigation bar with links to other pages or sections.<section>: Represents a standalone section within a document.<article>: Encloses self-contained content, such as blog posts or news articles.<aside>: Marks content indirectly related to the main content, like a sidebar.<figure>and<figcaption>: Used for embedding media, with<figcaption>providing a caption.<form>: Creates a form for user input.<table>,<tr>,<th>, and<td>: Elements for creating and structuring tables.
Example Codes for Practical Application:
Expanding the Capstone Project
Let’s expand our Token Minter dApp from the previous lesson by incorporating more HTML elements.
Existing Code from Previous Lesson:
<!DOCTYPE html> <!-- The DOCTYPE declaration defines this document to be HTML5 -->
<html> <!-- The root element of an HTML document -->
<head> <!-- The head section contains meta-information about the document -->
<title>Token Minter dApp</title> <!-- The title of the dApp displayed on the browser tab -->
</head>
<body> <!-- The body section contains the content of the document -->
<h1>Welcome to our Token Minter dApp</h1> <!-- A header tag that introduces the dApp -->
<p>This dApp allows users to mint their own tokens on the blockchain.</p> <!-- A paragraph explaining the purpose of the dApp -->
<!-- More content will be added here as we build out our dApp's features -->
</body>
</html>
Adding New Elements:
<!DOCTYPE html>
<html>
<head>
<title>Token Minter dApp</title>
</head>
<body>
<h1>Welcome to our Token Minter dApp</h1>
<p>This dApp allows users to mint their own tokens on the blockchain.</p>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About the dApp</h2>
<p>Learn more about how our dApp works and the blockchain technology behind it.</p>
</section>
<aside>
<h3>Additional Resources:</h3>
<p>1. Learn more about blockchain technology and how it works.</p>
<!-- Links to additional resources -->
</aside>
<footer>
<p>Contact us: <a href="mailto:hello@dProgramminguniversity.com">hello@dProgramminguniversity.com</a></p>
</footer>
</body>
</html>
In this updated code, we’ve added a header with navigation, an about section, a sidebar for additional resources, and a footer with contact information.
Conclusion:
In this lesson, you’ve learned about various HTML elements and how they are used to create structured, informative, and navigable web pages.
These elements are pivotal in developing user-friendly and interactive interfaces for Web3 applications.
Resources & References:
To deepen your understanding of this lesson, you can explore the following resources:
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.
a href=”#home” rel=”nofollow ugc”>Home
a href=”#about” rel=”nofollow ugc”>About
a href=”#contact” rel=”nofollow ugc”>Contact
Good day Sir.
In the code above, what is the usefulness of the ‘#” in the href=”#home” Sir?
The # tell the browser to look for the link in same page as a section of the page. So, when user click it, it scroll down or updirectly to where that section is. Usually used for content outline to make it easier to navigate to specific section of the page.
You will learn more about hyperlinking in this lesson when you get tot it https://dprogramminguniversity.com/freecourses/ai-enhanced-web3-frontend-development-course/freelessons/linking-html-pages-anchor-tags-and-hyperlinks/
NOTE: For security reasons, next time kindly put your code in platform like Github and link it here. Directly posting code here not allowed.
Thanks.
Oh. Sorry about that Sir. Still in the learning phase.
Thank you for the response.