html Copy code
Welcome to our comprehensive video tutorial, where we'll be delving deep into the art of
Structuring Webpage Hierarchy & Building Webpages with HTML. If you've followed our
previous video tutorial on HTML Essential Tags,
you've already learned about the essential building blocks that help you create and organize
content on your web page. But what about structuring the HTML page itself?
In the ever-evolving landscape of web development, the ability to build webpages from scratch
using HTML, while also maintaining a well-structured webpage hierarchy, is an invaluable skill.
It's the cornerstone of crafting web experiences that are not only visually appealing but also
highly functional. You might wonder, "How do I create a webpage with a great structure?"
Don't worry! This video tutorial is here to guide you through the process how to build webpage using
HTML with a structure that sets you up for success.
Before we conclude, we invite you to explore the valuable resources that follow this video tutorial.
In our Summary Section, we provide a concise overview of the HTML code used to structure webpages,
making it easier for you to grasp the essentials. Put your knowledge to the test with our short
quiz, designed to check your understanding of the concepts covered in this tutorial. We believe these interactive elements will enhance your learning experience and
help you solidify your understanding of HTML page structure and accessibility. Happy coding!
In this video we have covered the structural html elements used to structure web pages.
It's important to recognize that these elements provide the foundational structure and layout for a web page.
The three main structural elements that every HTML webpage should have are
The < head >
, the < body >
, and the < footer >
.
These elements represent the backbone of every webpage. Here are some more detils:
While not visible to users, the < head >
tag plays a critical role in structuring and presenting web content effectively.
It serves as a container for metadata that provides essential information about a webpage.
We'll talk more about meta tags in our future videos. As of now, think of this as a place where we will host our links to our CSS Style Sheets or other external sources (i.e. icons and Google Font):
The HTML < body >
element represents the visible content of a webpage.
It encapsulates all the elements that our users will see and interact with,
such as text elements, images & other media, headings, lists, and more.
In simple terms, the body element represent the entire user-facing portion of the webpage. It includes header, navigation menu, hero section, main section and more.
The HTML < footer >
element is used to define the footer section of a webpage.
This section typically contains information that is relevant to the entire page
or website, often appearing at the bottom of the page.
It might include: Copyright Information, Contact Information, Navigation Links, Social Media Icons and Legal Information.
Ready to put your HTML skills to the test? This quiz is a great way to reinforce what you've learned in our Building Webpages Usung HTML tutorial . Let's see how well you've grasped the essentials of HTML webpage structure!
Now is your turn! Use the code editor below to practice how to structure html page. Remember: "Practice makes perfect"!
Below you'll find a code editor for HTML, SCC, and JS so you can practice your code. You'll see immediately how your webpage will look in web browser. Have Fun Coding!
This code editor is for educational purposes and does not save your work. Please use responsibly.