Basics of HTML5

What are HTML5 Head Elements?

An HTML Head Element is a document element that is defines additional infromation about an HTML document. They are located within the < html > document element before the < body > element.

Properties of Head Elements

Head elements are void elements, meaning that they contain only a start tag with some amount of attributes. It does not contain any visible aspects of an HTML page.

Head elements begin with the < !DOCTYPE html > declaration that helps the browser display the webpage properly.

Head Element Syntax

htmlheadsyn

Head Element Reference

Tag	Use	In Code
< title >	defines the title fo the document	< title > content < /title >
< base >	defines a default address or a default target for all links	< base property = "value" >
< link >	links to style sheets	< link property = "value" >
< meta >	defines additional infromation about an HTML element	< meta property = "value" >
< style >	defines the style information for an HTML document	< style propert = "value" >
< script >	define client side java scripts	< script property = "value" >

MetaData

Metadata means "about data," and in an HTML document, metadata is additional information about the document that is placed in the < head > document element.

Head Metadata Elements

< Base >

The HTML < base > tag specifies the base URL and the base target for all relative URLs within a webpage. There can only be one < base > element in a document. It should be placed in the beginning of your < head > element.

Syntax

                < base property = "value" >

Attributes

Property	Values	Use	Syntax
href	URL	specifies the base URL for all relative URLs in a page	< base href = "url" >
target		specifies the default target for all hyperlinks and forms in the page	< base target = "value" >
	_blank	opens linkes in a new window or tab	< base target = "_blank" >
	_parent	opens the link in the parent frame	< base target = "_parent " >
	_self	default; opens the link in the same frame it was clicked	< base target = "_self" >
	_top	opens the link in the full body of the window	< base target = "_top " >

< Title >

The HTML < title > tag defines the title of an HTML document. It is required in all HTML documents.

The < title > element defines a title in the browser tab, provides a title for the webpage if it is added to user's favorites, and displays a title for the page in search engine results.

Syntax:

                < title > Content < /title >

< Link >

The HTML < link > tag defines a link between a document and an external resource. It is used primarily to link to external stylesheets .

Syntax

                < link attribute = "value" >

Attributes

Property	Values	Use	Syntax
charset	char_encoding	specifies the base URL for all relative URLs in a page	< link charset = "char_encoding" >
href	URL	specifies the location of the linked document	< link href = "url" >
rel			< link rel = "value" >
	alternate	links to an alternate version of the document	< link rel = "alternate" >
	author	links to the author of the document	< link rel = "author" >
	help	links to a help document	< link rel = "help" >
	icon	imports an icon to represent the document	< link rel = "icon" >
	license	links to copyright information for the document	< link rel = "license" >
	search	links to a search tool for the document	< link rel = "search " >
	stylesheet	URL to a style sheet to import	< link rel = "stylesheet " >
type	media_type	specifies the Internet media type of the linked document or resource	< link type = "media_type" >

< Meta >

The HTML < meta > tag provides metadata, or information about data, about the HTML document. It will not be displayued on the page and is mainly for use by machines.

< Meta > elements are used to specify the page description, keywords, author of the document, the date the site was last modified, and other metadata.

Use:

This metadata can be used by browsers in telling them how to display content or reload a page, by search engines based off of the document keywords, or other web services.

Syntax:

                < meta attribute = "value" >

Attributes

Property	Values	Use	Syntax

charset	char_encoding	specifies the base URL for all relative URLs in a page	< meta charset = "char_encoding" >
content	URL	gives the value associated with the http-equiv or name attribute	< meta content = "content" >
name		specifies a name for the metadata	< meta name = "value" content = "content" >
	application-name	specifies the name of the Web application that the page represents	< meta name = "application_name" content = "Application Name" >
	author	specifies the name of the author of the document	< meta name = "author" content = "Author Name" >
	description	specifies a description of the page.	< meta name = "description" content = "Description" >
	generator	specifies one of the software packages used to generate the document (not used on hand-authored pages)
	keywords	specifies a comma-separated list of keywords - relevant to the page	< meta name = "keywords" content = "keywords">

