Doctypes and Setting Up an HTML File

The <!DOCTYPE> declaration is very important to include at the very top of your HTML document when setting up a new page.  Everyone who has any experience designing webpages has seen this declaration before but not many know what it means or what the purpose of setting the <!DOCTYPE>  is.

This declaration is very important to your HTML page as it lets the browser window know what version of HTML that the page is written in. When declaring a doctype for a page that you plan on using HTML5 in, there is only one option:

<!DOCTYPE html>

If you set your doctype as above, you are telling the browser window to load the most recent version of HTML into the browser window.

If you are planning on writing your HTML page using only HTML4 tags, then there are three different doctype declarations that you can choose from.

Strict 4.01 Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

If you set your document as strict, you are letting the browser know that you are not going to use any presentational tags ( <b> ,  <i> , <hr> , styling tags ) or deprecated tags ( tags that are being phased out and/or have been replaced by newer, more efficient ways of completing the same task. )

Transitional 4.01 Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

If you set your doctype as Transitional, or ‘LOOSE’, than you are telling the browser that loads your HTML page that you are going to be using presentational tags and/or deprecated tags. This is the easiest doctype to use as a beginning web developer because it allows for the largest range of code to be input.

** Note: Try to avoid using old mark-up tags (deprecated tags) as this is not good practice in web development and as browsers update, your outdated mark-up will no longer be supported and your layout will fall apart.

Frameset 4.01 Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/frameset.dtd">

A doctype set as frameset will allow the developer to input <frameset> tags into their document.

** Note: This is an outdated deprecated tag and is no longer supported in HTML5. Beware of using this doctype as browser windows will most likely not support the mark-up in the near future.

Setting Up an HTML Document

Now that we have covered Doctypes, I will quickly just layout the basic setup of an HTML page. You can take exactly what I have written out here if you would like, just fill in the areas that I specify with the content of your website.

I will be using the HTML5 doctype as that will load the most recent version in the browser window.

<! DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> <!-- TEXT YOU WANT TO APPEAR IN THE TAB ON YOUR BROWSER --> </TITLE>

<!-- INSERT CSS, EXTERNAL STYLESHEET LINKS, META TAGS, AND JAVASCRIPT/JQUERY HERE -->

</HEAD>
<BODY>

<!-- INSERT PAGE CONTENT HERE -->
<!-- UNDER CONTENT, FOR FASTER PAGELOAD, JAVASCRIPT/JQUERY MAY BE PUT HERE -->
</BODY>
</HTML>

Above is your basic HTML document page setup. Notice there is a closing tag for each tag that we open ( With the exception of our DOCTYPE )

**Any text wrapped in <!– TEXT –> is commented out. This means the browser will not render this text in the page, but it will appear in the source code.

Thanks for stopping by and good luck with your projects!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s