The code element is meant to contain text that represents computer code such as programming code or html code.
It is an inline element.
Browsers render this element in a monospace font such as Courier.
The core attributes can be applied to this element.
The cite element is used to indicate citations. It is an inline element. Citations can be from websites, magazines, books etc. The citation text is rendered in italics in most browsers.
When citing a web page, you can nest the cite element in an a element.
Example: <p>The best beginner's book on HTML and CSS that I have read is <cite>Head First HTML</cite></p>
The core attributes can be applied to this element.
center element horizontally centers its contents. It is a block element. This element is deprecated. Use CSS instead.
The caption element is used to caption tables. A caption is a
short description of the contents of the table. The caption element must
appear immediately after the <table> tag, there should be no other
elements or text in between.
Example: <table><caption>the table caption</caption><tr><th>heading</th></tr><tr><td>row 1</td></tr></table>
The core attributes can be applied to this element.
alignThis deprecated attribute specifies the position of the caption.
Takes the values top,bottom,left,and right.
The CSS property caption-side is preferred instead of this attribute.
The button element is used to submit or clear forms, or to perform an
action using Javascript. Unlike input element, which is also used to create
buttons, button is not an empty element and therefore all its content serves as the button.
The button element can contain almost any element, inline or block. The exceptions are
the a, form, fieldset, input,
select, textarea, label and button.
The button element, like inline elements, needs to have a block parent element such
as p or div. Unlike inline elements, however, it can contain child block elements.
Example: <form action="form.php"><div><button><p>the quick brown</p></button></div></form>
disabled="disabled"With this attribute, the button is disabled (grayed-out).
typeThe value of this attribute can be submit, which submits the form that the button is contained in, reset,
which clears all the form's entries, or button which is used when the action is defined by Javascript. Without
the type attribute, button functions like a submit button.
nameThis specifies the control name of the button.
valueThe value of this attribute is sent together with the control name of the button.
Example: <form action="test.php"><p><button name="somename" value="somevalue">the quick brown</button></p></form>
When the button is clicked it will send test.php?somename=somevalue
The br tag is used to indicate a semantic break in a paragraph. The browser inserts a line break when it encounters this element. Therefore, it continues rendering the content on the next line. This is an empty tag. This element can appear in any element that can contain text.
A paragraph is used to introduce a new idea in a text. The br element can be used when a new idea needs to be introduced, but a new paragraph is not warranted.
Apart from the Core Attributes, there is only the clear attribute, which is deprecated in favor of CSS.
clearnone, left, right and all. This specifies if the content after the br tag should be rendered in a new line that starts vertically below any floated elements.The body element contains all the displayed
content of the document. Its parent element is html
and it appears after the head element. It can contains block-level
elements and the script element.
Apart from the
Core Attributes,
there are a number of presentational attributes the body can have.
However, all the presentational attributes are deprecated in favor of CSS. These deprecated attributes are:
backgroundbgcolortextlinkalinkvlinkThe blockquote tag is used to indicate a quotation that is lengthy or that consists of one or more paragraphs. It can only contain block-elements (and the script element) as child elements. It cannot contain text directly.
Example: <blockquote cite="The Michigan School Moderator"><p>The quick brown fox jumps over the lazy dog</p></blockquote>
citebig element makes its text content's font size larger than the inherited font size. However, this a presentational element and even though it hasn't been deprecated, shouldn't be used. CSS should be used instead.
The bdo element is used to change the direction of rendering of characters of text. That is, characters that would be rendered one after another from left to right would instead be rendered from right to left and vice versa. It is an inline element.
dirThis is a required attribute. It can take the values ltr or rtl which stand for left-to-right and right-to-left
Example: <p>The quick <bdo dir="rtl">brown</bdo> fox</p>
lang and xml:langThis specifies the language of the text content of the bdo tag. See Core Attributes
base is an empty element, which means that it does not have any content. However it does have attributes. It is only found in the head element. This element must appear before any element that contains URLs.
hrefThis is a required attribute whose value is a URL which is added on to all relative URLs in the document. The url specified must end with a forward slash. Note that the base url specified affects all relative URLs - those contained in <link>, <form>, <a>, <img>, <iframe>, etc.
Example 1: <base href="http://destination-code.blogspot.com/" />
Example: 2 <base href="/pages/" />
targetAll links in the page (<a> elements) load in a new window with the internal name specified in target.
Example: <base href= "/images/" target="_blank" />
Note that the default target can be overridden by the target attribute in an a tag.
This text content of the b element is rendered in boldface. It is an inline element. Though this element's purpose is purely presentational, it hasn't been deprecated, probably because of its earlier widespread use. It is preferable to use the strong element instead of b
Example: It is better <b>not</b> to use the b element.
The area element is always a child element of the map element.
It is an empty element. Its function is similar to a
element in that it is used to create hyperlinks. However, area defines
hyperlinks in imagemaps only. It does so by means of the href,
coords and shape attributes.
<area>altThis is a required attribute. Its function here is similar as in the
img element. Here it provides a short description of the defined area.
coordsThis attribute specifies a series of comma separated values whose meaning
depends on the value of the shape attribute. All coordinates are with respect to the top left corner of the image box.
shape="rect"This indicates that the defined area is a rectangle.
In this case, the coords attribute will have four values.
The first two values are the x and y coordinates, in pixels,
of the top left corner of the rectangle, and the following two values are the coordinates
of the bottom right corner.
Example: <area alt="garden" shape="rect" coords="10,50,80,20">
shape="circle"This indicates that the defined area is a circle.
In this case, the coords attribute will have three values.
The first two values are the x and y coordinates, in pixels,
of the center of the circle. The next value is the radius, also in pixels.
Example: <area alt="pool" shape="circle" coords="20,40,10">
shape="poly"This indicates that the defined area is a polygon. Triangles, rectangles, pentagons, etc. are polygons. In this case, there is no limit on the number of values. Each pair of values is the coordinate of one of the vertices of the polygon. The last pair of values should be the same as the first.
Example: <area alt="house" shape="poly" coords="35,75,42,82,73,93,20,30">
hrefSpecifies the URL or the file that is linked to the clickable area
nohref="nohref"This attribute is used to indicate that the area is not hyperlinked.
targetSpecifies the name of the window or frame that the linked document should open in.
The applet element is used to place a Java applet in a web page. This element is deprecated and has been replaced by the object element.
There are a few attributes that are considered "core attributes" because they can be applied to nearly every element. They are:
dirIt can take the values rtl or ltr which
stand for right-to-left and left-to-right. This attribute specifies base direction
of directionally neutral text (i.e., text that doesn't have inherent directionality as
defined in Unicode).
It also specifies the
directionality of tables.
Source: W3C.
Example: <p dir="rtl">The quick brown fox</p> In this example, the text is aligned to the right
in the same way that text-align:right would. This attribute is inherited by child elements.
This attribute can be applied to all elements except applet, base, basefont,
bdo, br, frame, frameset, iframe, param, script.
classA class is a name under which multiple (X)HTML elements can be grouped for the purpose of styling using CSS or scripting using Javascript. A single element can be associated with multiple classes, each class name being separated by spaces.
Example: <p class="products floated">the quick brown fox jumps</p>
In the above example, the p belongs to two classes: products and floated.
The class attribute can be applied to all elements except base, basefont,
head, html, meta, param, script, style, title.
idAn id is a name assigned to a single element in an (X)HTML document for the purpose of styling
using CSS and scripting using Javascript and it is also used for creating fragments.
An element can have only one id. No two elements should have the same id value.
Example: <p id="tagline">the quick brown fox</p>
The id attribute can be applied to all elements except base, head, html, meta,
script, style, title.
langThe lang attribute identifies the language (human languages, not computer languages) of the text content and
attribute values of an element. The language is specified using a two-letter code specified in ISO 639-1.
The lang attribute helps screen readers to pronounce words correctly,
helps browsers to choose the correct fonts and the punctuation such as correct quotation marks, and helps search engines
to identify the language of a web page.
Example: <p>The French word for apple is <span lang="fr">pomme</span>.</p>
This attribute can be applied to any element except applet, base, basefont, br,
frame, frameset, iframe, param, script.
This attribute is inherited by child elements. The lang attribute is often applied
to the html element to specify the language of the document.
xml:langThis attribute is similar to the lang attribute, but is used only in XHTML documents.
Example: <p xml:lang="fr">Bonjour! Comment allez-vous?</p>
styleThe style attribute is used to apply CSS a rule to an element. The value of the
style attribute is one or more CSS declarations separated by semicolons and, optionally, spaces. Curly
brace limiters ({ and }) are not allowed. It cannot contain CSS selectors.
The CSS declarations in the style attribute have the highest specificity and are known as inline styles.
Example: <p style="background-color:navajowhite;color:indianred">the quick brown fox</p>
The style attribute can be applied to all elements except base, basefont,
head, html, meta, param, script,
style, title.
titleThe title attribute contains additional information about an element. If the element
is displayed, browsers display the value of the title attribute as a tool tip when the mouse hovers over it.
Example: <p><img src="photo1.jpg" alt="Photo of the Himalayas"></p>
The title attribute can be applied to all elements except
base, basefont, head, html,
meta, param, script, title.
The <a> element defines an anchor. It is
used for two purposes: to create a hyperlink and to create a fragment. A hyperlink is a clickable
area that when clicked, will take the user to another document or to a particular element in the same document.
The <a> element is an inline element, therefore it must have a block element as an ancestor.
It can contain text or child inline elements. Therefore, text, images, inline elements, and line breaks can be made hyperlinks.
The href attribute of the <a> element
contains the destination of the hyperlink. The destination can be another webpage or file,
or it can be a fragment in the same or a different page.
Below is an example of a hyperlink to an HTML document.
Example 1: <a href="about.html">About Us</a>
Below is an example of an image hyperlink.
Example 2: <a href="large.jpg"><img src="small.jpg" alt="an image"></a>
A fragment is an element in a document that has been labelled using the name
or the id attribute.
The W3C HTML 4.01 specification for links states "Destination anchors
in HTML documents may be specified either by the a element (naming it with the name attribute), or by any other element
(naming with the id attribute)". The name
and id specification for XHTML 1.0 states "XHTML 1.0 documents MUST use the id
attribute when defining fragment identifiers".
Therefore, the name attribute should never be used in XHTML 1.0 documents (except in form control elements where they are allowed). In
HTML 4.01 documents, either the name or the id attribute
can be used to specify fragments. To conclude, it is best to use only the id
attribute irrespective of document type (HTML or XHTML).
Example 3: <p name="product_1">The five boxing wizards jump quickly.</p>
Example 4: <p id="product_1">The five boxing wizards jump quickly.</p>
The first example shows a fragment in an HTML 4.01 document. The second example shows
the same fragment in an XHTML 1.0 or HTML 4.01 document, created using the id attribute.
In both cases, the fragment can be referenced from within the same document by a hyperlink as shown in the example below.
Example 5: <a href="#product_1">Go to Product 1</a>
The fragment shown in Example 3 and Example 4 can be accessed from another document by including the filename followed by the hash symbol and fragment name, as shown below.
Example 6: <a href="products.html#product_1">Go to Product 1</a>
The id value must begin with a letter and can contain numbers, hyphens, underscores, colons and periods. An id must be unique in a page.
The a element can have one title attribute that
specifies a description of the hyperlink. It is displayed as a tooltip when the mouse moves over the link.
Transitional DTD's allow the a tag to have the target attribute. With this attribute, you can specify the name of the window in which the link should open.
Example 7: <a href="news.html" title="news.html" target="stuff">
This will cause news.html to open in a new window. This window will have the internal name "stuff". If a window with the internal name "stuff" is already open, then news.html will open in it.
The target attribute is also useful in frame documents. Using this attribute links in one frame can open in another.
Special Targets
There are four special target values - _blank , _self , _parent and _top .
_blank
This target causes the linked document to always open in a new window. The new window will not have an internal name.
_self
This target causes the linked document to always load in the same window or frame as the link. This is the default behavior of links. This target value is useful to override the target specified in the base tag of the document. _parent
This causes the linked document to open in the parent of the document that contains the link. This is useful when using iframes. The document in the iframe can have links that when clicked, cause the linked document to open in the entire window rather than in the frame.
_top
This causes the linked document to open in the topmost frame in the hierarchy. In a framed document, it is useful to include this attribute in all links that lead to other websites. This prevents outside websites from loading within the same frameset.
Every (X)HTML document must have a Document Type Declaration, html as the root element, head and body as the child elements, and title as the child element of head. In XHTML documents, the html element must have the attribute xmlns and xml:lang and lang.
Example 1: <!DOCTYPE HTML "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>some title</title>
</head>
<body>
body content
</body>
</html>
Example 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>some title</title>
</head>
<body>
body content
</body>
</html>
The lang attribute's value specifies the language of the content of the body
tag. This attribute can also be used on other elements. The xml:lang attribute has the same function
as lang, but it is used only in XHTML documents. The value of these attributes is a two-letter code specified
in ISO 639-1 .
A webpage can also include a meta tag that specifies the character encoding of the page.
Example: <meta http-equiv="content-type" content="text/html; charset=utf-8">
The http-equiv attribute is used by HTTP servers to gather information for HTTP response headers.
Therefore, in the above example, the HTTP response header will have content-type: text/html; charset=utf-8
The example below includes a meta tag that specifies the HTTP response header.
Example 3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><i>some title</i></title>
</head>
<body>
<i>body content</i>
</body>
</html>
A Document Type Declaration, or DOCTYPE, is an instruction that associates a particular SGML (HTML) or XML (XHTML) document with a Document Type Definition (DTD). (Source Wikipedia)
Example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The general syntax of Document Type Declaration of (X)HTML documents is:
<!DOCTYPE root-element [SYSTEM OR PUBLIC FPI] "uri">
In web pages the root element is always html. The keywords SYSTEM or PUBLIC indicate whether the DTD is stored in a private computer or a public one. If public, then the keyword is followed by a Formal Public Identifier (FPI). An FPI is a specially formatted string of text that uniquely identifies the DTD. If the SYSTEM keyword is chosen, an FPI is not necessary. The FPI in the above example is "//W3C//DTD HTML 4.01//EN". And the last item found in (X)HTML Document Type Declarations is the URI of the DTD. In the above example, it is "http://www.w3.org/TR/html4/strict.dtd"
A Document Type Definition (DTD) is a set of markup declarations that define a document type for SGML-family markup languages (SGML, XML, HTML). Source: Wikipedia)
A DTD defines what elements are in the document, the attributes the elements can have, the contents of the elements etc.
These are the current Document Type Declarations used in (X)HTML pages:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><!DOCTYPE HTML>The root element (HTML) in the declaration can be lower case or upper case for HTML 4.01.
HTML stands for HyperText Markup Language. It is a language that provides a semantic description (meaning) for the content of a document. It also specifies a structure for the document in the form of a hierarchy of elements.
Hypertext is text displayed on a computer or other electronic device with references (hyperlinks) to other text that the reader can immediately access, usually by a mouse click or keypress sequence. (Source: Wikipedia)
A markup language is a modern system for annotating a text in a way that is syntactically distinguishable from that text. (Source: Wikipedia)
XHTML stands for Extensible HyperText Markup Language. It is "a reformulation of the three HTML 4 document types as applications of XML 1.0". (Source: W3C)
XHTML provides the following benefits:
xmlns attribute.CSS stands for Cascading Style Sheets.
CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of HTML and XHTML pages. A style sheet language is a computer language used to describe the presentation of structured documents. (source: Wikipedia)
