An HTML boilerplate is the foundation of every HTML document, and knowing how to structure it is essential for creating well-organized and effective web pages. In this section, we’ll explore the basic structure of an HTML document, including the head section, the body section, and the essential tags and elements that make up the HTML boilerplate.
The Basic Structure of an HTML Document#
Every HTML document follows a basic structure that includes the head section and the body section. The head section contains information about the web page that is not visible to the user, such as the title, meta data, and links to external resources. The body section contains the actual content of the web page, including text, images, and other media.
The Head Section#
The head section of an HTML document is where you include information about your web page that is not displayed to the user. Some of the most important elements that are included in the head section are:
- Title tag: The title tag is used to provide a title for your web page, which appears in the browser tab and in search engine results. Here’s an example:
<head>
<title>My Awesome Web Page</title>
</head>
- Meta tags: Meta tags provide additional information about your web page, such as the character encoding, keywords, and description. Here’s an example:
<head>
<meta charset="UTF-8">
<meta name="description" content="This is a description of my awesome web page.">
</head>
- Link tags: Link tags are used to link external resources to your web page, such as stylesheets, JavaScript files, or other resources. For example, if your website uses a certain font or color scheme, you can link to an external stylesheet that contains the styles for your web page. We will see later how to use link tags to add external stylesheets to your web page. In the meantime, here’s an example:
<head>
<link rel="stylesheet" href="styles.css">
</head>
The Body Section#
The body section of an HTML document contains the actual content of the web page that is visible to the user. Some of the most common elements that are included in the body section are:
- Heading tags: Heading tags are used to create headings and subheadings for your web page content. There are six levels of headings, ranging from
<h1>(the largest) to<h6>(the smallest). Remember that headings are used to organize your content, so it’s important to use them in a logical order. For example, if you have a web page about a particular topic, you might use<h1>tags for the main heading,<h2>tags for subheadings, and<h3>tags for sub-subheadings. Here’s an example:
<body>
<h1>My Awesome Web Page</h1>
<h2>Introduction</h2>
<p>Welcome to my awesome web page!</p>
</body>
- Paragraph tags: Paragraph tags are used to create paragraphs of text on your web page. Here’s an example:
<body>
<h1>My Awesome Web Page</h1>
<h2>Introduction</h2>
<p>Welcome to my awesome web page! Here you will find information about all sorts of awesome things.</p>
</body>
- Image tags: Image tags are used to display images on your web page. Here’s an example:
<body>
<h1>My Awesome Web Page</h1>
<h2>Introduction</h2>
<p>Welcome to my awesome web page! Here you will find information about all sorts of awesome things.</p>
<img src="awesome-image.jpg">
</body>
- Link tags: Link tags are used to create links to other web pages or resources. Here’s an example:
<body>
<h1>My Awesome Web Page</h1>
<h2>Introduction</h2>
<p>Welcome to my awesome web page! Here you will find information about all sorts of awesome things.</p>
<a href="https://www.google.com">Click here to go to Google</a>
</body>
Complete HTML Boilerplate#
Here’s a complete HTML boilerplate that includes the head section and the body section:
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Web Page</title>
<meta charset="UTF-8">
<meta name="description" content="This is a description of my awesome web page.">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>My Awesome Web Page</h1>
<h2>Introduction</h2>
<p>Welcome to my awesome web page! Here you will find information about all sorts of awesome things.</p>
<img src="awesome-image.jpg">
<a href="https://www.google.com">Click here to go to Google</a>
</body>
</html>
By using the HTML boilerplate and understanding the basic structure of an HTML document, you’ll be well on your way to creating professional and effective web pages. In the next section, we’ll explore the different ways to add text to your web pages.