HTML HeadThe HTML element is used as a container for metadata (data about data). It is used between tag and tag.The head of an HTML document is a part whose content is not displayed in the browser on page loading. It just contains metadata about the HTML document which specifies data about the HTML document. An HTML head can contain lots of metadata information or can have very less or no information, it depends on our requirement. But head part has a crucial role an HTML document while creating a website. Metadata defines the document title, character set, styles, links, scripts, and other meta information. Following is a list of tags used in metadata: HTML |
This is a paragraph.
Test it NowThe HTML element is used to link an external style sheet to your webpage. The element contains main two attributes which are "rel" and "href". The rel attribute indicates that it is a stylesheet, and href gives the path to that external file.
Example:
The HTML 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.
Let's see how to use metadata:
To define a character set:
The charset attribute specifies the character encoding. In this example we have set it to "UTF-8" which means it can handle to display any language.
Output:
To define a description of your webpage:
If you give a meta description then it will be useful for the relevant search to perform by search engines.
To define keywords for search engines:
The keyword value is also used to provide keywords for a search engine, but it may ignore by browser due to spammers.
To define author of the webpage:
The author value specifies the name of the person who wrote the page content, and it is useful to automatically extract author information by some content management systems.
To refresh document every 30 seconds:
Meta refresh is used to provide instructions to the browser to automatically refresh the page after the given time interval. As in above example it will automatically refresh after 30 sec
Following is an example to show how to use all Meta elements within HTML head
Example:
All the meta information are set.
This method is introduced in HTML5 to take control over the viewport by using tag.
Viewport is the user's visible area of a webpage. It changes from device to device and appears smaller on mobile phones than computer screens.
Syntax for viewport element:
Here, the viewport element specifies how to control the page's dimensions and scaling.
The width=device-width is used to set 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 is used to set the initial zoom level when the page is first loaded by the browser.
Example of a web page without the viewport tag:
To understand this example, you should open this page on a phone or a tablet.
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.
Example of a web page with the viewport tag:
To understand this example, you should open this page on a phone or a tablet.
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.
The HTML
Example:
We have specified a base URL, the browser will look for the image "html5.png" at "https://static.tutorialsinfo.com/htmlpages/images/html5.png"
The link above will open in a new window because base target is set to "_blank".
This will change the color
Test it NowIf we want to use some external JavaScript file then it can be applied by: