Basic Page Structure

Exploring An HTML Doc.

So in Internet Explorer for example it has the developer tools. And in Firefox we have Firebug. And in Webkit browsers and in Chrome, we have what's known as the Webkit Inspector. So they allow us to sort of get a window into how documents are structured. Right click a web page and choose inspect element. It opens up the web kit inspector and this gives me access to the actual HTML itself. You can see I can begin to expand this.

Doctype Declarations

So, what the doctype is supposed to do is tell the browser or user agent which version of HTML that you'll be using so it knows which version of the syntax to use in parsing. You need to have a doctype declaration and you want the doctype to reflect the version of HTML that you'll be writing.

The Document Head

Directly after the opening HTML tag, you're going to find a document's head. Now the head element is where you'll place information about the document, references to things like external scripts and styles, and additional instructions to the browser about how the document should be rendered. Before you add the head of your document, you first have to add the HTML tag.

The Document Body

While the head of your document stores functional information that is largely invisible, the body is where all of your pages visible content is going to go. the first thing we want to do is add body tag. The body tag is not nested inside of the head tag. It is a sibling of the head tag. Meaning it is on equal level with it. So just after the head tag, open up a body tag, then close the body tag.

Understanding Content Models

Almost every element in HTML belongs to at least one content model. These content models help user agents know what type of content to expect within an element. And they control certain aspects of syntax, such as which elements can nest within other elements. Prior to HTML5, there were basically only two content types, block level and inline.

Example Code

        <!DOCTYPE HTML>
            <html lang="en">
            <head>
                <meta charset="utf-8">
                <meta name="description" content="A page for exploring basic HTML documents">
                <title>Basic HTML document</title>
            </head>
                <body>
                    <h1>Page content</h1>
                    <p>Page content</p>
                </body>
                </html>