HTML Head

The HTML head element is used as a container for metadata (data about data). It is used between html tag and body tag.

HTML metadata is not displayed. It only specifies data about the HTML document.

Metadata defines the document title, character set, styles, links, scripts, and other meta information.

Following is a list of tags used in metadata:

title, style, meta, link, script, and base.

The HTML title element is used to define the title of the document. It is used in all HTML/XHTML documents.

It defines a title in the browser tab.

It provides a title for the page when it is added to favorites.

It displays a title for the page in search engine results.

!DOCTYPE html html head titleThis Page Title/title /head body pThe bodys content is displayed in the browser window./p pThe content of the title element is displayed in the browser tab, in favorites and in search engine results./p /body /html

The HTML style element is used to style the HTML page.

!DOCTYPE html html head titleThis is Page Title/title style body background-color: pink h1 color: red p color: blue /style /head body h1This is a Heading/h1 pThis is a paragraph./p /body /html

The HTML link element is used to link an external style sheet to your webpage.

!DOCTYPE html html head titleThis is a Page Title/title link rel=stylesheet href=external.css /head body h1This is a Heading/h1 pThis is a paragraph./p /body /html

The HTML meta element is used to specify the character set, page description, keywords, authors and other metadata on the webpage.

Metadata is mainly used by browsers, search engines, and other web services to rank your webpage better.

To define a description of your webpage:

To define keywords for search engines:

To refresh document every 30 seconds:

!DOCTYPE html html head meta charset=UTF-8 meta name=description content=Free Web tutorials meta name=keywords content=HTML,CSS,XML,JavaScript meta name=author content=Akon /head body pAll the meta information are set./p /body /html

Use meta tag to set the Viewport

This method is introduced in HTML5 to take control over the viewport by using meta tag.

Viewport is the users visible area of a webpage. It changes from device to device and appears smaller on mobile phones than computer screens.

Syntax for meta viewport element:

Here, themeta viewportelement specifies how to control the pages dimensions and scaling.

Thewidth=device-widthis used to set the width of the page to follow the screen-width of the device (which will vary depending on the device).

Theinitial-scale=1.0is used to set the initial zoom level when the page is first loaded by the browser.

Example of a web page without the viewport meta tag:

!DOCTYPE html html body pbTo understand this example, you should open this page on a phone or a tablet./b/p img src=image.jpg alt=image width=460 height=345 p Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. /p /body /html

Example of a web page with the viewport meta tag:

!DOCTYPE html html head meta name=viewport content=width=device-width, initial-scale=1.0/ style img max-width: 100%; height: auto; /style /head body pbTo understand this example, you should open this page on a phone or a tablet./b/p img src=image.jpg alt=image width=460 height=345 p Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. /p /body /html

Note: To see the difference clearly, open this page on smartphone or tablet.

The HTML base element is used to specify the base URL and base target for all relative URLs in a page.

!DOCTYPE html html head titlePage Title/title base href= /head body img src=html5.gif pWe have specified a base URL, the browser will look for the image html5.gif at pa href= pThe link above will open in a new window becausebase target is set to _blank./p /body /html

Excluding html, head and body elements

HTML 5 facilitates us to omit the html, the body, and the head tag.

!DOCTYPE html titlePage Title/title h1This is a heading/h1 pThis is a paragraph./p

Note: It is not recommended to omit the html and body tags. Omitting these tags can crash DOM or XML software and produce errors in older browsers (IE9).

However, you can omit the head tag.

JavaTpoint offers too many high quality services. Mail us on[emailprotected], to get more information about given services.

JavaTpoint offers college campus training on Core Java, Advance Java, , Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at[emailprotected]