The Head Tag
Part of the Styling with CSS section of Coddy's HTML journey — lesson 4 of 76.
In HTML, the head tag is a container for metadata about the HTML document. Metadata is data that describes the document but is not displayed on the page itself. The head element is placed between the <html> tag and the <body> tag.
The head tag can include various elements, such as:
<title>: Specifies the title of the HTML document, which is displayed in the browser's title bar or tab.
<style>: Contains internal CSS styles for the document.<link>: Links to external resources, such as CSS files.
<meta>: Provides metadata about the document, such as character set, description, and keywords.<script>: Embeds client-side scripts, such as JavaScript.
Here's an example of how the head tag is used in an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>In this example, the head tag contains the title of the page and some internal CSS styles. The title "My Web Page" will be displayed in the browser's title bar, and the background color of the body will be set to light blue.
Challenge
EasyYou are given an HTML document with a <head> tag. Inside, add <style> and add the following CSS code inside it:
body {
background-color: lightgreen;
}Cheat sheet
The head tag contains metadata about the HTML document and is placed between <html> and <body> tags.
Common elements inside head:
<title>: Document title displayed in browser tab<style>: Internal CSS styles<link>: Links to external resources<meta>: Document metadata<script>: JavaScript code
Example structure:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
</body>
</html>Try it yourself
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>
Test yourselfThis lesson includes a short quiz. Start the lesson to answer it and track your progress.
All lessons in Styling with CSS
5 Colors and Backgrounds
Background ColorHEX ColorsRGB ColorsTransparency with RGBARecap Challenge #1