8 Extra Markup

XX Specifying different versions of HTML XX Identifying and grouping elements XX Comments, meta information and iframes At this point, we have covered the main tags that fit nicely into groups and sections.

In this chapter, we will focus on some helpful topics that are not easily grouped together. You will learn about:

●● The different versions of HTML and how to indicate which version you are using

●● How to add comments to your code

●● Global attributes, which are attributes that can be used on any element, including the class and id attributes

●● Elements that are used to group together parts of the page where no other element is suitable

●● How to embed a page within a page using iframes

●● How to add information about the web page using the element

●● Adding characters such as angled brackets and copyright symbols

177 EXTRA MARKUP EXTRA MARKUP 178 The Evolution of HTML

Since the web was first created, there have been several different versions of HTML.

HTML 4 XHTML 1.0 Released 1997 Released 2000

Each new version was designed With the exception of a few In 1998, a language called XML to be an improvement on the elements added in HTML5 was published. Its purpose last (with new elements and (which have been highlighted), was to allow people to write attributes added and older code the elements you have seen in new markup languages. Since removed). this book were all available in HTML was the most widely used HTML 4. markup language around, it was There have also been several decided that HTML 4 should be versions of each browser used to Although HTML 4 had some reformulated to follow the rules view web pages, each of which presentational elements to of XML and it was renamed implements new code. Not all control the appearance of pages, XHTML. This meant that web users, however, have the authors are not recommended to authors had to follow some new, latest browsers installed on use them any more. (Examples more strict rules about writing their computers, which means include the

element markup. For example: that not everyone will be able to for centering content on a view all of the latest features and page, for controlling ●● Every element needed a markup. the appearance of text, and closing (except for empty to put a line through elements such as ). Where you should be the text — all of these can be ●● Attribute names had to be in particularly aware of browsers achieved with CSS instead.) lowercase. not supporting certain features, ●● All attributes required a value, I have made a note of this (as and all values were to be you have seen with some of the placed in double quotes. HTML5 elements introduced in ●● Deprecated elements should the Forms chapter — and as you no longer be used. will see in the CSS chapters). ●● Every element that was opened inside another element should be closed inside that same element.

179 EXTRA MARKUP HTML5 Released 2000

The examples in this book all The transitional version of In HTML5, web page authors do follow these strict rules of XML. XHTML was created because not need to close all tags, and it allowed authors to continue new elements and attributes will One of the key benefits of this to follow older practices (with a be introduced. At the time of change was that XHTML works less strict syntax) and use some writing, the HTML5 specification seamlessly with other programs of the elements and attributes had not been completed, but that are written to create and that were going to be removed the major browser makers had process XML documents. from future versions of HTML. started to implement many of the new features, and web page It could also be used with other There was also a third version authors were rapidly adopting data formats such as Scalable of XHTML 1.0 called XHTML the new markup. Vector Graphics (SVG) — a 1.0 Frameset, which allowed graphical language written in web page authors to partition Despite the fact that HTML5 XML, MathML (used to mark a browser window into several is not yet completed, you can up mathematical formulae), and "frames," each of which would safely take advantage of the CML (used to mark up chemical hold a different HTML page. new features of the language as formulae). These days, frames are very long as you endeavour to ensure rarely used and are being phased that users with older browsers In order to help web page out. will be able to view your pages authors move to this new syntax, (even though some of the extra two main flavors of XHTML 1.0 features will not be visible to were created: them). ●● Strict XHTML 1.0, where authors had to follow the rules to the letter ●● Transitional XHTML 1.0, where authors could still use presentational elements (such as

and ).

EXTRA MARKUP 180 DOCTYPEs

