| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
An HTML (HyperText Markup Language) document is structured to define the content and layout of a web page. Here’s a deep dive into the basic structure of an HTML document, along with examples for each part:
Basic Structure
- DOCTYPE Declaration: Defines the document type and HTML version.
- HTML Element: The root element that contains all other elements.
- Head Element: Contains meta-information about the document.
- Body Element: Contains the content of the document (text, images, links, etc.).
Basic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Example of an HTML document structure.">
<title>Basic HTML Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</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>
<main>
<section id="home">
<h2>Home</h2>
<p>This is the home section of the website.</p>
</section>
<section id="about">
<h2>About</h2>
<p>This section contains information about the website.</p>
</section>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
<script src="scripts.js"></script>
</body>
</html>
Detailed Breakdown
1. DOCTYPE Declaration
<!DOCTYPE html>
- Specifies that the document is an HTML5 document. It helps browsers to render the page correctly.
2. HTML Element
<html lang="en">
...
</html>
- The
<html>element wraps all the content of the web page. - The
lang="en"attribute specifies the language of the document.
3. Head Element
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Example of an HTML document structure.">
<title>Basic HTML Document</title>
<link rel="stylesheet" href="styles.css">
</head>
- The
<head>element contains meta-information:<meta charset="UTF-8">: Specifies the character encoding.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures proper rendering and touch zooming on mobile devices.<meta name="description" content="Example of an HTML document structure.">: Provides a description of the page.<title>Basic HTML Document</title>: Sets the title of the page, which appears in the browser tab.<link rel="stylesheet" href="styles.css">: Links to an external CSS file for styling the document.
3. Body Element
<body>
<header>
<h1>Welcome to My Website</h1>
</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>
<main>
<section id="home">
<h2>Home</h2>
<p>This is the home section of the website.</p>
</section>
<section id="about">
<h2>About</h2>
<p>This section contains information about the website.</p>
</section>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
<script src="scripts.js"></script>
</body>
- The
<body>element contains the actual content of the page:<header>: Defines a header for the document or a section.<nav>: Contains navigation links.<main>: Represents the main content of the document.<section>: Defines a section in the document.<footer>: Contains footer information.<script src="scripts.js"></script>: Links to an external JavaScript file.
Semantic Elements
Using semantic elements like <header>, <nav>, <main>, <section>, and <footer> improves the readability of the HTML document and helps search engines and screen readers understand the structure and content of the web page.
An HTML document starts with a <!DOCTYPE html> declaration, followed by the <html> element that wraps the entire content. The <head> element contains meta-information and links to external resources like CSS. The <body> element includes all the visible content such as text, images, links, and other elements. This structure helps browsers render the web page correctly and ensures a well-organized, accessible, and maintainable document.
