Structure of HTML Document - Part I
The usage of tags inherits the idea of tree structure in HTML document. Tags can be cascaded to create elaborate trees representing a single document. Going back to our previous example we can add an emphasis inside our paragraph as follows:
<p lang=“en-us” id=“hello-world”> Hello <em> World! </em> </p>
Notice that the tag ‘em’ is used for emphasis, an italic font in most browsers. Also notice that the code is a bit more spread out. It is a good idea to pick up good code style habits from the start. Extra white space in HTML does not effect the document in the web browser. Coders tend to follow the style the of a tree, but that is not necessary for your code to work in a web browser. In HTML, white space is ignored by the browser. All HTML documents must be encapsulate with the main tag ‘html’. Something that looks like this:
<html> <p lang=“en-us” id=“hello-world”> Hello <em> World! </em> </p> </html>
Before the first ‘html’ tag, normally appears a ‘doctype’ tag. This tag tells the browser what version of HTML it should expect. In older versions of HTML this was a long paragraph that developers normally copy pasted. The new standards, HTML5 shorten the need. It is my recommendation that if you are just starting with HTML go ahead and start with HTML5, but be aware of older versions.
HTML4.01 had a number of options, one example you can find below. There are multiple versions in HTML4.01, for more examples please refer to HTML doctype reference.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
So if we go back now and revise our HTML sample code, we will end up with the following:
<!DOCTYPE html> <html> <p lang=“en-us” id=“hello-world”> Hello <em> World! </em> </p> </html>
Getting comfortable with the structure of HTML is not a difficult task. It might take some getting used to, but it is not impossible. Further information about the structure of HTML document is soon to come. If you cannot wait until then, I suggest you read the Basic Structure of a Web Page. The next step in learning HTML is to move on to practice. Until now I have shown you HTML, but we have yet to write some and see the results in the browser. For this next step you will need only 3 things. A web browser, which I can assume you have. A text editor, any kind will do. Finally you will need patient. No one learns something new all at once. Proceed with your own pace.
As a final thought about text editors. You do not need anything fancy at this point. I am aware that many web developers and designers will recommend expansive software. The truth is that when you are starting off you do not need all that. There are free option for text editors that can do all you need at this point.