HTML - The Head Element
The head
element is a container for other meta elements.
The title
, style
, meta
, link
, script
and base
elements are all contained in the HTML head
element.
The HTML <head> Element
Thehtml
andbody
tags are separated by thehead
element,
which is a container for metadata (info about data).
HTML metadata is an information about an HTML document. Not shown to users.
Usually, metadata sets the title
, character set
, styles
, scripts
and other meta information for the content.
The HTML <title> Element
The title
element specifies the document's title. The title must be text-only and appear in the title bar of the browser or in the tab of the page.
In HTML texts, the title
element is needed!
For search engine optimization (SEO), the contents of a page title are critical! Search engine algorithms utilize the page title to determine the order in which pages are listed in search results.
The title
element:
- creates a title for the toolbar in the browser
- When a page is added to favorites, it gets a title.
- Shows a search engine results page title
Try to make the heading as precise and meaningful as possible!
Example
A Meaningful Page Title
The content of the body element is displayed in the browser window.
The content of the title element is displayed in the browser tab, in favorites and in search-engine results.
The HTML <style> Element
To define the styling information for an HTML page, the style
element is used:
Example
The HTML <link> Element
The link
element establishes a connection between the current document and a third-party resource.
The most common usage of the link
element is to link to external style sheets:
Example
Related Links
The HTML <meta> Element
Character set, page description, keywords, document author, and viewport settings are all often specified via the meta
element.
The metadata is not visible on the page but is utilized by browsers, search engines, and other online services (how to show or reload content).
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:
Setting The Viewport
The viewport is the visible area of a website for the user. It depends on the device — on your mobile phone, it is smaller than on your computer screen.
All of your web pages should have the following meta
element:
This offers the browser instructions for controlling the size and scale of the page.
Thewidth=device-width
section adjusts the page's width to match the device's screen size (which will vary depending on the device).
When the website is first loaded by the browser, the initial-scale=1.0
section specifies the initial zoom level.
Related Links
The HTML <script> Element
Using script
you declare JavaScripts on the client-side.
"Hello JavaScript!" is written into an HTML element with the id="demo" attribute using the JavaScript below:
Example
Page Title
Your Web Page
A Paragraph