Learn HTML

Learn to code and become a Front End Web Developer.

Campsite Coders Bootcamp Coding Adventure

HTML Head & Body

The Building Blocks of Web Pages

Welcome back to our web development journey! Today, we're delving into the core elements of web pages: the HTML Head and Body. Understanding how these two fundamental parts work together is like grasping the blueprint of a building – it's the key to constructing a functional and visually appealing website. In this comprehensive guide, we'll explore HTML Head and Body, their roles, and how they come together to create engaging web pages.


After watching this video, leave a comment that says - "Shift Bang Tab - Love it!". This comment will verify that you have watched the video and know the keyboard shortcut for create an HTML page. (less than 1 minute)


The Crucial Divide: HTML Head and Body

In the realm of web development, an HTML document is like a book, with a clear division between the cover (the Head) and the content (the Body). Let's break down their roles and understand how they work together to craft a compelling web page:


After watching this video, leave a comment that says - "Shift Bang Tab - Love it!". This comment will verify that you have watched the video and know the keyboard shortcut for create an HTML page. (less than 1 minute)

HTML Head: The Architect's Blueprint

The HTML Head serves as the architect's blueprint for your web page. It contains crucial information that isn't directly visible on the page but plays a pivotal role in structuring it. Here's what you'll find in the HTML Head:


Title: Think of the Title as the nameplate of your web page. It's the text that appears in the browser's tab or window. Crafting an informative and engaging title is vital, as it's often the first thing users notice when they open your site.

<head>

<title>Your Page Title Here</title>

</head>

Meta Tags: These unsung heroes provide essential information to search engines, social media platforms, and browsers. We've discussed Meta Tags before in the context of SEO optimization, but they also serve various other purposes like specifying character encoding and viewport settings.

<head>

<meta name="description" content="A brief description of your page">

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

Linking to External Resources: In the Head section, you can link to external resources like stylesheets (CSS) or JavaScript files. These links ensure your web page is styled and functions as intended.


<head>

<link rel="stylesheet" type="text/css" href="styles.css">

<script src="script.js"></script>

</head>

Favicons: Ever noticed those tiny icons that appear next to a website's title in your browser's tab? Those are called favicons, and they're defined in the HTML Head. They contribute to a website's branding and recognition.


<head>

<link rel="icon" type="image/png" href="favicon.png">

</head>

Canonical Link: If you have multiple versions of a page with similar content, you can use the canonical link to indicate the preferred version to search engines.


<head>

<link rel="canonical" href="https://www.yourwebsite.com/preferred-page">

</head>

HTML Body: The Content Stage

Now, let's move to the heart of your web page – the HTML Body. This is where all your visible content resides. It's like the stage where your website's content performs. Here's what you'll find in the HTML Body:


Headings and Text: These are the essential building blocks of content. Headings (h1, h2, h3, etc.) provide structure to your text, while regular text appears within paragraphs.

<body>

<h1>Welcome to My Website</h1>

<p>This is a sample paragraph of text on my web page.</p>

</body>

Images: You can insert images into your web page using the <img> tag. Make sure to provide appropriate alt attributes for accessibility and SEO.

<body>

<img src="your-image.jpg" alt="A beautiful landscape">

</body>

Links: Hyperlinks are the connectors of the web. You create links using the <a> tag. Be sure to specify the destination URL in the href attribute.

<body>

<a href="https://www.yourwebsite.com">Visit my website</a>

</body>

Lists: Lists come in two flavors – ordered and unordered. Use the <ul> and <ol> tags for these, respectively.

<body>

<h2>My To-Do List</h2>

<ul>

<li>Buy groceries</li>

<li>Finish work project</li>

<li>Exercise</li>

</ul>

</body>

Forms: Forms are crucial for user interaction and data collection. You can create forms for various purposes, from contact forms to login screens.

<body>

<h2>Contact Us</h2>

<form action="process-form.php" method="post">

<label for="name">Name:</label>

<input type="text" id="name" name="name">

<input type="submit" value="Submit">

</form>

</body>

Divs and Spans: These are generic containers used for styling and scripting. <div> is a block-level container, while <span> is an inline container.

<body>

<div class="section">

<h3>This is a section</h3>

<p>Some content here.</p>

</div>

<p>This is a <span class="highlighted">highlighted</span> word.</p>

</body>


HTML Head and Body in Harmony

HTML Head and Body may seem like two separate entities, but they work in harmony to create a compelling web page. The Head provides structure and essential information, while the Body delivers the visible content. Together, they are the building blocks of every web page you visit on the internet.

Every HTML document that you create should have the following lines of code. The DOCTYPE tells the server what type of document this is so that it knows how to process it. The second line is where you define the language of the website. The abbreviation "en" stands for English.

html head tag, html body tag

Head & Body Tag Example Code:


Every HTML web page is divided into two categories:


The head section is where you place your page title, meta tags, and links to style sheets and links to scripts. The body section is where you place all other HTML elements and the contents of your page.

Line 3 opens the head tag in which you will include information for the server and the search engines. There are 2 meta tags that get automatically added to your head section when you create your HTML page using Visual Studio. The first default meta tag is the character set UTF-8. Because UTF-8 is the default character set used by all modern browsers, UTF-8 will be used without being explicitly told to do so. It remains in metadata as a common good practice. The second default meta tag is the viewport. This line of code is required in order for your web page to fit properly inside a mobile browser.

Line 6 shows the title tag with the default set at "Document". You will change this later. (see Title below). After the title tag, the head tag is closed. You will obviously go back later and add more meta tags in your head section - once your page is ready to push to production but for a basic setup, this is all you need to get started.

Line 8 and 9 consists of your opening and closing body tag in which the majority of your code will reside. Just hit the return key after the opening body tag to start adding code to your page. And last but not least, you must always close your html page with the closing html tag.

HTML Comments:


Developers can write comments in their code to remind them later what a section of code is used for. HTML Comments are very appreciated by developers who come behind the previous developers of a project because they help the new developer understand what pieces of code are for. Watch the video below to learn how to add comments to your HTML document.

After you complete the video, please leave a comment (on YouTube) to indicate that you have completed this step. In the comments, write "Now I know the proper way to write comments inside of HTML". Doing so helps us know that you understand the material discussed in the video. (1 minute)

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved