Key excerpt: HTML head element
label |
Description |
|
Defines the information for a document |
<title> |
Defines the title of the document |
<base> |
Defines the default link address for page link labels |
<link> |
Defines a relationship between a document and an external resource |
<meta> |
Defines the metadata in an HTML document |
<script> |
Defines a script file for the client |
<style> |
A style file that defines an HTML document |
The
Elements that can be added to the head area are labeled: <title>, <style>, <meta>, <link>, <script>, <noscript>, and < Base>.
HTML <title> Elements
<title> elements:
- Defines the title of the browser toolbar
- Titles that appear in favorites when a page is added to a favorite folder
- Title displayed on the Search engine results page
<! DOCTYPE html>
<title>title of the Document</title>
<body>
The content of the document ...
</body>
HTML <base> Elements
The <base> tag describes the basic link address/link target, which is the default link for all the link labels in an HTML document:
<base href= "http://www.w3cschool.cc/images/" target= "_blank" >
Properties value Description Href
Url Specifies the base URL for all relative links in the page. Target _blank
_parent
_self
_top
FrameName Specifies where all hyperlinks and forms in the page are opened. This property is overwritten by the target property in each link. HTML <link> Elements
The <link> tag defines the relationship between the document and the external resources.
<link> tags are typically used to link to style sheets :
<link rel= "stylesheet" type= "Text/css" href= "Mystyle.css" >
NEW:HTML5 the new property.
Properties |
value |
Description |
CharSet |
Char_encoding |
HTML5 does not support this property. Defines how characters are encoded in the linked document. |
Href |
Url |
Defines the location of the linked document. |
Hreflang |
Language_code |
Defines the language of the text in the linked document. |
Media |
Media_query |
Specifies what device the linked document will be displayed on. |
Rel |
Alternate Archives Author Bookmark External First Help Icon Last License Next Nofollow Noreferrer Pingback Prefetch Prev Search Sidebar Stylesheet Tag Up |
Necessary. Defines the relationship between the current document and the linked document. |
Rev |
Reversed relationship |
HTML5 does not support this property. Defines the relationship between the linked document and the current document. |
SizesNew |
HeightxWidth Any |
The Link property size is defined and only works on the attribute rel= "icon". |
Target |
_blank _self _top _parent Frame_name |
HTML5 does not support this property. Defines where the linked document is loaded. |
Type |
Mime_type |
Specifies the MIME type of the linked document.
|
HTML <style> Elements
The <style> tag defines the style file reference address for the HTML document.
In the <style> element you need to specify a style file to render the HTML document:
<style type= "Text/css" >
Body {Background-color:yellow}
p {Color:blue}
</style>
<style> tags define style information for HTML documents.
In the <style> element, you can specify how HTML documents are rendered in the browser.
Each HTML document can contain multiple <style> tags.
Hints and Notes
Tip: If you want to link an external style sheet, use the <link> tab.
tip: to learn more about style sheets, read our CSS tutorials.
Note: If you do not use the "scoped" attribute, each <style> tag must be in the head header area.
The difference between HTML 4.01 and HTML5
The "scoped" property is a new property in HTML 5 that allows us to define a style for the specified part of the document, rather than the entire document.
If you use the "scoped" property, the specified style can only be applied to the parent element of the style element and its child elements.
Property
The new property in the NEW:HTML5.
Properties |
value |
Description |
Media |
Media_query |
Specifies a different media type for the style sheet. |
ScopedNew |
Scoped |
If this property is used, the style is applied only to the parent element of the style element and its child elements. |
Type |
Text/css |
Specifies the MIME type of the style sheet. |
HTML <meta> Elements
The META tag describes some basic meta-data.
The <meta> tag provides metadata. The metadata is also not displayed on the page, but is parsed by the browser.
Meta elements are typically used to specify the description of a Web page, keywords, last modified time of the file, author, and other meta-data.
Meta data can be used for browsers (how to display content or reload pages), search engines (keywords), or other Web services.
<meta> generally placed in
<meta> Tags-usage examples
Define keywords for search engines:
<meta name= "keywords" content= "HTML, CSS, XML, XHTML, JavaScript" >
Define the description for the page:
<meta name= "description" content= "Free Web tutorials on HTML and CSS" >
Define page Authors:
<meta name= "Author" content= "Hege refsnes" >
Refreshes the current page every 30 seconds:
<meta http-equiv= "Refresh" content= "+" > Properties
NEW:HTML5 the new property.
Properties |
value |
Description |
CharSetNew |
Character_set |
Defines the character encoding for a document. |
Content |
Text |
Defines the meta information associated with the HTTP-EQUIV or Name property. |
Http-equiv |
Content-type Default-style Refresh |
Associate the Content property to the HTTP header. |
Name |
Application-name Author Description Generator Keywords |
Associate the Content property to a name. |
Scheme |
Format/uri |
HTML5 not supported. Defines the format used to translate content property values. |
HTML <script> Elements
The <script> tag is used to load script files, such as: JavaScript.
The <script> elements are described in detail in the following sections.
Label definition and usage instructions
<script> tags are used to define client-side scripting, such as JavaScript.
The <script> element can contain either a script statement or an external script file through the "src" attribute.
JavaScript is typically used for image manipulation, form validation, and dynamic content changes.
Hints and Notes
Note: If you use the "src" attribute, the <script> element must be empty.
tip: See the <noscript> element, which is useful for users who disable scripts in the browser or whose browsers do not support client-side scripting.
Note: There are several ways to execute external scripts:
- If async= "Async": The script executes asynchronously relative to the rest of the page (the script will be executed when the page resumes parsing)
- If Async is not used and defer= "defer": the script executes when the page finishes parsing
- If neither async nor defer is used: reads and executes the script immediately before the browser continues to parse the page
The difference between HTML 4.01 and HTML5
In HTML 4, the "type" property is required, but is optional in HTML5.
The "Async" property is a new property in HTML5.
Some properties in HTML 4.01 are no longer supported in HTML5: "Xml:space".
The difference between HTML and XHTML
In XHTML, the content type in the script is declared as #PCDATA (instead of CDATA), meaning that the entity is parsed.
This means that in XHTML, all special characters should be encoded, or all content nested in a CDATA section:
<script type= "Text/javascript" >
<! [cdata[
var i=10;
if (i<5)
{
Some code
}
]]>
</script> Properties
The new property in the NEW:HTML5.
Properties |
value |
Description |
AsyncNew |
Async |
Specifies the asynchronous execution script (for external scripts only). |
CharSet |
CharSet |
Specifies the character encoding used in the script (only for external scripts). |
Defer |
Defer |
Specifies that when the page is resolved, the script executes (only for external scripts). |
Src |
Url |
Specifies the URL of the external script. |
Type |
Mime-type |
Specifies the MIME type of the script. |
Xml:space |
Preserve |
HTML5 not supported. Specifies whether to preserve whitespace in the code. |
HTML Basics Summary < head >