HTML Head

A container for the following components in HTML is the <head> element: <title>, <style>, <meta>, <link>, <script>, and <base>.

The HTML Element

Positioned between the <html> and <body> tags, the <head> element serves as a container for metadata, or information about data.

Data about the HTML document is called HTML metadata. There is no display of metadata.

Character sets, styles, scripts, document titles, and other meta information are often defined via metadata.

The HTML Element</h2> </div> </div> </div> </div> <div class="elementor-element elementor-element-183d2fe e-flex e-con-boxed e-con e-parent" data-id="183d2fe" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-4a596d8 elementor-widget elementor-widget-text-editor" data-id="4a596d8" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span style="font-weight: 400;">The document’s title is defined by the <strong><span style="color: #990055;"><title></span></strong> element. The title appears in the tab on the website or in the title bar of the browser and has to be text only.</span></p><p><span style="font-weight: 400;">HTML publications must contain the <strong><span style="color: #990055;"><title></span></strong> element!</span></p><p><span style="font-weight: 400;">A page title’s content has a big impact on search engine optimization (SEO)! Search engine algorithms use the page title to determine which pages to display in search results.</span></p><p><span style="font-weight: 400;">The <strong><span style="color: #990055;"><title></span> </strong>element:</span></p><ul><li><span style="font-weight: 400;">describes a toolbar title in the browser.</span></li><li><span style="font-weight: 400;">gives the page a title when it is added to favorites.</span></li><li><span style="font-weight: 400;">gives the page’s title in search engine results.</span></li></ul><p><span style="font-weight: 400;">Thus, make an effort to be as precise and meaningful as you can with the title!</span></p><p><span style="font-weight: 400;">A basic HTML document</span></p> </div> </div> </div> </div> <div class="elementor-element elementor-element-b1e94d7 e-flex e-con-boxed e-con e-parent" data-id="b1e94d7" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-d20b744 elementor-widget elementor-widget-heading" data-id="d20b744" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Example</h2> </div> </div> </div> </div> <div class="elementor-element elementor-element-eeeeb8f e-flex e-con-boxed e-con e-parent" data-id="eeeeb8f" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-ebbbc90 elementor-widget elementor-widget-code-highlight" data-id="ebbbc90" data-element_type="widget" data-widget_type="code-highlight.default"> <div class="elementor-widget-container"> <div class="prismjs-default copy-to-clipboard "> <pre data-line="" class="highlight-height language-html line-numbers"> <code readonly="true" class="language-html"> <xmp><!DOCTYPE html> <html> <head> <title>There Is a Good Page Title The content of the document......

The HTML Element

For a single HTML page, style information is defined using the <style> element:

Example

				
					<style>
  body {background-color: pink;}
  h1 {color: green;}
  p {color: red;}
</style>

The HTML Element

The connection between the current document and an external resource is specified by the <link> element.

When linking to external style sheets, the <link> tag is most frequently used:

Example

The HTML Element

Typically, the character set, page description, keywords, document author, and viewport parameters are specified using the <meta> element.

The metadata is utilized by search engines (keywords), browsers (how to display content or reload pages), and other web services; it is not visible on the page.

Example

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:

Example of <meta> tags:

Example

Setting The Viewport

A web page’s visible region to the user is called the viewport. It depends on the device; for example, it will be smaller on a computer screen than it is on a mobile phone.

Every web page you create should have the following <meta> element:

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:

The HTML Element

JavaScripts on the client side are defined using the <script> tag.

“Hello HTML!” is written into an HTML element with the id=”demo” by the following JavaScript:

Example

The HTML Element

For every relative URL in a page, the base URL and/or target are specified by the <base> element.

Either the target attribute or the href attribute, or both, must be present in the <base> tag.

HTML Head

The HTML Element

The HTML Element

Example

The HTML Element

Example

The HTML Element

Example

Example

Setting The Viewport

The HTML Element

Example

The HTML Element

Example

Chapter Summary

HTML head Elements

Top Tutorials

Top Tutorials

Top Tutorials

Top Tutorials