8 Extra Markup X Specifying different versions of HTML X Identifying and grouping elements X 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 <meta> 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 <center> element markup. For example: that not everyone will be able to for centering content on a view all of the latest features and page, <font> for controlling ● Every element needed a markup. the appearance of text, and closing tag (except for empty <strike> to put a line through elements such as <img />). 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 <center> and <font>). EXTRA MARKUP 180 doCtYpEs Because there have been HTML several versions of HTML, each HTML5 web page should begin with a <!DOCTYPE html> DOCTYPE declaration to tell a browser which version of HTML HTML 4 the page is using (although <!DOCTYPE html PUBLIC browsers usually display the "-//W3C//DTD HTML 4.01 Transitional//EN" page even if it is not included). "http://www.w3.org/TR/html4/loose.dtd"> We will therefore be including one in each example for the rest Transitional XHTML 1.0 of the book. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" As you will see when we come to "http://www.w3.org/TR/xhtml1/DTD/ look at CSS and its box model on xhtml1-transitional.dtd"> page 316, the use of a DOCTYPE can also help the browser to Strict XHTML 1.0 render a page correctly. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Because XHTML was written "http://www.w3.org/TR/xhtml1/DTD/ in XML, you will sometimes xhtml1-strict.dtd"> see pages that use the XHTML strict DOCTYPE start with XML Declaration the optional XML declaration. <?xml version="1.0" ?> 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 <!-- --> <!-- start of introduction --> <h1>Current Exhibitions</h1> If you want to add a comment <h2>Olafur Eliasson</h2> to your code that will not be <!-- end of introduction --> visible in the user's browser, you <!-- start of main text --> can add the text between these <p>Olafur Eliasson was born in Copenhagen, Denmark characters: in 1967 to Icelandic parents.</p> <p>He is known for sculptures and large-scale <!-- comment goes here --> 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.</p> comments to your code because, <!-- end of main text --> no matter how familiar you <!-- are with the page at the time <a href="mailto:[email protected]">Contact</a> of writing it, when you come --> 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 <p>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.</p> a letter or an underscore (not a <p id="pullquote">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 </p> have the same value for their id <p>Mystery of mysteries, water and air are right attributes (otherwise the value is there before us in the sea.</p> 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.