The <head> element contains metadata or information about the HTML page. It is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
Title tag
The <title> tag 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> tag is required in HTML documents!
The contents 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:
Here are some tips for creating good titles:
So, try to make the title as accurate and meaningful as possible!
Note: You can NOT have more than one <title> element in an HTML document.
<title>lovemesomecoding</title>
Style tag
The <style> tag is used to define style information (CSS) for a document. Inside the <style> element you specify how HTML elements should render in a browser. Note that when a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used (see example below)!
<style>
p {color:black;}
</style>
Meta tag
The <meta> tag defines metadata about an HTML document. Metadata is data or information about data in your web page. <meta> tags are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services. There is a method to let web designers take control over the viewport (the user’s visible area of a web page), through the <meta> tag. name specifies the type of meta element it is; what type of information it contains. content specifies the actual meta content.
<!-- charset --> <meta charset="UTF-8"> <!-- application-name, author, description, generator, keywords, viewport --> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="application-name" content="lovemesomecoding"> <meta name="description" content="Free Web tutorials"> <meta name="author" content="John Doe"> <meta name="generator" content="folau"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- http-equiv="content-security-policy|content-type|default-style|refresh" --> <meta http-equiv="refresh" content="30">
Link tag
The <link> tag defines the relationship between the current document and an external resource. The <link> tag is most often used to link to external style sheets. The <link> element is an empty element, it contains attributes only.
<link rel="stylesheet" href="style.css">
Script tag
The <script> tag is used to embed a client-side script (JavaScript). The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
Note: There are several ways an external script can be executed:
<script type="text/javascript"> var username = 'folau'; </script>
NoScript tag
The <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn’t support script. The <noscript> element can be used in both <head> and <body>. When used inside <head>, the <noscript> element could only contain <link>, <style>, and <meta> elements.
<noscript>Your browser does not support JavaScript!</noscript>
Base tag
The <base> tag specifies the base URL and/or target for all relative URLs in a document. The <base> tag must have either an href or a target attribute present, or both. There can only be one single <base> element in a document, and it must be inside the <head> element.
<base href="https://lovemesomecoding.com/" target="_blank">