Select Page

Learning the basic html structure

Diving into the “minimal structure” of an HTML document

Today we will look at the basic HTML structure.

We will be diving into the “minimal structure” of an HTML document using HTML5 as reference. If you’re new to HTML, this is the basic starting point for every “hand-coded” website. We will be going through the presented code line by line to make you comfortable with what we’re looking at.

If you’re familiar with HTML already this might not be all to interesting for you.

But maybe you’re interested in the history of markup or need a guide to HTML5. Be sure to go and check out Jeremy Keith’s “HTML5 for Web Designers” from A Book Apart. It’s even available as online version.

 

Ok, let’s get started….

 

Learning the basic html structure

Below is an illustration of the basic building blocks of every HTML document.

 

Basic-HTML

 

Now, let’s check out how this looks like as code.

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="UTF-8" />

	<title>HTML basic structure</title>
	<meta name="author" content="Jaime Butler" />
	<meta name="description" content="This is the basic structure of a HTML document" />

	<link href="style.css" rel="stylesheet" />

<head>
<body>
<!-- CONTENT -->
</body>
</html>

so, this is the minimal structure of a HTML document. Let’s go though it line by line.

 

The Document Type Declaration

Every HTML document starts with it’s declaration. The DOCTYPE (first line) is traditionally used to specify which version of HTML the markup (code) is written in.

The doctype isn’t an HTML tag. It’s more of an instruction telling the web browser “Hey, I’m HTML and written in version XXX”. Since HTML5 is not based on SGML, it doesn’t need a reference to a DTD (Document Type Definition) making the doctype dead simple for HTML5.

Don’t get your head fuzzy about this “DOCTYPE” thing.

As quoted from “HTML5 for Web Designers” – Jeremy Keith:

“The truth is that doctypes aren’t even important. Let’s say you serve up a document with a doctype for HTML 4.01. If that document includes an element from another specification, such as HTML 3.2 or HTML5, a browser will still render that part of the document. Browsers support features, not doctypes.

Document Type Declarations were intended for validators, not browsers. The only time that a browser pays any attention to a doctype is when it is performing “doctype switching”— a clever little hack that switches rendering between quirks mode and standards mode depending on the presence of a decent doctype.

The minimum information required to ensure that a browser renders using standards mode is the HTML5 doctype. In fact, that’s the only reason to include the doctype at all. An HTML document written without the HTML5 doctype can still be valid HTML5.”

So just use:

<!DOCTYPE html>

And you’ll be fine.

 

The HTML tag

The <html> tag is the “root” of an HTML document and serves as container for all other HTML elements. Remember me saying that the DOCTYPE wasn’t an HTML tag? Here’s why it’s not within the <html> tag.

You will see the <html> tag wrapped around all the other HTML elements with it’s closing tag </html> at the very bottom of our HTML document.

Wait, what’s that “lang=”en”” thing in the <html> tag?

Well, simple. You’re specifying the language in which your content is written. If you’re writing a website where the content is mainly written in German, your language attribute would look like this:

<html lang="de">

 

The HEAD tag

The <head> tag serves as container for all head elements and contains general information about the HTML document, and also link and script references.

The use of the <head> tag is required in every HTML document and it must be placed, starting just after the opening <html> tag and ending just before the opening <body> tag.

 

The META tag CHARSET

The <head> tag can contain several elements most of them being optional. One of them is the <meta> tag.

The <meta> tag contains structured information about the document. The metadata within the meta tags are not displayed, they will be used by machines like search engines to gain information about your document.

A <meta> tag can have several attributes. Let’s have a look at what we’ve used in our document.

 

The charset attribute

With the charset we specify the character encoding for our HTML document. The common value is the character encoding for Unicode – UTF-8.

So we are telling the browser how to encode our characters with:

<meta charset="UTF-8" />

 

The name attribute

The name attribute defines the name for the information within the content attribute. We are using the values “author” and “description”. Within the second attribute “content” we set the content according to the name value we are using.

<meta name="author" content="Jaime Butler" /> // Gives information about the author
<meta name="description" content="This is the basic structure of a HTML document" />//gives information about the content

 

The Title

With being one of the only required tags within the <head> tag, the <title> tag is…well, the title of our document.

It will be used: 

  • in the toolbar of the browser
  • as title when adding the page to favorites and
  • as page title when displayed in search-engine results.
<title>HTML basic structure</title>

 

The Link

The last tag we have in our head is the <link> tag. The <link> tag is used to “link” external resources to our HTML document. It’s main purpose is to link to an external style sheet (CSS).

We have two main attributes in this <link> tag:

  • rel=”stylesheet”
  • href=”XXX.css”

in the “rel” attribute we declare what the link relates to (a stylesheet). In the “href” we tell the document where this external stylesheet is (path to the css file).

“Href” stands for “Hyperlink Reference” and is also used in <a> tag.

 

The Body

So, we’re near the end of our code. The last one is the <body> tag.

The <body> tag (like it’s name would suggest) is the body of our HTML document. It contains all elements that build the content of our HTML document.

So everything that is WITHIN the <body> tag will be display as content in our browser.

 

Wrapping things up

There was quite a bit to cover for only these few lines of code.

But if you understand the basic structure of the HTML document, you will be able to create clean, compatible and SEO friendly code for your websites.

You might be thinking “…and where do I go from here…”.

Faire enough; we might have a clean structure of an HTML document. But eventually we don’t have any elements to present our content within the body.

Going through all the bits and pieces that can build the “body” of an HTML document is clearly beyond the scope of this article….but…

I might be following up with some small ideas (or tutorials) on HTML and CSS.

Meanwhile go and check out my “Learning the basics” idea. It will provide you with some great starting points and resources to keep you going.

 

have any questions? drop me a line…. or leave a comment below.

Jaime

Submit a Comment

Your email address will not be published. Required fields are marked *

thirteen − 3 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pin It on Pinterest