HTML Head
The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page <title>, links to CSS (if you choose to style your HTML content with CSS), links to custom favicons, and other metadata (data about the HTML, such as the author, and important keywords that describe the document.)
An HTML head can contain lots of metadata information or can have very little or no information, it depends on the requirements. But the head part has a crucial role in 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:
<title>
<style>
<meta>
<link>
<script>
<base>
<title> element
The <title> element is used to define the title of an HTML/XHTML document. It must be placed between the <head> element, and a document can only have one <title> element.
It is important to note that the title element should be specific about the content of the document, and its recommended length is 65 to 70 characters including spaces.
The <style> element is used to add styles and formatting to an HTML document. CSS properties can be defined within the <style> element, which allows for customization of the layout, fonts, colors, and other design elements of the page. The <style> element can be placed within the <head> section of an HTML document, or within individual HTML tags.
If you want to apply the same styles to multiple pages, it is recommended to use an external CSS file rather than embedding styles within the <style> element of each page. This helps to maintain consistency and makes it easier to update the styles across multiple pages.
<meta> element
Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document - the <meta> element. Of course, the other stuff we are talking about in this article could also be thought of as metadata too.
There are many different types of <meta> elements that can be included in your page's <head>, but we won't try to explain them all at this stage as it could get too confusing. Instead, we'll explain a few things that you might commonly see just to give you an idea.
<meta charset="UTF-8">
The charset attribute specifies the character encoding. In this example, we have set it to "UTF-8," which means it can handle displaying any language.
<meta name="description" content="Free Web tutorials">
If you give a meta description, it will be useful for the relevant search to perform by search engines.
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
The keyword value is also used to provide keywords for a search engine, but it may be ignored by a browser due to spammers.
<meta name="author" content="Akon">
The author value specifies the name of the person who wrote the page content, and it is useful for automatically extracting author information by some content management systems.
<meta http-equiv="refresh" content="30">
Meta refresh is used to provide instructions to the browser to automatically refresh the page after the given time interval. In the above example, it will automatically refresh after 30 seconds.
<meta http-equiv="refresh" content="10; url="https://lecturely.com/html/html-header">
If you add a URL with a content value, it will redirect to that page after the time limit is over.
The above example illustrates all the meta tag like charset, description, keywords, and author.
Use <meta> tag to set the viewport
This method is introduced in HTML5 to take control over the viewport by using the <meta> tag.
The 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.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here, the <meta> 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.
Note: To see the difference clearly, open this page on a smartphone or tablet.
<link> element
This element is used to link an external style sheet to our webpage. The <link> element contains two main attributes: "rel" and "href."
The rel attribute indicates that it is a stylesheet, and href gives the path to that external file.
<script> element
The HTML <script> element is used to apply client-side JavaScript for the same page or to add an external JavaScript file to the current page.
<base> element
The HTML <base> element is used to specify the base URL and base target for all relative URLs on a page.
