< Previous Next >

HTML Head

The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>.

The HTML <head> Element

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> 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 <title> Element

The <title> 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 <title> 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.

The <title> element:

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

The HTML <style> Element

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

The HTML <link> Element

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

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.

The HTML <script> Element

The <script> element is used to define client-side JavaScripts.

The HTML <base> Element

The <base> element specifies the base URL and/or target for all relative URLs in a page.
The <base> tag must have either an href or a target attribute present, or both.
here can only be one single <base> element in a document!

Key Points of HTML <head> Element:

1. Metadata Container:

The <head> element contains metadata about the HTML document. This information is not displayed directly on the webpage but affects how the document is processed and displayed.

2. Commonly Used Sub-elements:

<title>: Defines the title of the webpage shown in the browser's title bar or tab.
<meta>: Provides metadata such as character encoding, viewport settings, and SEO descriptions.
<link>: Links external resources like stylesheets.
<script>: Embeds or references JavaScript files.
<style>: Defines CSS styles directly within the HTML document.
<base>: Specifies a base URL for relative links.

3. SEO (Search Engine Optimization):

Elements like <meta name="description"> and <meta name="keywords"> provide important information for search engines to index your page effectively.

4. Character Encoding:

The <meta charset="UTF-8"> tag ensures the correct encoding of characters, enabling proper display of various text characters (especially non-ASCII ones).

5. Viewport Control for Responsive Design:

The <meta name="viewport" content="width=device-width, initial-scale=1"> tag is crucial for responsive design, allowing your webpage to render correctly on mobile devices.

6. External Resource Linking:

The <link> tag is used to include external resources, typically for stylesheets

7. Favicons:

The <link rel="icon" href="favicon.ico"> tag links to the site's favicon, the small icon shown in browser tabs.

8. Scripting and Deferred/Async Loading:

The <script> tag can be used to load JavaScript, and attributes like defer and async improve page load performance by controlling how and when the scripts are executed.

9. Canonical URL:

The <link rel="canonical" href="https://example.com"> tag is used to define the preferred URL for a page to prevent duplicate content issues in SEO.

10. Author and Copyright Information:

The <meta name="author" content="Author Name"> tag provides information about the author of the webpage.

< Previous Next >