Curriculum
HTML (Hypertext Markup Language) is the backbone of every web page, and understanding its hierarchy is essential for creating well-structured and semantically meaningful documents. In this tutorial, we will explore the hierarchical structure of HTML, how elements are nested within one another, and the importance of using semantic elements for improved accessibility and SEO.
Section 1: HTML Document Structure
In HTML, documents have a structured layout that determines how elements are organized within them. This structure consists of several key components:
<!DOCTYPE> declaration specifies the version of HTML being used and helps browsers render the page correctly.<html> element serves as the root element of an HTML document, and all other elements are nested within it.<html> element, you have the <head> element, which contains meta-information about the document, such as the page title and links to external resources.<head>, the <title> element sets the title of the web page displayed in the browser’s title bar or tab.<body> element contains the visible content of the web page, including text, images, links, and more.Section 2: Nesting Elements
HTML allows elements to be nested within one another. This nesting creates a parent-child relationship, where the element containing another element is the parent, and the contained element is the child.
For example:
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
In this example, <h1> and <p> are nested within the <body> element, making them child elements of <body>.
Section 3: Block vs. Inline Elements
HTML elements can be categorized into two main types: block-level and inline elements.
<div>, <p>, and headings like <h1>.<span>, <a>, and <strong>.The choice between block-level and inline elements depends on the desired layout and structure of your web page.
Section 4: Semantic HTML
Semantic HTML elements provide meaning to the structure of a web page. Using semantic elements makes it clear what each part of the page represents and aids accessibility and search engine optimization (SEO).
Some common semantic elements include:
<header> for the page header.<nav> for navigation menus.<main> for the main content of the page.<section> for thematic grouping of content.<article> for self-contained content like blog posts.<footer> for the page footer.Section 5: Examples and Exercises
Let’s explore some examples to solidify our understanding:
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>About Me</h2>
<p>I am a web developer.</p>
</section>
<section>
<h2>Contact Information</h2>
<address>
Email: <a href="mailto:[email protected]">[email protected]</a>
</address>
</section>
</main>
<footer>
© 2023 My Web Page
</footer>
</body>
</html>