HTML Document Structure
- HTML (<html>): The root element that contains the entire HTML document.
- Head Section (<head>): Contains metadata, such as the document title, character encoding, viewport settings, stylesheets, scripts, and other information not directly displayed on the web page.
- Body Section (<body>): Contains the visible content of the web page, including text, images, links, forms, and other elements that users interact with.
Example of a Basic HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Document</title>
</head>
<body>
<header>
<h1>Welcome to 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>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>About Us</h2>
<p>Welcome to our website. We provide top-quality services...</p>
</section>
<section id="about">
<h2>About Our Company</h2>
<p>Learn more about our history, mission, and values...</p>
</section>
<section id="services">
<h2>Our Services</h2>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Digital Marketing</li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<form action="/submit-form" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
</main>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Document</title>
</head>
<body>
<header>
<h1>Welcome to 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>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>About Us</h2>
<p>Welcome to our website. We provide top-quality services...</p>
</section>
<section id="about">
<h2>About Our Company</h2>
<p>Learn more about our history, mission, and values...</p>
</section>
<section id="services">
<h2>Our Services</h2>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Digital Marketing</li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<form action="/submit-form" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
</main>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
Breakdown of the HTML Document
- Document Type Declaration (<!DOCTYPE html>): Declares the document type as HTML5.
- HTML Element (<html lang="en">): The root element of the document, specifying the language as English (en).
- Head Section (<head>):
- <meta charset="UTF-8">: Defines the character encoding as UTF-8.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport width and initial scale for responsive design.
- <title>: Sets the title of the webpage.
- Body Section (<body>): Contains the visible content of the webpage, structured into:
- <header>: Includes the website's header with a navigation menu (<nav>).
- <main>: Holds the main content sections (<section>).
- <footer>: Contains copyright information.
- Content Sections (<section>): Divided into "Home," "About," "Services," and "Contact" sections, each with specific content and elements like headings, paragraphs, lists, forms, and buttons.
Explanation of HTML Tags
- <html>: Serves as the root element, encapsulating the entire HTML document.
- <head>: Contains metadata, such as character encoding (<meta charset="UTF-8">), viewport settings, and the document title (<title>).
- <body>: Contains the visible content of the webpage, including headers, main content (<main>), footer, and interactive elements like forms (<form>), buttons, and links.
- The <nav> Tag
- The <nav> tag is used to define navigation links within an HTML document. In the example above, the <nav> tag is part of the <header> section, typically found in headers or sidebars for easy navigation. It contains an unordered list (<ul>) of navigation items (<li>), each linking to different sections of the webpage using anchor tags (<a>).
For instance, <a href="#home">Home</a> links to the "Home" section with the id="home", enabling users to navigate directly to specific content within the page.
Practice Excercise Practice now