Typical Use of < meta > tag:

Define keywords for search engines:

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

Define a description of your web page:

< meta name = "description" content = "Introduction to Web Authoring and Design" >

Define the author of a page:

< meta name = "author" content = "Amber Papas" >

Refresh document every 30 seconds:

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

< Style >

The HTML < style > tag is used to define style information for a document. In the < style > tag of your < head > element, you can implement internal stylesheets . The attributes within the style element are written the same as they are in CSS decription blocks and allow you to apply specific styling to different elements within your webpage.

Use:

The < style > element will specify how HTML elements will be rendered in a browser. There can be more than one style tag.

Syntax:

                < style >
                    element {property : value;}
                    element {property : value;}
                < /style >

< Script >

The HTML < script > tag is used to define JavaScript (client-side script) within a document. The < script > element contains scripting statements or points to an external script file through the src attribute.

Use:

Typically, Javascript is used for image manipulation, form validation, and dynamic changes of content.

Syntax:

                < script >
                    *javascript*
                < /style >

Head Element and Attribute Summary

Property	Values	Use	Syntax
< Base >		pecifies the base URL and the base target for all relative URLs within a webpage	< base href = "url" >
href	URL	specifies the base URL for all relative URLs in a page	< base href = "url" >
target		specifies the default target for all hyperlinks and forms in the page	< base target = "value" >
	_blank	opens linkes in a new window or tab	< base target = "_blank" >
	_parent	opens the link in the parent frame	< base target = "_parent " >
	_self	default; opens the link in the same frame it was clicked	< base target = "_self" >
	_top	opens the link in the full body of the window	< base target = "_top " >
< Title >		defines the title of an HTML document. It is required in all HTML documents	< title > Content < /title >
< Link >		defines a link between a document and an external resource.	< link attribute = "value" >
charset	char_encoding	specifies the base URL for all relative URLs in a page	< link charset = "char_encoding" >
href	URL	specifies the location of the linked document	< link href = "url" >
rel			< link rel = "value" >
	alternate	links to an alternate version of the document	< link rel = "alternate" >
	author	links to the author of the document	< link rel = "author" >
	help	links to a help document	< link rel = "help" >
	icon	imports an icon to represent the document	< link rel = "icon" >
	license	links to copyright information for the document	< link rel = "license" >
	search	links to a search tool for the document	< link rel = "search " >
	stylesheet	URL to a style sheet to import	< link rel = "stylesheet " >
type	media_type	specifies the Internet media type of the linked document or resource	< link type = "media_type" >
< Meta >		provides metadata, or information about data, about the HTML document	< meta attribute = "value" >
charset	char_encoding	specifies the base URL for all relative URLs in a page	< meta charset = "char_encoding" >
content	URL	gives the value associated with the http-equiv or name attribute	< meta content = "content" >
name		specifies a name for the metadata	< meta name = "value" content = "content" >
	application-name	specifies the name of the Web application that the page represents	< meta name = "application_name" content = "Application Name" >
	author	specifies the name of the author of the document	< meta name = "author" content = "Author Name" >
	description	specifies a description of the page.	meta name = "description" content = "Description" >
	generator	specifies one of the software packages used to generate the document (not used on hand-authored pages)
	keywords	specifies a comma-separated list of keywords - relevant to the page	< meta name = "keywords" content = "keywords">
< b> < Style >		used to define style information for a document	< style > element {property : value;} element {property : value;} < /style >
< Script >		used to define JavaScript (client-side script) within a document	< script > javascript < /script >

Basics of Web Authoring and Design

{HTML5 Body Elements}

What are HTML5 Head Elements?

Properties of Head Elements

Head Element Syntax

Head Element Reference

MetaData

Head Metadata Elements

< Base >

Syntax

Attributes

< Title >

Syntax:

< Link >

Syntax

Attributes

< Meta >

Use:

Syntax:

Attributes

Typical Use of < meta > tag:

< Style >

Use:

Syntax:

< Script >

Use:

Syntax:

Head Element and Attribute Summary