Scribd
Upload
6 views4 pages

HTML Part 3

html part 3

Uploaded by

vijaykharb798
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views4 pages

HTML Part 3

html part 3

Uploaded by

vijaykharb798
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

What's in the Head?

Understanding the Metadata in HTML

What is the <head> of an HTML document?

In an HTML document, the <head> is a special section that doesn’t appear directly on
the webpage when it loads. Instead, it contains important information about the page,
called "metadata." This information helps browsers know how to display the page and
makes the page easier to search or share. For example, it holds the page title, links to
CSS files for styling, and other details like the document's author or keywords.

Here’s an example of a simple HTML document that shows the <head> and its
contents:

html
Copy code
<!doctype html><html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My Test Page</title>
</head>
<body>
<p>This is my page</p>
</body></html>

In this example:

 The <meta charset="utf-8" /> tag defines the character encoding, ensuring the page can
display text from different languages.
 The <title> tag is the title of the page, which shows up in the browser tab.

Adding a Title

The <title> tag is used to set the title of your webpage. This title is shown on the
browser tab and in bookmarks. For example, the title "My Test Page" will appear on
the tab when you open the page.

But remember, the <title> is different from the <h1> tag, which adds a heading on the
webpage itself.

Metadata with <meta>

The <meta> tag is used to add extra information about your webpage, known as
"metadata." Here are a few common uses:

1.

Character Encoding: This tells the browser which character set to use. For
example, utf-8 is a universal character set that supports many languages,
making your page compatible with languages like English and Japanese.
2.
3.

html

4.
5.

Copy code

6.
7.

<meta charset="utf-8" />

8.
9.
10.

Author and Description: You can use the <meta> tag to specify the author of
the page and add a short description. This can help improve the page's
visibility in search engines.

11.
12.

html

13.
14.

Copy code

15.
16.

<meta name="author" content="Chris Mills" /><meta name="description"


content="Learn how to create websites with HTML, CSS, and JavaScript." />

17.
18.
19.

Search Engine Optimization (SEO): The description and title tags can help
your page rank higher in search engine results. When someone searches for
your site’s topic, the title and description will be shown in search results.

20.

Custom Icons (Favicon)


A favicon is a small image that represents your site, often seen in browser tabs or
bookmarks. You can add a favicon to your site by including a <link> tag in the <head>
section:

html
Copy code
<link rel="icon" href="favicon.ico" type="image/x-icon" />

You can also add different icons for different devices, such as Apple devices:

html
Copy code
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />

Adding CSS and JavaScript

To style your webpage or add interactive features, you can include CSS and
JavaScript files in the <head>:

CSS: Use the <link> tag to add a CSS file for styling.


html


Copy code


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



JavaScript: Use the <script> tag to add JavaScript functionality. The defer
attribute makes sure the script loads after the HTML content, preventing errors
if the script tries to use HTML elements that aren’t loaded yet.


html

Copy code


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


Summary

In summary, the <head> section of an HTML document holds important metadata and
links to external resources, such as CSS and JavaScript files. It helps the browser
understand how to render the page, and it also affects how the page appears in search
results and on social media. Some key elements in the head include:

 <title>: The title of your page, shown in the browser tab.


 <meta charset="utf-8" />: Ensures the page supports various languages.
 <meta name="author" content="Author Name" />: Shows the page author.
 <meta name="description" content="Page description" />: Helps with SEO.
 <link rel="icon" href="favicon.ico" />: Adds a favicon (small icon) for your site

You might also like