Before we get into the body elements, let me deal with what doesn't show up in the webpage itself. I'll deal with the following elements:
*I know I've already mentioned these, but I am going to recap them and give some more information about them, such as what attributes are allowable here. Several of them allow the core and language attributes, others do not. The core and language attributes are rare enough amongst the head elements that I will mention them with each.
A comment doesn't show up on the screen at all, nor does it affect your webpage in any way. In fact, the only way to see it is to look at the code itself. Comments are used for two things:
A comment always starts with the character sequence
and always ends with the character sequence <!--
. There should always. be a space after the opening double dash and before the closing double dash. Double dashes between the opening and closing character sequence should be avoided lest the browser misinterpret that as the end of the comment. -->
Comments can go pretty much anywhere—even before the Doctype.
Element Name: html
As stated before, the html element is the root element of everything, with only the Doctype (and XML declaration, if you're using XHTML) existing outside of it.
It can also have only two child elements: head and body, in that order.
xmlns (XHTML only)http://www.w3.org/1999/xhtml.
lang, dirlang attribute but will work with any XML-based language.Element Name: head
The head does the thinking for the webpage. It contains information about the webpage that both the browser and the server can use.
lang, dirElement Name: meta
This element's a bit tricky to explain, so I'll use a few comparisons. A metamovie is a movie about movies. A metabook is a book about books. Therefore, metadata is data about data. In this context, it's information about your webpage. You can have as many of these elements as you like.
This is an empty element. It has no end tag.
lang, dirhttp-equiv and name attributes name the properties of a webpage, the content attribute gives those properties their value.If you recall the character encoding warning I told you about in Your First Webpage, here's how to fix it: include a meta element in the head. The meta element should have a http-equiv attribute specifying the content type, and a content attribute saying that the page is a text page to be interpreted as HTML and that the character set is UTF-8. This can be set in one or two elements (usually one):
Note that I omitted the charset
information from the XHTML document's meta elements—that information is already contained in the XML declaration (which you should be using with XHTML).
Element Name: link
The link element tells the browser that the current document is related to other documents. How the browser handles these links is up to the browser. You can have as many of these elements as you like.
This is an empty element. It has no end tag.
lang, dirclass, id, style, titletext/html(or whatever you're serving your XHTML files as).
relationship—more precisely, how is that document related to this one? Possibilities include:
rel attribute, but in reverse: how is this page related to that? In practice, it has virtually no effect.Element Name: base
Remember in the hyperlinks chapter I talked about relative URIs? This element overrides the normal way relative URIs are calculated by setting a default URI (either relative or absolute) to work with. Because only URIs that come after this element are affected, it's important to have this before any of your link elements.
This is an empty element. It has no end tag. I mentioned that there were only five single-use element in (X)HTML. Four of them are, of course, html, title, head, and body. The base element is the fifth.
base element's only attribute.Element Name: title
Again, the title element contains the information contained in the browser title bar. If you use markup in the title element's contents, it will show up as plain text rather than having any effect whatsoëver. This one of the few non-empty elements that have no child elements.
lang, dirTo display what I've been talking about, below is an example head element with its child elements.
Element Name: body
The body element contains all the information that appears in the window. As the head does the thinking, the body does the doing for the webpage.
lang, dirclass, id, style, titleUnsurprisingly, the body element has the widest range descendant elements, and the largest group of these are the inline elements.
For the sake of simplicity, further code examples will not display the html element, head element and its children, or the body element. However, what code is displayed in the future is intended to be nested inside the body element: