HTML Head Element

The HTML head Element is the container of lots of elements like <title>, <style>, <link>, <script>, <meta> and <base>. The <head> element is placed between the <html> and <body> tags. The <head> element is the container for metadata (information about the document). Metadata defines the document title, style, character set, scripts, and other meta information.
The HTML <title> Element
The <title> element defines the document title. The title element must contain only text, and it is displayed in the browser’s title bar. The <title> element is a required element and we must include it in all html documents.
The title element is used to:
- display a title in the browser’s title bar.
- provide a title for the page when it is bookmarked.
- highlights a title for the page in Search engine results.
In an Example below let’s see how a title is placed in an HTML document.
Example
<!DOCTYPE html> <html> <head> <title> Your Title </title> </head> <body> <p> Your main content/ article it is displayed in the browser window.</p> </body> </html>
The HTML <style> Element
The <style> element is used to define a style for an HTML Page. By adding the <style> element between the <head> tags, we can change the style of a whole HTML Page and the text color of an HTML page. In an Example below let’s see how to add <style> element between the <head> tags.
Example
<!DOCTYPE html> <html> <head> <title>Your Title </title> <style> body {background-color: green;} h1 {color: orange;} p {color: blue;} </style> </head> <body> <h1>This is a Heading</h1> </br> <p>This is a paragraph.</p> </body> </html>
The HTML <meta> Element
The <meta> element provides the extra information about an HTML document. Such as character set, keywords, page description, author name and viewport settings.
Example
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="Web development tutorials"> <meta name="keywords" content="HTML"> <meta name="author" content="William Paul"> </head> <body> <p>All meta information inside the head section.</p> </body> </html>
Example Explained
<meta charset="UTF-8">
It defines the character set used.
<meta name="description" content="Web development tutorials">
It defines the description of a web page.
<meta name="keywords" content="Web Development">
Defines the keywords, for search engines to rank on google.
<meta name="author" content="William Paul">
Defines the author of the web page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Setting of viewport, it makes your web page to look good on all devices.
The HTML <link> Element
The HTML <link> element defines the relationship between the current web page and an external resource. We mostly use <link> element to link to external style sheets.
Below in an Example let’s see how to link an external style sheet file to our HTML document.
Example
<!DOCTYPE html> <html> <head> <title> Your Title </title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>
The HTML <base> Element
The HTML <base> element specifies the base URL for all relative links present in the document.
We can only add only one <base> element in a document.
Example
<!DOCTYPE html> <html lang="en"> <head> <title> base element </title> <base href="https://crus4.com/"> </head> <body> <p><a href="web-development/webdevelopment-head.php">HTML Head</a>.</p> </body> </html>
The HTML <script> Element
The <script> element is used to define a scripting language like JavaScript in an HTML documents.
Example
<!DOCTYPE html> <html> <head> <title> Your Title </title> <script> function myFunction() { document.getElementById("demo").innerHTML = "Greetings from crus4!"; } </script> </head> <body> <h1> A simple web page </h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()"> Click Here </button> </body> </html>
Related Articles
2 thoughts on “HTML Head Element – crus4”