Because there have been HTML several versions of HTML, each HTML5 web page should begin with a DOCTYPE declaration to tell a browser which version of HTML HTML 4 the page is using (although We will therefore be including one in each example for the rest Transitional XHTML 1.0 of the book. page 316, the use of a DOCTYPE can also help the browser to Strict XHTML 1.0 render a page correctly. see pages that use the XHTML strict DOCTYPE start with XML Declaration 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.

181 EXTRA MARKUP Comments Ainrti HTcMleL

HTML chapter-08/comments-in-html.html

Current Exhibitions

If you want to add a comment

Olafur Eliasson

to your code that will not be visible in the user's browser, you can add the text between these

Olafur Eliasson was born in Copenhagen, Denmark characters: in 1967 to Icelandic parents.

He is known for sculptures and large-scale installation art employing elemental materials such as light, water, and air temperature to It is a good idea to add enhance the viewer's experience.

comments to your code because, no matter how familiar you back to it later (or if someone else needs to look at the code), comments will make it much easier to understand. Result Although comments are not visible to users in the main browser window, they can be viewed by anyone who looks at the source code behind the page.

On a long page you will often see comments used to indicate where sections of the page start or end, and to pass on notes to help anyone who is looking at the code understand it.

Comments can also be used around blocks of code to stop that code from being displayed in the browser. In the example on the left, the email link has been commented out.

EXTRA MARKUP 182 ID Attribute

Every HTML element can carry chapter-08/id-attribute.html HTML the id attribute. It is used to uniquely identify that element

Water and air. So very commonplace are these from other elements on the substances, they hardly attract attention - and page. Its value should start with yet they vouchsafe our very existence.

a letter or an underscore (not a

Every time I view the sea I feel number or any other character). a calming sense of security, as if visiting my It is important that no two ancestral home; I embark on a voyage of seeing. elements on the same page

have the same value for their id

Mystery of mysteries, water and air are right attributes (otherwise the value is there before us in the sea.

no longer unique).

As you will see when you come to look at CSS in the next Result section, giving an element a unique identity allows you to style it differently than any other instance of the same element on the page. For example, you might want to assign one paragraph within the page (perhaps a paragraph containing a pull quote) a different style than all of the other paragraphs. In the example on the right, the paragraph with the id attribute whose value is pullquote is made uppercase using CSS.

If you go on to learn about JavaScript (a language that allows you to add interactivity to your pages), id attributes can be used to allow the script to work with that particular element.

The id attribute is known as a global attribute because it can be used on any element.

183 EXTRA MARKUP Class AttributArticle

Every HTML element can HTML chapter-08/class-attribute.html also carry a class attribute.

For a one-year period from Sometimes, rather than uniquely November 2010, the Marugame Genichiro-Inokuma identifying one element within Museum of Contemporary Art (MIMOCA) will host a a document, you will want a cycle of four Hiroshi Sugimoto exhibitions.

way to identify several elements

Each will showcase works by the artist as being different from the thematically contextualized under the headings other elements on the page. "Science," "Architecture," "History" and For example, you might have "Religion" so as to present a comprehensive some paragraphs of text that panorama of the artist's oeuvre.

contain information that is more

Hours: 10:00 – 18:00 important than others and want (No admittance after 17:30)

to distinguish these elements, or you might want to differentiate between links that point to other pages on your own site and links Result that point to external sites.

To do this you can use the class attribute. Its value should describe the class it belongs to. In the example on the left, key paragraphs have a class attribute whose value is important.

The class attribute on any element can share the same value. So, in this example, the value of important could be used on headings and links, too.

By default, using these attributes In this example, CSS has been If you would like to indicate that does not affect the presentation applied to make elements with an element belongs to several of an element. It will only change a class attribute whose value classes, you can separate class their appearance if there is a CSS is important uppercase, and names with a space, as you can rule that indicates it should be elements with a class attribute see in the third paragraph in the displayed differently. whose value is admittance red. example above.

EXTRA MARKUP 184 Block Elements

Some elements will always HTML appear to start on a new line in chapter-08/block-elements.html the browser window. These are

Hiroshi Sugimoto

known as block level elements.

The dates for the ORIGIN OF ART exhibition are as follows:

  • Science: 21 Nov - 20 Feb 2010/11
  • Architecture: 6 Mar - 15 May 2011
  • History: 29 May - 21 Aug 2011
  • Religion: 28 Aug - 6 Nov 2011

Examples of block elements are

,

,

    , and
  • .

    Result

    185 EXTRA MARKUP Inline ElAemertintscle

    Some elements will always HTML chapter-08/inline-elements.html appear to continue on the Timed to a single revolution of the planet around same line as their neighbouring the sun at a 23.4 degrees tilt that plays out the elements. These are known as rhythm of the seasons, this Origins of Art inline elements. cycle is organized around four themes: science, architecture, history and religion.

    Examples of inline elements are , , , and .

    Result

    EXTRA MARKUP 186 Grouping Text & Elements In a Block

    chapter-08/grouping-block-elements.html HTML