官术网_书友最值得收藏!

首頁 >

Web Developer's Reference Guide

Document metadata

The next elements will give metadata about the document. In addition to this, you can also include links to resources, such as CSS and JavaScript.

head

The head element is the metadata parent element. All other metadata elements will be children of this element:

<head></head>
Description

The head element usually must have a title element inside it. The elements that can go in head are title, link, meta, style, script, noscript, and base. These elements are explained next.

Here is an example of the head element that defines a title and stylesheet element:

<head>
    <title>Title that appears as the tab name</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
title

The title element displays the title of the document. This is what is displayed in the browser's tab or the browser window:

<title></title>
Description

The title element is an aptly named element. This is a required element in head, and there should only be one title element for a document. Here is a simple example of title element:

<head>
    <title>Example</title>
</head>
link

The link element links a resource to the current document:

<link crossorigin href media rel sizes type></link>
Attributes

The attributes that are used in the link element are as follows:

  • crossorigin: This tells the browser whether to make the Cross-Origin Resource Sharing (CORS) request or not
  • href: This indicates the URL of the resource
  • media: This selects the media that this resource applies to
  • rel: This indicates the relationship of this resource to the document
  • sizes: This is used with rel when it is set to icons
  • type: This indicates the type of content of the resource
Description

The link element has a lot of attributes, but most of the time, it is used for loading the CSS resources. This means that you will want to use the attributes href, rel, type, and media at least.

You can have multiple link elements in a head element. Here is a simple example of how to load CSS:

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<link href="style.css" media="screen" rel="styleshhet" sizes type="text/css"></link>
See also

You can also refer to the crossorigin, href, media, rel, sizes, and type attributes to find out more details about the title element.

meta

The meta element contains metadata about the document. The syntax is as follows:

<meta content http-equiv name></meta>
Attributes

The attributes that are used in the meta element are as follows:

  • content: This states the value of either the name or http-equiv attribute.
  • http-equiv: This attribute, in the case of HTML5, can be set to default-style, which sets the default style. Alternatively, it can be set to refresh, which can specify the number of seconds taken to refresh the page and a different URL for the new page if needed, for example, http-equiv="1;url=http://www.google.com".
  • name: This states the name of the metadata.
Description

The meta tag has many nonstandard applications. The standardized applications can be viewed in Chapter 2, HTML Attributes.

Note

Apple has many meta tags that will pass information to an iOS device. You can set a reference to an App Store application, set an icon, or display the page in the full screen mode, as just a few examples. All of these tags are nonstandard, but useful when targeting iOS devices. This is true for many other sites and companies.

You can use multiple meta tags in a head element. Here are two examples. The first example will refresh the page every 5 seconds and the other will define the author metadata:

<meta http-equiv="refresh" content="5" />
<meta name="author" content="Joshua" />
See also

You can also refer to the name attribute to find out more details about the meta element.

style

The style element contains the style information.

CSS:

<style media scoped type></style>
Attributes

The attributes that are used in the style element are as follows:

  • media: This is a media query
  • scoped: The styles contained in this element only apply to the parent element
  • type: This sets the type of document; the default value is text/css
Description

The style element is usually in the head element. This allows you to define CSS styles for the current document.

The preferred method of using CSS is to create a separate resource and use the link element. This allows styles to be defined once and used everywhere on a website instead of defining them on every page. This is a best practice as it allows us to define the styles in one spot. We can then easily find and change styles.

Here is a simple inline stylesheet that sets the font color to blue:

<style media="screen" scoped type="text/css">
    body{
        color: #0000FF;
    }
</style>
See also

You can also refer to the global attributes and Chapters 3-7 to know more details about the style element.

base

The base element is the base URL for the document. The syntax is as follows:

<base href target>
Attributes

The attributes that are used in the base element are as follows:

  • href: This indicates the URL to be used as the base URL
  • target: This indicates the default target to be used with the URL
Description

The base URL is used whenever a relative path or URL is used on a page. If this is not set, the browser will use the current URL as the base URL.

Here is an example of how to set the base URL:

<base >
See also

You can also refer to the target attribute to find out more details about the base element.

script

The script element allows you to reference or create a script for the document:

<script async crossorigin defer src type><script>
Attributes

The attributes that are used in the script element are as follows:

  • async: This is a Boolean attribute that tells the browser to process this script asynchronously. This only applies to the referenced scripts.
  • crossorigin: This tells the browser whether to make a CORS request or not.
  • defer: This is a Boolean attribute that tells the browser to execute the script after the document has been parsed.
  • src: This distinguishes the URL of the script.
  • type: This defines the type of the script that defaults to JavaScript if the attribute is omitted.
Description

The script element is the way to get JavaScript into your document and add enhanced interactivity. This can be done using a bare script tag and adding JavaScript into the element. Also, you can use the src attribute to reference an external script. It is considered a best practice to reference a script file as it can be reused here.

This element can be a child of head or can be placed anywhere in the body of the document. Depending on where the script element is located, you may or may not have access to the DOM.

Here are two examples of using a script element. The first example will reference an external script, the second will be an inline script element, and the last will show how to use the crossorigin attribute:

<script src="example.js" type="text/javascript"></script>
<script>
    var a = 123;
</script>
<script async crossorigin="anonymous" defer src="application.js" type="text/javascript"><script>
noscript

The noscript element will be parsed if scripting is turned off in the browser. The syntax is as follows:

<noscript></noscript>
Description

If scripting is enabled, the content inside of this element will not appear on the page and the code inside it will run. If scripting is disabled, it will be parsed.

This element is mainly used to let the user know that the site may not work with JavaScript. Almost every website today not only uses JavaScript, but requires it.

Here is an example of the noscript element:

<noscript>
    Please enable JavaScript.
</noscript>
主站蜘蛛池模板： 宁波市| 海口市| 嘉兴市| 苗栗市| 西乌| 郯城县| 三台县| 怀来县| 汉阴县| 宁国市| 抚松县| 阿图什市| 桦甸市| 平顶山市| 镇雄县| 桦南县| 拉孜县| 纳雍县| 新乐市| 建阳市| 崇信县| 长垣县| 稷山县| 微山县| 同德县| 南召县| 邻水| 庐江县| 镶黄旗| 鹤峰县| 辉县市| 工布江达县| 沁源县| 开平市| 安国市| 石渠县| 涞水县| 育儿| 梅河口市| 芜湖市| 柘城县|