What’s in the head metadata in html – learn web development mdn wd gaster theory

The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page , links to CSS (if you want to style your HTML content with CSS), links to custom favicons, and other metadata (data about the HTML, such as who wrote it, and important keywords that describe the document.) In this article we’ll cover all the above things and more, to give you a good basis for dealing with markup and other code that should live in your head. Prerequisites:

The HTML head is the contents of the element — unlike the contents of the element (which are displayed on the page when loaded in a browser), the head’s content is not displayed on the page. Instead, the head’s job is to contain metadata about the document. In the above example, the head is quite small:

In larger pages however, the head can get quite full of items — try going to some of your favorite websites and using the developer tools to check out their head contents. Our aim here is not to show you how to use everything that can possibly be put in the head, but rather to teach you how to use the most obvious things you’ll want to include in the head, and give you some familiarity. Let’s get started. Adding a title

We’ve already seen the element in action — this can be used to add a title to the document. This however can get confused with the element, which is used to add a top level heading to your body content — this is also sometimes referred to as the page title. But they are different things!

The element contents are also used in other ways. For example, if you try bookmarking the page ( Bookmarks > Bookmark This Page or the star icon in the URL bar in Firefox), you will see the contents filled in as the suggested bookmark name.

Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document — the element. Of course, the other stuff we are talking about in this article could also be thought of as metadata too. There are a lot of different types of element that can be included in your page‘s , but we won’t try to explain them all at this stage, as it would just get too confusing. Instead, we’ll explain a few things that you might commonly see, just to give you an idea. Specifying your document’s character encoding

This element simply specifies the document’s character encoding — the character set that the document is permitted to use. utf-8 is a universal character set that includes pretty much any character from any human language. This means that your web page will be able to handle displaying any language; it’s therefore a good idea to set this on every web page you create! For example, your page could handle English and Japanese just fine:

Note: Some browsers (e.g. Chrome) automatically fix incorrect encodings, so depending on what browser you use, you may not see this problem anyway. You should still set an encoding of utf-8 on your page anyway, to avoid any potential problems in other browsers. Active learning: Experiment with character encoding

To try this out, revisit the simple HTML template you obtained in the previous section on (the title-example.html page), try changing the meta charset value to ISO-8859-1, and add the Japanese to your page. This is the code we used: Japanese example: ご飯が熱い。 Adding an author and description

Specifying an author is useful in a few ways: it is useful to be able to work out who wrote the page, if you want to contact them with questions about the content. Some content management systems have facilities to automatically extract page author information and make it available for such purposes.

Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed Search Engine Optimization, or SEO.) Active learning: The description’s use in search engines

Note: Many features just aren’t used any more. For example, the keyword element ( ) — which is supposed to provide keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results. Other types of metadata

As you travel around the web, you’ll find other types of metadata, too. A lot of the features you’ll see on websites are proprietary creations, designed to provide certain sites (such as social networking sites) with specific pieces of information they can use.

The humble favicon, which has been around for many years, was the first icon of this type, a 16 x 16 pixel icon used in multiple places. You’ll see favicons displayed in the browser tab containing each open page, and next to bookmarked pages in the bookmarks panel.

• Saving it in the same directory as the site’s index page, saved in .ico format (most browsers will support favicons in more common formats like .gif or .png, but using the ICO format will ensure it works as far back as Internet Explorer 6.)

Don’t worry too much about implementing all these types of icon right now — this is a fairly advanced feature, and you won’t be expected to have knowledge of this to progress through the course. The main purpose here is to let you know what such things are, in case you come across them while browsing other websites’ source code. Applying CSS and JavaScript to HTML

Just about all websites you’ll use in the modern day will employ CSS to make them look cool, and JavaScript to power interactive functionality, such as video players, maps, games, and more. These are most commonly applied to a web page using the element and the element, respectively.

The element does not have to go in the head; in fact, often it is better to put it at the bottom of the document body (just before the closing tag), to make sure that all the HTML content has been read by the browser before it tries to apply JavaScript to it (if JavaScript tries to access an element that doesn’t yet exist, the browser will throw an error.)

• The JavaScript has added an empty list to the page. Now when you click anywhere on the list, a dialog box will pop up asking you to enter some text for a new list item. When you press the OK button, a new list item will be added to the list containing the text. When you click on an existing list item, a dialog box will pop up allowing you to change the item’s text.

• The CSS has caused the background to go green, and the text to become bigger. It has also styled some of the content that the JavaScript has added to the page (the red bar with the black border is the styling the CSS has added to the JS-generated list.)