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”