HTML <!--...--> Tag
<!--This is a comment. Comments are not displayed in the browser-->
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
Definition and Usage
The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.
You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.
Browser Support
Element
|
Chrome
|
Mozila
|
Safari
|
Opera
|
explorer
|
<!--...-->
|
Yes
|
Yes
|
Yes
|
Yes
|
Yes
|
Differences Between HTML 4.01 and HTML5
NONE.
Tips and Notes
You can also use the comment tag to "hide" scripts from browsers without support for scripts (so they don't show them as plain text):
Note: The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.
HTML <!DOCTYPE> Declaration
Example
Definition and Usage
Browser Support
Differences Between HTML 4.01 and HTML5
Tips and Notes
Common DOCTYPE Declarations
HTML 5
HTML 4.01 Strict
HTML 4.01 Transitional
HTML 4.01 Frameset
XHTML 1.0 Strict
XHTML 1.0 Transitional
XHTML 1.0 Frameset
XHTML 1.1
HTML <!DOCTYPE> Declaration
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......</body>
</html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......</body>
</html>
Definition and Usage
The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
HTML5 is not based on SGML, and therefore does not require a reference to a DTD.
Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.
Browser Support
All Browsers Support
Differences Between HTML 4.01 and HTML5
There are three different <!DOCTYPE> declarations in HTML 4.01. In HTML5 there is only one:
<!DOCTYPE html
Tips and Notes
Note: The <!DOCTYPE> tag does not have an end tag.
Tip: The <!DOCTYPE> declaration is NOT case sensitive.
Common DOCTYPE Declarations
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML <a> Tag
Example
Definition and Usage
Browser Support
Tips and Notes
Differences Between HTML 4.01 and HTML5
Attributes
HTML <abbr> Tag
Example
Definition and Usage
Browser Support
Tips and Notes
Differences Between HTML 4.01 and HTML5
HTML <acronym> Tag. Not Supported in HTML5.
Example
Definition and Usage
Tips and Notes
Differences Between HTML 4.01 and HTML5
HTML <address> Tag
Example
Definition and Usage
Browser Support
Tips and Notes
Differences Between HTML 4.01 and HTML5
HTML <applet> Tag. Not Supported in HTML5.
Example
Definition and Usage
Browser Support
Differences Between HTML 4.01 and HTML5
Required Attributes
Optional Attributes
HTML <area> Tag
Example
Definition
and Usage
Browser
Support
Differences
Between HTML 4.01 and HTML5
Differences
Between HTML and XHTML
Attributes
HTML <aside> Tag
Example
Definition
and Usage
Browser
Support
Differences
Between HTML 4.01 and HTML5
Tips and
Notes
HTML <audio> Tag
Example
Definition
and Usage
MIME Types
for Audio Formats
Browser
Support
Differences
Between HTML 4.01 and HTML5
Tips and
Notes
HTML <a> Tag
Example
A link to W3Schools.com:
<a href="http://nimls,edu.pk">Visit NIMLS college Sahiwal!</a>
Definition and Usage
The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
By default, links will appear as follows in all browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
Browser Support
All Browsers Support
Tips and Notes
Tip: The following attributes: download, hreflang, media, rel, target, and type cannot be present if the href attribute is not present.
Tip: A linked page is normally displayed in the current browser window, unless you specify another target.
Tip: Use CSS to style links.
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the <a> tag could be either a hyperlink or an anchor. In HTML5, the <a> tag is always a hyperlink, but if it has no href attribute, it is only a placeholder for a hyperlink.
HTML5 has some new attributes, and some HTML 4.01 attributes are no longer supported.
Attributes
= New in HTML5.
Attribute
|
Value
|
Description
|
char_encoding
|
Not supported in HTML5.
Specifies the character-set of a linked document | |
coordinates
|
Not supported in HTML5.
Specifies the coordinates of a link | |
filename
|
Specifies that the target will be downloaded when a user clicks on the hyperlink
| |
URL
|
Specifies the URL of the page the link goes to
| |
language_code
|
Specifies the language of the linked document
| |
media_query
|
Specifies what media/device the linked document is optimized for
| |
section_name
|
Not supported in HTML5. Use the id attribute instead.
Specifies the name of an anchor | |
alternate
author bookmark help license next nofollow noreferrer prefetch prev search tag |
Specifies the relationship between the current document and the linked document
| |
text
|
Not supported in HTML5.
Specifies the relationship between the linked document and the current document | |
default
rect circle poly |
Not supported in HTML5.
Specifies the shape of a link | |
_blank
_parent _self _top framename |
Specifies where to open the linked document
| |
MIME_type
|
Specifies the MIME type of the linked document
|
HTML <abbr> Tag
Example
An abbreviation is marked up as follows:
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
Definition and Usage
The <abbr> tag indicates an abbreviation or an acronym, like "WWW" or "NATO".
By marking up abbreviations you can give useful information to browsers, spell checkers, translation systems and search-engine indexers.
Browser Support
All Browsers Support
Tips and Notes
Tip: The global title attribute can be used in the <abbr> tag to show the full version of the abbreviation/acronym when you mouse over the <abbr> element.
Differences Between HTML 4.01 and HTML5
NONE.
HTML <acronym> Tag. Not Supported in HTML5.
Example
An acronym is marked up as follows:
Can I get this <acronym title="as soon as possible">ASAP</acronym>?
Definition and Usage
The <acronym> tag defines an acronym.
An acronym can be spoken as if it were a word, example NATO, NASA, ASAP, GUI.
By marking up acronyms you can give useful information to browsers, spell checkers, translation systems and search-engine indexers.
Tips and Notes
Tip: The title attribute can be used to show the full version of the acronym when you mouse over it.
Differences Between HTML 4.01 and HTML5
The <acronym> tag is not supported in HTML5.
HTML <address> Tag
Example
Contact information for Example.com:
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA</address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA</address>
Definition and Usage
The <address> tag defines the contact information for the author/owner of a document or an article.
If the <address> element is inside the <body> element, it represents contact information for the document.
If the <address> element is inside an <article> element, it represents contact information for that article.
The text in the <address> element usually renders in italic. Most browsers will add a line break before and after the address element.
Browser Support
All Browsers Support
Tips and Notes
Tip: The <address> tag should NOT be used to describe a postal address, unless it is a part of the contact information.
Tip: The <address> element will typically be included along with other information in a <footer> element.
Differences Between HTML 4.01 and HTML5
HTML 4.01 does not support the <article> tag, so in HTML 4.01 the <address> tag always defines the contact information of the document's author/owner.
HTML <applet> Tag. Not Supported in HTML5.
Example
An embedded Java applet:
<applet code="Bubbles.class" width="350" height="350">
Java applet that draws animated bubbles.</applet>
Java applet that draws animated bubbles.</applet>
Definition and Usage
The <applet> tag defines an embedded applet.
Browser Support
Chrome and Opera not supported
Note: There is still some support for the <applet> tag in some browsers, but it requires additional plug-ins/installations to work.
Differences Between HTML 4.01 and HTML5
The <applet> tag is not supported in HTML5.
Required Attributes
Attribute
|
Value
|
Description
|
code
|
URL
|
Specifies the file name of a Java applet
|
object
|
name
|
Specifies a reference to a serialized representation of an applet
|
Optional Attributes
Attribute
|
Value
|
Description
|
align
|
left
right top bottom middle baseline |
Specifies the alignment of an applet according to surrounding elements
|
alt
|
text
|
Specifies an alternate text for an applet
|
archive
|
URL
|
Specifies the location of an archive file
|
codebase
|
URL
|
Specifies a relative base URL for applets specified in the code attribute
|
height
|
pixels
|
Specifies the height of an applet
|
hspace
|
pixels
|
Defines the horizontal spacing around an applet
|
name
|
name
|
Defines the name for an applet (to use in scripts)
|
vspace
|
pixels
|
Defines the vertical spacing around an applet
|
width
|
pixels
|
Specifies the width of an applet
|
HTML <area> Tag
Example
An image-map, with clickable areas:
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
Definition
and Usage
The <area> tag defines
an area inside an image-map (an image-map is an image with clickable areas).
The <area> element is
always nested inside a <map> tag.
Note: The usemap attribute in the <img> tag is associated with the <map> element's name attribute, and creates a relationship
between the image and the map.
Browser
Support
All Browsers Support
Differences
Between HTML 4.01 and HTML5
HTML5 has some new
attributes, and some HTML 4.01 attributes are no longer supported.
Differences
Between HTML and XHTML
In HTML the <area> tag
has no end tag.
In XHTML the <area> tag
must be properly closed.
Attributes
= New in HTML5.
Attribute
|
Value
|
Description
|
text
|
Specifies an alternate text for the area. Required if the href
attribute is present
|
|
coordinates
|
Specifies the coordinates of the area
|
|
filename
|
Specifies that the target will be downloaded when a user
clicks on the hyperlink
|
|
URL
|
Specifies the hyperlink target for the area
|
|
language_code
|
Specifies the language of the target URL
|
|
media query
|
Specifies what media/device the target URL is optimized for
|
|
value
|
Not supported in HTML5.
Specifies that an area has no associated link |
|
alternate
author bookmark help license next nofollow noreferrer prefetch prev search tag |
Specifies the relationship between the current document and
the target URL
|
|
default
rect circle poly |
Specifies the shape of the area
|
|
_blank
_parent _self _top framename |
Specifies where to open the target URL
|
|
MIME_type
|
Specifies the MIME type of the target URL
|
HTML <aside> Tag
Example
<p>My
family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot
Center</h4>
<p>The
Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
Definition
and Usage
The <aside> tag defines
some content aside from the content it is placed in.
The <aside> tag defines
some content aside from the content it is placed in.
The aside content should be
related to the surrounding content.
Browser
Support
Element
<aside>
6.0
9.0
4.0
5.0
11.1
The numbers in the table
specifies the first browser version that fully supports the element.
Element
|
|||||
<aside>
|
6.0
|
9.0
|
4.0
|
5.0
|
11.1
|
The numbers in the table
specifies the first browser version that fully supports the element.
Differences
Between HTML 4.01 and HTML5
The <aside> tag is new
in HTML5.
The <aside> tag is new
in HTML5.
Tips and
Notes
Tip: The <aside> content could be placed
as a sidebar in an article.
Tip: The <aside> content could be placed
as a sidebar in an article.
HTML <audio> Tag
Example
Play a sound:
Definition
and Usage
The <audio> tag defines
sound, such as music or other audio streams.
Currently, there are 3
supported file formats for the <audio> element: MP3, Wav, and Ogg:
Browser
|
MP3
|
Wav
|
Ogg
|
Internet Explorer
|
YES
|
NO
|
NO
|
Chrome
|
YES
|
YES
|
YES
|
Firefox
|
NO
Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3 |
YES
|
YES
|
Safari
|
YES
|
YES
|
NO
|
Opera
|
NO
|
YES
|
YES
|
MIME Types
for Audio Formats
Format
|
MIME-type
|
MP3
|
audio/mpeg
|
Ogg
|
audio/ogg
|
Wav
|
audio/wav
|
Browser
Support
The numbers in the table
specifies the first browser version that fully supports the element.
Element
|
Chrome
|
Explorer
|
Mozila
|
Safari
|
Opera
|
<audio>
|
4.0
|
9.0
|
3.5
|
4.0
|
10.5
|
Differences
Between HTML 4.01 and HTML5
The <audio> tag is new
in HTML5.
Tips and
Notes
Tip: Any text inside the between <audio>
and </audio> will be displayed in browsers that do not support the
<audio> tag.
Posts
No comments:
Post a Comment