HTML Structure - Document
In the First HTML Webpage lesson the web browser inferred some HTML tags as we didn't enter any. That was the only time during these tutorials we will deviate from W3C standards. From now on everything will be done as per 'best practice'. It's very easy to slip into bad habits, so let's start as we mean to go on, doing things the right way to meet the standards. The barebones HTML file required follows with an explanation of the required tags.
So Let's Take a Look at Basic HTML Structure
Updating Our First Webpage
Lets update our first web page!
The code below is indented in the time honoured tradition of programming for readability.
Copy and paste the following code into the reopened file, overwriting our single line of text.
<!DOCTYPE html> <!-- Basic Structure of HTML document --> <html lang="en"> <head> <title> HTML Structure - Document </title> </head> <body> Hello World! </body> </html>
View Page in Web Browser
Either navigate to the location you saved the
helloworld.htmlfile to and double click the file. This will take you to the page in your default web browser, or from your web browser click File --> Open File and navigate to the file and open it.
After doing either of these you should see a similar webpage in your browser to the following screenshot:
The file is exactly the same as when we just typed in:
Or is it? Did you notice the subtle difference? Its in the windows title bar at the top, the rest of the window appears unchanged. The information we typed in the <title> tag has appeared there. The original follows:
The <title> tag is the first HTML tag we have seen that changes the appearance of a web page, all the other tags we have seen so far are for the structure of the page and don't affect the look of the web page.
Further Explanation for Some of the Tags Used
The doctype Element
The <!DOCTYPE> doctype Element lets the browser know which version of HTML/XHTML we are using.
The <!DOCTYPE> doctype Element flies in the face of convention; the tag must be entered in uppercase and has no closing tag. So what's it all about Alfie? Well, although the <!DOCTYPE> isn't technically a HTML tag you should put one at the start of every HTML page you write. This tag goes before the opening <html> as the very first thing you put into every file.
The <!DOCTYPE> tells the web browser which version of HTML/XHTML you're using and with older versions of HTML also points to a Document Type Defintion (DTD) file. The DTD is an XML document that holds valid values for all tags, their attributes and values, for a particular type of HTML/XHTML.
If you don't use the <!DOCTYPE> doctype Element or misspell it, most browsers may enter 'quirks mode' and try to interpret your code as it sees fit. This can lead to your pages not being displayed correctly and other, well quirkier issues that may have you running to change code when its all down to a missing <!DOCTYPE>.
The bottom line is: use the <!DOCTYPE> to let the browser know which version of HTML/XHTML you're using and which rules to apply.
The comment Element
The <!--...--> tag allows us to comment our code.
Just replace the ellipses with the comments you want to enter. The tag can be used multiples times in a HTML document.
Lesson 3 Complete
Well that's the basic structure of a HTML document out of the way and we have also started to learn a few HTML tags that give us some structure and information about our web pages.
In the next lesson we start to add some meat to our web pages using some of the text tags available in HTML.
The <!DOCTYPE> doctype Element
The <!--...--> comment tag
The <html> document root element tag
The <head> document head tag
The <title> document title tag
The <body> document body tag