[an error occurred while processing this directive]
Go to Bottom Nav - April 21, 2018 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

(This page is very similar to the other Skeleton page, it speaks more specifically to xHTML.)

Skeletons Aren't Just for Halloween!

Web browsers read the text files that are the code for web pages from left to right and top to bottom. It is helpful to remember that when you code.

The basic HTML skeleton is comprised of the four pairs of tags listed in order below.

<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>

Every page on the web contains this skeleton (or should). From this skeleton we hang all the other parts, seen and unseen, that comprise a web page. You could also think of this skeleton as the framework for a house or building.

The Pairs

It is helpful to think of HTML tag pairs as containers; each opening and closing tag contains and effects whatever text or code that is between them.

<html></html> - Contains the entire page. Has two sub containers, head and body. Lets the browser know when the html code starts and ends.

<head></head> - Contains page information invisible to the user except the title. Can contain "meta" tags which supply additional information about the page to search engines; links to javascript or cascading style sheet files; scripts or CSS code; and other instructions to the browser.

<title></title> - Contains the text you want to appear in the title bar at the very top of the browser window. The title pair contains the only information visible to the user in the head section.

<body></body> - Contains the page information that is visible to the user. The text you are reading now is in the "body" of the web page.

The HTML skeleton is worth committing to memory. You will use it for every page that you create.

The HTML5 Skeleton

The HTML skeleton needs a few additions to make it into a standards conforming HTML5 document and thus one that will validate.

DOCTYPE

The DOCTYPE declaration is the first line of code at the beginning of your document that informs the browser just what flavor of HTML you are using. Without the DOCTYPE, your browser will render the page in "quirks" mode and give you its best guess of how you meant to display your page.

The HTML5 DOCTYPE has been streamlined, lucky for us! It only has to tell the browser that the page uses HTML and does not worry about any specific DTDs (Document Type Declarations). It looks like:

<!DOCTYPE html>

<html> Tag

The opening <html> tag in an HTML5 document is a slightly more involved than the HTML 4.0.1 tag and much simpler than the xHTML one. It looks like this:
<html lang="en">

The lang (language) attribute is not required but it is the polite thing to do for your user and their browser.

Character Set

The character set declaration is contained within a meta tag; it and other meta tags live in the head section of the XHTML document. It lets the browser know which character set to use when displaying text on the page. In general, use:
<meta charset="utf-8">

There are other character set encodings, utf-8 is the recommended one currently. Also, certain browsers need the character set just after the opening head tag.

The Complete HTML5 Skeleton

And here is what the complete HTML5 skeleton looks like:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu