Saturday 29 November 2014

HTML Head and Body

The <head> tag and the <body> tag arethe two important tags used in HTML document. Both of them are essential in creating an HTML document.

HTML <head> Tag

The head element is a container for all head contents. Elements inside the <head> can include scripts, styles, title of the document, metadata, and more.
The following elements can go inside the head section :
HTML <title> Tag
The HTML <title> tag defines the title of the webpage. The title element is essential in an HTML document.

For example:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document..</title>
</li>
</ul>
<body>
Body of the document...
</body>
</html>
HTML <style> Tag
The HTML <style> tag is used to include styles for an HTML document.

Attributes
media media_query Specifies what media/device the media resource is optimized for
scoped scoped Specifies that the styles only apply to this element's parent element
and that element's child elements
type text/css Specifies the MIME type of the style sheet
For example:
<head>
<style type="text/css">
body { background-color:red }
p { color:yellow}
</style>
</head>
HTML <base> Tag
The <base> tag specifies a default address or a default target for all the links in the page.

Attributes
href URL Specifies the base URL for all relative URLs in the page
target _blank
_parent
_self
_top
framename
Specifies the default target for all hyperlinks and forms in the page
For example:
<head>
<base href="http://www.facebook.com/images"></base>
<base target="_blank"></base>
</head>
HTML <link> Tag
The <link> tag defines the relationship between a HTML document and an external source. It is commonly used to link style sheets.

Attributes
charset char_encoding Specifies the character encoding of the linked document
href URL Specifies the location of the linked document
hreflang language_code Specifies the language of the text in the linked document
media media_query Specifies on what device the linked document will be displayed
rel alternate
archives
author
bookmark
external
first
help
icon
last
license
next
nofollow
noreferrer
pingback
prefetch
prev
search
sidebar
stylesheet
tag
up
Required. Specifies the relationship between the current
document and the linked document
rev reversed relationship Specifies the relationship between the linked document
and the current document
sizes HeightxWidth
any
Specifies the size of the linked resource. Only for rel="icon"
target _blank
_self
_top
_parent
frame_name
Specifies where the linked document is to be loaded
type MIME_type Specifies the MIME type of the linked document
For example:
<head>
<link href="styles.css" rel="stylesheet" type="text/css"></link>
</head>
HTML <meta> Tag
The <meta> tag provide the metadata about the HTML document. It will be displayed on the page, but will be machine readable. Meta elements are usually used to specify the description, keywords, author of the document etc.

Attributes
charset character_set Specifies the character encoding for the HTML document
content content Gives the value associated with the http-equiv or name attribute
http-equiv content-type
default-style
refresh
Provides an HTTP header for the information/value of the content
attribute
name application-name
author
description
generator
keywords
Specifies a name for the metadata
scheme format/URI Specifies a scheme to be used to interpret the value of the
content attribute
For example:
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML tutorials">
<meta name="keywords" content="HTML, CSS, Bootstrap">
<meta name="author" content="Edwin Ronald Lambert">
</head>
HTML <script>Tag
The <script> tag is used to define a client-side script, such as JavaScript. The script element usually contains scripting statements or an external file that contains the scripting statements.

Attributes
async async Specifies that the script is executed asynchronously (only for external
scripts)
charset charset Specifies the character encoding used in an external script file
defer defer Specifies that the script is executed when the page has finished parsing
(only for external scripts)
src URL Specifies the URL of an external script file
type MIME-type Specifies the MIME type of the script
xml:space preserve Specifies whether whitespace in code should be preserved

For example:
<head>
<script type="text/javascript">
document.write
("Hello World!")
</script>
</head>
HTML <noscript> Tag
The <noscript> tag is used to provide an alternate content for users who have disabled scripts in their browsers.

For example:
<head>
<script type="text/javascript">
document.write
("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript.<br /></noscript>

HTML <body> Tag

The <body> tag contains all the content visible in the HTML webpage. It can contain text, hyperlinks, pictures, tables, forms etc. In fact, all the page content is written inside the body element. That is why, the body element is one of the most important elements in HTML language.

0 comments:

Post a Comment