Extra-Markup

DOCTYPES

Because there have been several versions of HTML, each web page should begin with a DOCTYPE declaration to tell a browser which version of HTML the page is using (although browsers usually display the page even if it is not included). We will therefore be including one in each example for the rest of the book.

As you will see when we come to look at CSS and its box model onpage 316, the use of a DOCTYPE can also help the browser to render a page correctly.

Because XHTML was written in XML, you will sometimes see pages that use the XHTML strict DOCTYPE start with the optional XML declaration. Where this is used, it should be the first thing in a document. There must be nothing before it, not even a space.

Doctypes

Comments in HTML

< !– –> (without space)

If you want to add a comment to your code that will not be visible in the user’s browser, you can add the text between these characters:

< !– comment goes here –> (without space)

Coment code Cmment result

ID Attribute

Every HTML element can carry the id attribute. It is used to uniquely identify that element from other elements on the page. Its value should start with a letter or an underscore (not a number or any other character). It is important that no two elements on the same page have the same value for their id attributes (otherwise the value is no longer unique).

Class Attribute

Every HTML element can also carry a class attribute. Sometimes, rather than uniquely identifying one element within a document, you will want a way to identify several elements as being different from the other elements on the page. For example, you might have some paragraphs of text that contain information that is more important than others and want to distinguish these elements, to do this you can use the class attribute.

class

Block Elements

Some elements will always appear to start on a new line in the browser window. These are known as block level elements.

Examples of block elements are < h1 >, < p >, < ul >, and < li >.

block

Inline Elements

Some elements will always appear to continue on the same line as their neighbouring elements. These are known as inline elements.

Examples of inline elements are < a >, < b >, < em >, and < img >.

inline

Grouping Text & Elements In a Block

< div >

The < div > element allows you to group a set of elements together in one block-level box. For example, you might create a < div > element to contain all of the elements for the header of your site (the logo and the navigation), or you might create a < div > element to contain comments from visitors.

div

Grouping Text & Elements Inline

< span >

The < span > element acts like an inline equivalent of the < div > element. It is used to either:

Contain a section of text where there is no other suitable element to differentiate it from its surrounding text.
Contain a number of inline elements.
The most common reason why people use < span > elements is so that they can control the appearance of the content of these elements using CSS.

IFrames

< iframe >

An iframe is like a little window that has been cut into your page — and in that window you can see another page. The term iframe is an abbreviation of inline frame.

One common use of iframes (that you may have seen on various websites) is to embed a Google Map into a page. The content of the iframe can be any html page (either located on the same server or anywhere else on the web).

An iframe is created using the < iframe > element. There are a few attributes that you will need to know to use it:

src

The src attribute specifies the URL of the page to show in the frame.

height

The height attribute specifies the height of the iframe in pixels.

width

The width attribute specifies the width of the iframe in pixels.

scrolling

The scrolling attribute will not be supported in HTML5. In HTML 4 and XHTML, it indicates whether the iframe should have scrollbars or not. This is important if the page inside the iframe is larger than the space you have allowed for it (using the height and width attributes). Scrollbars allow the user to move around the frame to see more content. It can take one of three values: yes (to show scrollbars), no (to hide scrollbars) and auto (to show them only if needed).

frameborder

The frameborder attribute will not be supported in HTML5. In HTML 4 and XHTML, it indicates whether the frame should have a border or not. A value of 0 indicates that no border should be shown. A value of 1 indicates that a border should be shown.

seamless

In HTML5, a new attribute called seamless can be applied to an iframe where scrollbars are not desired. The seamless attribute (like some other new HTML5 attributes) does not need a value, but you will often see authors give it a value of seamless. Older browsers do not support the seamless attribute.

Information About Your Pages

< meta >

The < meta > element lives inside the < head > element and contains information about that web page.

It is not visible to users but fulfills a number of purposes such as telling search engines about your page, who created it, and whether or not it is time sensitive. (If the page is time sensitive, it can be set to expire.)

The < meta > element is an empty element so it does not have a closing tag. It uses attributes to carry the information.

The most common attributes are the name and content attributes, which tend to be used together. These attributes specify properties of the entire page. The value of the name attribute is the property you are setting, and the value of the content attribute is the value that you want to give to this property.

The value of the name attribute can be anything you want it to be. Some defined values for this attribute that are commonly used are:

description

