Metadata

Metadata is data or information about data. It is not displayed on the screen. It typically describes how the page should be rendered; this information is used by web browsers to display the page. Metadata may contain information such as keywords, which are used by search engines, web crawlers, or other web services.

In this short discussion, we will look at some commonly used metadata elements.

Element Description Example
title Specify the name of a web page, which appears in the tab of most modern web browsers and in a search engine's results as the heading for the web page's listing <title>Introduction to HTML and CSS</title>
link Specify the relationship between the HTML document and external resources.

A link element can be used to instruct a web browser to preload assets (such as favicon).

<link rel="stylesheet" href="../styles/main-style.css" />

<link rel="shortcut icon" href="https://cs4640.cs.virginia.edu/images/webpl.png" type="image/ico" />

base Specify a base URL for all relative URLs in the HTML document.

By default, relative URLs are associated with the URL currently loaded and dispalyed on the screen. Depending on the structure of your file organization and the navigation system of your page(s) or website, the base element may not be necessary.

<base href="http://cs4640.cs.virginia.edu/jh2jf" />
meta Provide information about the HTML document.

Usually, the meta element is used to set the character encoding to UTF-8 to ensure that text characters will render properly.

Another meta element that is very useful for responsive design is the viewport element. The viewport element helps a web browser define the size of the page and the scale to which it is zoomed on smaller display sizes.

 <meta charset="UTF-8">

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

script Embed script or code in an HTML document. Typically, the code is JavaScript code, which is executed when the browser finishes parsing the content of the script element. <script type = "text/javascript">
  function setFocus(ele) {
    document.getElementById(ele).focus();
  }
</script>
style Specify format or layout of an HTML document. <style>
  div { color: Snow; padding: 10px; }
</script>