Basic Structure of an HTML Document
Introduction
Welcome to the world of web design! HTML, which stands for HyperText Markup Language, is the backbone of web pages. Understanding its basic structure is essential for anyone diving into web development.
DOCTYPE Declaration
The very first line of an HTML document is the DOCTYPE declaration. It tells the browser which version of HTML the page is written in. For HTML5, it looks like this:
<!DOCTYPE html>
HTML Element
Next, we have the <html> element, which wraps around the entire HTML document. It serves as the root element.
<html lang="en">
The lang attribute specifies the language of the document. It's essential for accessibility and SEO purposes.
Head Section
Inside the <html> element, we have the <head> section. This part of the document contains meta-information about the page, such as its title, character set, and links to external resources like stylesheets and scripts.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Document Structure</title>
<!-- External CSS stylesheet -->
<link rel="stylesheet" href="styles.css">
</head>
Body Section
The <body> section contains the content of the web page, including text, images, videos, and other multimedia elements. This is where the magic happens!
<body>
<header>
<h1>Basic Structure of an HTML Document</h1>
</header>
<nav>
<!-- Navigation links go here -->
</nav>
<main>
<article>
<section>
<h2>Introduction</h2>
<p>Welcome to the world of web design! HTML is the backbone of web pages.</p>
</section>
<section>
<h2>DOCTYPE Declaration</h2>
<p>The DOCTYPE declaration tells the browser which version of HTML the page is written in.</p>
</section>
<section>
<h2>HTML Element</h2>
<p>The <html> element wraps around the entire HTML document.</p>
</section>
<section>
<h2>Head Section</h2>
<p>The <head> section contains meta-information about the page.</p>
</section>
<section>
<h2>Body Section</h2>
<p>The <body> section contains the content of the web page.</p>
</section>
</article>
</main>
<footer>
<p>Copyright © 2024. All rights reserved.</p>
</footer>
</body>