This contains a description of the page. This description is commonly used by search engines to understand what the page is about and should be a maximum of 155 characters. Sometimes it is also displayed in search engine results.

keywords

This contains a list of commaseparated words that a user might search on to find the page. In practice, this no longer has any noticeable effect on how search engines index your site.

robots

This indicates whether search engines should add this page to their search results or not. A value of noindex can be used if this page should not be added. A value of nofollow can be used if search engines should add this page in their results but not any pages that it links to.

The element also uses the http-equiv and content attributes in pairs. In our example, you can see three instances of the http-equiv attribute. Each one has a different purpose:

author

This defines the author of the web page.

pragma

This prevents the browser from caching the page. (That is, storing it locally to save time downloading it on subsequent visits.)

expires

Because browsers often cache the content of a page, the expires option can be used to indicate when the page should expire (and no longer be cached). Note that the date must be specified in the format shown.

Escape Characters

There are some characters that are used in and reserved by HTML code. (For example, the left and right angled brackets.)

Extra-Markup

DOCTYPES

As you will see when we come to look at CSS and its box model onpage 316, the use of a DOCTYPE can also help the browser to render a page correctly.

Because XHTML was written in XML, you will sometimes see pages that use the XHTML strict DOCTYPE start with the optional XML declaration. Where this is used, it should be the first thing in a document. There must be nothing before it, not even a space.

Comments in HTML

< !– –> (without space)

If you want to add a comment to your code that will not be visible in the user’s browser, you can add the text between these characters:

< !– comment goes here –> (without space)

ID Attribute

Class Attribute

Block Elements

Some elements will always appear to start on a new line in the browser window. These are known as block level elements.

Examples of block elements are < h1 >, < p >, < ul >, and < li >.

Inline Elements

Some elements will always appear to continue on the same line as their neighbouring elements. These are known as inline elements.

Examples of inline elements are < a >, < b >, < em >, and < img >.

Grouping Text & Elements In a Block

< div >

Grouping Text & Elements Inline

< span >

The < span > element acts like an inline equivalent of the < div > element. It is used to either:

The most common reason why people use < span > elements is so that they can control the appearance of the content of these elements using CSS.

IFrames

< iframe >

An iframe is like a little window that has been cut into your page — and in that window you can see another page. The term iframe is an abbreviation of inline frame.

One common use of iframes (that you may have seen on various websites) is to embed a Google Map into a page. The content of the iframe can be any html page (either located on the same server or anywhere else on the web).

An iframe is created using the < iframe > element. There are a few attributes that you will need to know to use it:

src

The src attribute specifies the URL of the page to show in the frame.

height

The height attribute specifies the height of the iframe in pixels.

width

The width attribute specifies the width of the iframe in pixels.

scrolling

frameborder

The frameborder attribute will not be supported in HTML5. In HTML 4 and XHTML, it indicates whether the frame should have a border or not. A value of 0 indicates that no border should be shown. A value of 1 indicates that a border should be shown.

seamless

Information About Your Pages

< meta >

The < meta > element lives inside the < head > element and contains information about that web page.

It is not visible to users but fulfills a number of purposes such as telling search engines about your page, who created it, and whether or not it is time sensitive. (If the page is time sensitive, it can be set to expire.)

The < meta > element is an empty element so it does not have a closing tag. It uses attributes to carry the information.

The value of the name attribute can be anything you want it to be. Some defined values for this attribute that are commonly used are:

description

This contains a description of the page. This description is commonly used by search engines to understand what the page is about and should be a maximum of 155 characters. Sometimes it is also displayed in search engine results.

keywords

This contains a list of commaseparated words that a user might search on to find the page. In practice, this no longer has any noticeable effect on how search engines index your site.

robots

This indicates whether search engines should add this page to their search results or not. A value of noindex can be used if this page should not be added. A value of nofollow can be used if search engines should add this page in their results but not any pages that it links to.

The element also uses the http-equiv and content attributes in pairs. In our example, you can see three instances of the http-equiv attribute. Each one has a different purpose:

author

This defines the author of the web page.

pragma

This prevents the browser from caching the page. (That is, storing it locally to save time downloading it on subsequent visits.)

expires

Because browsers often cache the content of a page, the expires option can be used to indicate when the page should expire (and no longer be cached). Note that the date must be specified in the format shown.

Escape Characters

There are some characters that are used in and reserved by HTML code. (For example, the left and right angled brackets.)