The Basics of HTML and HTML5

Requirements

There are absolutely no requirements to start learning HTML, but you will need some tools to help you along the way. There are two tools that are essential to becoming an efficient and professional Web Developer.

1. 1. Firstly, you will need a Text Editor. Windows users, you can get an awesome text editor from notepad-plus-plus.org. As you have probably guessed from the name of the URL, this text editor is Notepad ++ and includes some cool syntax highlighting! Mac fans, you can get a text editor from Bare Bones. This handy text editor- Text wrangler also supports syntax highlighting for a range of programming languages. Personally I use Text Wrangler. Linux lovers, you can use the default gnome text editor- gedit. If it’s not already installed, you can get it over here at gnome.org. Do I need syntax highlighting? What is syntax highlighting? Syntax highlighting allows you to easily see certain elements of your code in a designated color. For example, when using a WYSIWYG (what you see is what you get) editor with syntax highlighting some editors may render the HTML structure as blue, comments as grey and attributes and values as different colors. This allows you to easily distinguish between the sections of code, elements and comments.

1. Secondly, you will need a browser to render your code. I recommend Firefox. For the purpose of this tutorial, go ahead and download and install Mozilla’s Firefox (Cross-platform) Browser and the Fire-Bug add-on for Firefox. The Fire-bug add-on will be your new best friend as a learned web developer. The Fire-bug Firefox add-on provides the ability to closely “inspect” the elements of an HTML document and see what’s going on behind the scenes- this will play a big part in your web development career! Alternatively you can use any other browser that supports HTML5; including Safari, Google’s Chrome and Opera.

Definition of HTML

HTML stands for Hyper Text Mark-up Language.HTML is the basis for all things Web and is a necessary skill for any Web Developer!

Structure

Let’s start with a basic HTML5 structure:

So, lets try this out!

1. Copy the above code
2. Paste it into a fresh document (with your text editor)
3. Save the file with an .html extension (i.e. template.html)
4. Open the html file with your Browser
5. What do you see?

No Output?

The Browser didn’t seem to show us any content did it? The browser would not show us any content (output) as we have not yet told the html document to output anything to the browser. All we have told the browser is that we have an HTML document.

Validation

Even though all we have created is a HTML structure and we are not seeing any results (yet), the HTML document we have would validate with W3C’s online HTML validation tool. W3C is the World Wide Web Consortium- they set the standards for HTML (and many other Web Based Languages) to provide a similar cross-browser experience; meaning that web browsers will be more inclined to output (or render) data in a similar fashion.

So, lets try this out!

1. Go to W3C’s online HTML validation tool,
2. select the third tab along- “Validate by Direct Input”,
3. Copy and paste your HTML5 document into the window and click ‘Check’.
4. Notice how the document passed validation with three warnings?

So, lets fix up these warnings!

1. The warning- “Using Experimental Feature- HTML5 Conformance Checker” is basically telling us that HTML5 is not officially supported by all major browsers yet.
2. The next warning- ‘No character encoding declared at document level’- this is because we havent declared out character encoding within the HTML structure. Character encoding basically tells the browser that our HTML content is using specific character encoding.
3. The final warning is telling us that no matter what our character encoding is set to within our HTML document that we are validating, it is going to assume and treat is as UTF-8. The logical way to overcome this last wanring is to use the file upload tool, rather than the Direct Input.

Now, lets try and use the w3c validation tool to upload our HTML document, by selecting the second tab on the W3C’s online HTML validation tool page. Now we have four errors.. In reference to “The logical way to overcome this last wanring is to use the file upload tool, rather than the Direct Input.” from the above list of warnings; this is obviously not going to do us any favours, if we have not declared our character encoding. If you notice we have our ‘Using Experimental Feature- HTML conformance checker’ warning and the other 3 warnings are related to our character encoding. Lets fix this, by adding the following

to the head section of our HTML structure, like so

We have just added our first HTML meta tag! This meta tag lets the browser know that we are using UTF-8 character encoding. Tags inside the head element of a HTML document are often used to tell the browser information about the HTML document that we don’t need to output as part of our content, such as our HTML title and character encoding. In every programming language comments are widely used to help remind other developers what is happening in the code, to reference images in HTML, to make note of extra code that will be added to the web application at a later date and notes to others who may be working on the same project.

Comments

In HTML, comments are simply implemented in to the document, by adding

			
				
			    
					
				
				
					<!-- A left angled bracket, an explanation mark, two dashes. Your comments content goes in here.   Everything that follows the first left angled bracket, explanation mark, two dashes will be commented out, until the closing comment tags are seen.   To close a comment: two dashes and a right angled bracket. This multiple line comment is about to close -->

HTML5 Structure revisited

Lets go through out HTML document and talk about the structure step by step, using comments.

			<!-- declaring the doctype (document type) as HTML -->
			
			<!-- opening html tag i.e starting the html document -->
				
				<!-- opening head tag -->
					<!-- this is where we would place our meta tags, style and scripts -->
			    
					<!-- declaring our character set encoding-->
					
					<!-- opening and closing title tags, this is where we would place the   'title' of the web application -->
				
				<!-- closing head tag -->
				
				<!-- opening body tag -->
					<!-- We could type anything in this section.. English, Spanish, French or even lorem ipsum. Only problem is I am stuck inside this multi-line comment! -->
				
				<!-- closing body tag-->
			
			<!-- closing html tag-->

So, lets try this out!

1. Copy the above code
2. Paste it into a fresh document (with your text editor)
3. Save the file with an .html extension (i.e. template.html)
4. Open the html file with your Browser
5. What do you see?

Nothing has been output by the Browser, as we have used comments to explain the structure and have not yet added any real content.

Inspecting with Firebug

Open up our “FireBug” FireFox add-on, by right-clicking on our FireFox Browser window and selecting “Inspect Element with FireBug”. Notice how we can see exactly what we typed into out HTML document on the left-hand side of the FireBug window?Right, so how can we tell the browser to output some data? It’s actually quite simple. But before we add any content to the document, Lets set the title of the HTML document, like so

Now, if we load up this HTML document in our Browser now, we dont see any changes.. But, have a look at the top of your browser window or current tab- this is where the Title of your HTML document is shown.

Now, for some content..

We can just to add some text in-between our body tags and we will start to see some output from the browser.

			
				
			    
					
				
				
					Hello World

And there you have it; a basic Hello World document in HTML5.

So, lets try this out!

1. Copy the above code
2. Paste it into a fresh document (with your text editor)
3. Save the file with an .html extension (i.e. hello_world.html)
4. Open the html file with your Browser
5. What do you see?

Notes:

1. Notice how every tag is closed in order of which they were opened? This is a very important element to HTML.
2. Older versions of HTML require quite a long DOCTYPE declaration.
3. HTML5 is not currently supported by all major browsers, but provides plenty of extra features for us to work with and stay ahead of the curve. Although HTML5 is not supported by all major browsers, Google’s Chrome, Opera and FireFox are currently the most useful tools for Modern Web Development.
4. If you are not seeing this “Inspect Element with FireBug” option in the drop-down menu, when you right ‘click’ on your browsers main area- Take a look at this helpful documentation athttp://kb.mozillazine.org/Installing_extensions#Single-user_installation.