Title of webpage

HTML — The Head Element

The HTML element is a container for the following elements: , , , , , and .

The HTML Element

The element is a container for metadata (data about data) and is placed between the tag and the tag.

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The HTML Element

The element defines the title of the document. The title must be text-only, and it is shown in the browser’s title bar or in the page’s tab.

The element is required in HTML documents!

The content of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

• defines a title in the browser toolbar
• provides a title for the page when it is added to favorites
• displays a title for the page in search engine-results

So, try to make the title as accurate and meaningful as possible!

Example

The content of the document.

The HTML Element

The element is used to define style information for a single HTML page:

Example

The HTML Element

The element defines the relationship between the current document and an external resource.

The tag is most often used to link to external style sheets:

Example

Tip: To learn all about CSS, visit our CSS Tutorial.

The HTML Element

The element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.

The metadata will not be displayed on the page, but is used by browsers (how to display content or reload page), by search engines (keywords), and other web services.

Examples

Define the character set used:

Define keywords for search engines:

Define a description of your web page:

Define the author of a page:

Refresh document every 30 seconds:

Setting the viewport to make your website look good on all devices:

Example

Setting The Viewport

The viewport is the user’s visible area of a web page. It varies with the device — it will be smaller on a mobile phone than on a computer screen.

You should include the following element in all your web pages:

This gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

The HTML Element

The element is used to define client-side JavaScripts.

The following JavaScript writes «Hello JavaScript!» into an HTML element with >

Example

Tip: To learn all about JavaScript, visit our JavaScript Tutorial.

The HTML Element

The element specifies the base URL and/or target for all relative URLs in a page.

The tag must have either an href or a target attribute present, or both.

There can only be one single element in a document!

Example

Specify a default URL and a default target for all links on a page:

Chapter Summary

• The element is a container for metadata (data about data)
• The element is placed between the tag and the tag
• The element is required and it defines the title of the document
• The element is used to define style information for a single document
• The tag is most often used to link to external style sheets
• The element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings
• The element is used to define client-side JavaScripts
• The element specifies the base URL and/or target for all relative URLs in a page

HTML head Elements

Tag	Description
	Defines information about the document
	Defines the title of a document
	Defines a default address or a default target for all links on a page
	Defines the relationship between a document and an external resource
	Defines metadata about an HTML document
	Defines a client-side script
	Defines style information for a document

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник

HTML HEAD — A Place For Webpage Metadata

In this tutorial, You will learn about the HTML head element, its use, types of element that lies inside it, the role of head in webpages, etc.

HTML head

HTML head element create one of the most important part of the webpage. It contains the part of the HTML document which is not directly visible on the screen but is used by search engines and other parts of the webpage.

The HTML head is created using tag. It is the first element inside the tag.

The head section contains information such as metadata (data about the HTML document, such as keyword, description, author, charset, etc), CSS style, links to ‘favicon’, script, etc. These information are not directly visible to the user but it has a direct or indirect effect on the visible part of the webpage.

Here is how the HTML head looks like and the elements it contains.

Types of elements lie inside the head

The head element basically composed of these 6 different types of HTML elements:

1. HTML title element

The title element ( ) defines the title of the document.

The title element is required in all HTML documents to produce a valid document. The title of a webpage is shown in the title bar or page’s tab.

Only 1 title element should be placed in an HTML document and must be placed in the head of the document. The title element should only contain text elements.

Tags within the title are ignored and treated as simple text.

The title of the webpage is shown as the heading of the specific search result in the search engines. It has a significant role in search engine optimization (SEO).

     
Learning HTML title element.
  

The elements are used to provide metadata about the web page. It is a self closing element.

Metadata is a set of data that describes and gives information about the webpage. The data of meta tags are not visible on the web page but are machine parsable.

Here is an example of metadata. The type of data provided by metadata could be Keywords, author, page description, last modified, and other metadata.

Learn about meta tag in detail in next chapter.

3. HTML link tag

The element is used to define relationship between current HTML document and external resource.

The most common external resource added using tag is CSS stylesheets. Other than the stylesheet it is also used to add a “favicon» icon.

To add stylesheet href attribute is used inside the link tag to provide the URL of the stylesheet and the rel attribute is used to specify the relation between the documents.

    
The webpage is linked with external stylesheet.
 
This is gray and has 20px padding.
  

The HTML base element defines a base URL to be used for all relative URLs in a document.

You shoul set a base URL in the head section of the document all the relative URLs will start at that point, e.g if you add a base URL to https://www.tutorialstonight.com then any relative URL like html/html-head will become https://www.tutorialstonight.com/html/html-head regardless of the URL of the current webpage.

An HTML document can have one and only one base tag and must be inside the head.

     
The link using https://www.tutorialstonight.com as base address.
 
Open Advance HTML Editor.
  

Note : The HTML element must come before any resource that uses the base URL.

The style element is one of the most important tags of HTML documents. It is used to define internal CSS properties for a web page in the head section.

The CSS properties are defined as the usual way inside element.

You can add more than one style element inside the head section.

    p 
Learning about style tag.
 
This is paragraph.
  

Note : It is recommended to put your CSS styles in the external stylesheet and link it to the document using the element.

6. HTML script tag

The element is used to add javascript code or any external javascript file to the current document.

JavaScript code executable code which makes webpages interactive.

It can be anywhere both in the head section or in the body section of the HTML document.

To link external script files src attribute is used which accepts the URL of the script file.

Conclusion

HTML head contains elements like , , , , , and elements. The contents in head is not directly visible in webpage but rather is used by search engines and webpage components. We have also discussed head template.

1. Is head required in HTML? Yes, the head is required in HTML and must be used only once and just after the tag.
2. What are the head elements in HTML? There are bascially 6 elements used in HTML: , , , , , and

Источник

: The Document Metadata (Header) element

The HTML element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.

Note: primarily holds information for machine processing, not human-readability. For human-visible information, like top-level headings and listed authors, see the element.

Attributes

This element includes the global attributes.

profile Deprecated Non-standard

The URIs of one or more metadata profiles, separated by white space.

Examples

doctype html> html lang="en-US"> head> meta charset="UTF-8" /> meta name="viewport" content="width=device-width" /> title>Document titletitle> head> html> 

Technical summary

If the document is an srcdoc document, or if title information is available from a higher level protocol (like the subject line in HTML email), zero or more elements of metadata content.

Otherwise, one or more elements of metadata content where exactly one is a element.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник