HTML

Last Updated: 9/19/2022

Head Element

  • Container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
  • HTML metadata is data about the HTML document. Metadata is not displayed.
  • Metadata typically define the document title, character set, styles, scripts, and other meta information.

<title>

  • 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.
  • Required in HTML documents
  • Title is very important for search engine optimization (SEO)
  • Title of the page is used when it is added to favorites in browser

<title>Html Tutorials</title>

<style>

  • Define style information for the page
<style>
	body {
		background-color: lightblue;
	}
</style>
  • Defines the relationship between the current document and an external resource.
  • Often used to link to external style sheets
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" />

type - media type of the linked document https://www.iana.org/assignments/media-types/media-types.xhtml

<script>

Used to define client-side JavaScript.

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

<meta>

  • Used to specify the character set, page description, keywords, author of the document, and viewport settings.
  • Used by browsers and search engines

Define the character set used:

<meta charset="UTF-8">

Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, JavaScript">

Define a description of your web page:

<meta name="description" content="HTML tutorials">

Define the author of a page:

<meta name="author" content="kumar">

Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">

Setting the viewport to make your website look good on all devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Viewport

  • Viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.
  • width=device-width part sets the width of the page to follow the screen-width of the device
  • initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

<base>

  • Specifies the base URL and/or target for all relative URLs in a page.
  • 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!
<head>
<base href="/" target="_blank">
</head>
Previous
Next