You have to start somewhere.
This section introduces HTML and describes what it is and why it is created the way it is. When we understand what HTML is aiming to achieve, certain aspects of it, which we will learn about in coming sections will make more sense.
HTML stands for Hyper Text Markup Language. It is a language for describing information or content.
Think about your typical page. It consists of various components. We may have headings, paragraphs, lists etc. HTML is a series of tags which we use on the content to identify to the browser (it's rendering engine to be more specific) if it is a heading, or list, or paragraph etc.
The syntax of HTML is reasonably easy, it all revolves around tags. A tag is used to identify information and follows the following format:
So what we have is a tag name, enclosed within a less than ( < ) and greater than ( > ) symbols. The tag name is case insensitive. You may write it in all uppercase, lowercase or a mixture. Whichever style you choose, however, you should be consistent.
In the next section we'll look at the basic template for a HTML document and you'll see just how these tags are implemented.
We may also include attributes within the tag if we need to include more information. We do this by way of attributes.
<tagName attribute="value" >
Some points to note:
A lot of the tags that you use are what is called a container. They identify a piece of content as being of a certain type by surrounding it. We do this by way of an opening tag at the beginning of the content and a closing tag at the end of the content. The closing tag is identified by placing a slash ( / ) in front of the tag name like so:
The organisation which manages these standards is called the World Wide Web Consortium ( W3C ). On their website you may access the official standards for Web Based technologies as well as get information on updates to the standards.
Here is the official standard for HTML 4.01
Here is the official standard for HTML 5 (Note: Currently a work in progress)
The official specifications are quite detailed and can be quite daunting to read. As you dive further into web development you may find yourself referring to this document from time to time but by then you're knowledge and understanding of HTML will have improved so it won't seem as daunting. You don't necessarily need to know all of it to be a competent web developer either so in the rest of this tutorial we'll focus on getting a solid understanding of the important stuff. Then you can easily branch out into the rest as needed.
You may be curious as to how HTML 5 can still be in draft form when it is already being used by many websites and is one of the hot topics in web development at the moment? Standards need to be quite solid before they are officially released. As these web technologies get bigger they take longer to make sure everything is correct and that new features are implemented in a way that is going to work properly and not interfere adversely with other features and that the documentation is concise and unambiguous. There is fierce competition between browser vendors at the moment so they are always keen to make sure they have the latest technologies. Many of them are implementing HTML5 technologies now, in preparation for when it is officially released. Website developers, who are always keen to make their websites stand out from the crowd have also been keen to implement these new technologies (even though they are not officially standard yet). The HTML5 specification is getting stable now as it gets closer to being finished so this hasn't caused too much trouble in general but it is something you shoudl be aware of if you start using some of the fancy new stuff HTML5 introduces.
What we have here is a separation of purpose.
Separating tools into specific defined purposes is a common approach in computing. It allows for manageability and flexibility, especially as our projects get larger. When designing web pages it is particularly powerful. You'll fully appreciate this when we start playing with CSS in later tutorials so for now you'll just have to believe me.
Another benefit of this separation is that it makes the code cleaner and easier to read. Rather than having a document with all the different code for different aspects of it mixed in amongst each other and with the content, we instead have separate files, each dedicated to a specific purpose.
You should always strive to write your code as cleanly and elegantly as possible. The easier it is to read and understand the better.