- Introduction To HTML
- HTML Editors
- HTML Basic Examples
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML Styles
- HTML Formatting Elements
- HTML Quotation
- HTML Comments
- HTML Colors
- HTML Styles - CSS
- HTML Links
- HTML Images
- HTML Tables
- HTML Lists
- HTML Block And Inline
- HTML Class
- HTML Id
- HTML Iframes
- HTML JavaScript
- HTML File Paths
- HTML Head
- HTML Layout
- HTML Responsive
- HTML Computer Code
- HTML Semantic
- HTML Forms
- HTML Form Attributes
- HTML Form Elements
- HTML Input Types
- HTML Input Attributes
- HTML Input Form Attributes
- HTML Canvas
- HTML SVG
- HTML Media
- HTML Video
- HTML Audio
- HTML YouTube
HTML Head
HTML - The Head Element
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 positioned between the <html>
and <body>
tags and contains metadata (data about data).
Metadata in HTML is information about the HTML document. There is no display of metadata.
Typically, metadata define the document's title, character set, styles, and scripts, as well as other meta information.
The HTML <title>
tag Element
The <title> element defines the document's title. The title must consist solely of text and is displayed in the browser's title bar or the page's tab.
In HTML documents, the title> element is required!
A simple HTML document:
<!DOCTYPE html>
<html>
<head>
<title>
A Meaningful Page Title</title>
</head>
<body>
<p>The content of the body element is displayed in the browser window.</p>
<p>
The content of the title element is displayed in the browser tab, in favorites and in search-engine results.</p>
</body>
</html>
The HTML Style Element
The <style>
element specifies style information for a single HTML page:
<html>
<head>
<title>Page Title</title>
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The HTML Link Element
The <link>
element establishes a connection between the current document and an external resource.
Most commonly, the <link>
tag is used to link to external style sheets:
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The HTML Meta Element
Typically, the <meta>
element is used to specify the character set, page description, keywords, document author, and viewport settings.
The metadata will not be displayed on the page, but they will be utilised by browsers (how to display content or reload the page), search engines (keywords), and other web services.
Define the used character set:
Define keywords for search engines:
Define a description of your web page:
Define the author of a page:
Refresh document every 30 seconds:
Setting the viewport to make your website look good on all devices:
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
</head>
<body>
<p>All meta information goes inside the head section.</p>
</body>
</html>
Setting The Viewport
The viewport is the area of a web page that is visible to the user. It varies depending on the device; on a mobile phone, it will be smaller than on a computer screen.
All of your web pages should include the following <meta>
element:
This instructs the browser on how to control the dimensions and scaling of the page.
The width=device-width
attribute adjusts the width of the page to match the width of the device's display (which will vary depending on the device).
The initial-scale=1.0
portion specifies the initial zoom level when the browser loads the page.
Here is a web page with and without the viewport meta tag:
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP