So you’ve decided to learn HTML, well lets get started. This tutorial is for absolute beginners to html but may still provide some help to people who are maybe a bit rusty. HTML stands for Hyper Text Markup Language. Hypertext is just a fancy word for a computer document that contains links to other documents and a markup language is essentially just a way of adding structure to a document.
In the case of HTML, we use what we call “Tags” to structure webpage content. Tags are made up of an opening and closing tag with an opening tag looking like this:
<tagname> and a closing tag looking like this:
</tagname>. Notice that the closing tag has the same name and that the only difference is that it starts with a forward slash. When referring to the opening and closing tag together, this is usually referred to as an “Element”. To add content, you simply just add the content between the tags like this:
<tagname> Here is some content </tagname>
HTML has a whole range of tag names that are used for different things. There are too many to cover in this tutorial but you can view the full list of HTML elements at w3c.org. Its worth spending the time going over the tags available since in some cases, using the correct tags can help with search engine being able to read your page more efficiently as well as helping people who may be visually impaired access the content of your page more easily.
What you’ll need
All you need to create and edit HTML files is a text editor, this could even just be the standard text editor such as Notepad that will more than likely already be on your computer. However coding is made much easier if you have the extra tools and features that a more powerful edit can provide, such as line numbers in the editor and tools like checking syntax and validating the code. There are a whole bunch of code editors out there and each one will have features or a look and feel that works best for you so would encourage you to download a few and find the one you like the best.
I personally use a whole range of editors depending on what programming language I’m working with but here are a few popular ones, in no particular order, for you to have a look at that will get you started:
Lets get coding
To get started, open up your text editor and create a new file called “example.html”. Add the following code and then save the file.
Now open the file in your browser. Double clicking the file should open it in your browser by default and produce the following results:
And there you have it. You have now created your first HTML5 web page.
Lets take a look at the example code and explain whats going on. The first thing you might have noticed is the first line of code:
<!DOCTYPE html>. This line of code lets the browsers know what kind of document it is about to read. There are many different Doctype declarations you can use, this one in particular tells the browser to expect HTML5 markup. You can view a list of other doctypes Here
The next line in the code is the opening html tag. As you can see this tag wraps around all the other tags and is where all other html elements will be added. The next 2 tags, nested inside the html tags are the
<head> and the
<body> tags. The “head” tag is where you add things like the page title, meta data and links to external resources. As you can see there is a
<title> tag nested inside the head tag, this title will be in browser tabs as you can see in the example image, as well as in search engines and things like that and is also mandatory in an html document.
<body> tag is where you add all your content. Everything inside the body tag will be output to the browser window for users to view and it will be where you will be spending most of your time creating html elements and content. The doctype and html, head, body and title elements are all required in an html document.
Now lets take a look at the content I added.
<h1> Hello World! </h1> This adds a page heading. There are 6 page heading tags you can use to add a heading to the page: h1,h2,h3,h4,h5 and h6. The number after the “h” represents the order of importance the title has. Although heading tags aren’t strictly required in html, they are important for many reasons including accessibility and also search engine optimization. Allot of html validators will through warnings if you don’t have at least an h1 tag and would highly recommend making sure you try to include headings on every page.
The final tags I added here was the
<p> tag. This is a paragraph tag and is used to separate content into paragraphs. I could just as easily have added the content “This is some content for the page” inside another tag such as a
<div> tag and achieved a similar result. However when creating an html document you want the structure to be semantic and easily to read over the code and quickly understand whats going on which should always be one of your goals when coding anything.
Always try to keep your code neat and tidy and easy to read. HTML5 provides more tags than ever for creating semantic, easy to understand structures of code such as heading, footer, section, nav tags as well as many more. How you structure your code and what tags you choose to use is up to you so make sure you choose the right ones for the situation so its not only easy to understand for you but also for anyone you may be working with in a group.
Indent your code. As you can see in the example code, I have indented things like the title and the h1 and p tag. I don’t personally ever indent the head and body tags just because I find it easier to quickly glance and check that I have them there but you should indent every time you nest an element within another element to make it easier to read. There is no standard way of indenting, most people indent by pressing the Tab key which is usually the equivalent of 4 spaces. How many spaces you indent by is up to you, most people use 2 or 4 spaces but I personally find 4 spaces easier to read.
Know your tags. Its a good idea to spend some time going over all the tags to get an idea of what tags there are. You don’t have to memorize them all of by heart but its good to have a look through them just so that you have a rough idea as you will eventually learn them and pick up the most important ones as you create more and more web pages. You can view all the tags Here
Obviously now you have an idea of how to add structure and content, you will now want to add styles to your page to make it look nice. Before you dive into styling your pages, I would suggest messing around with different tags first, maybe make a page with all the html elements on it so you can see the different between them all and the different things you have at your disposal such as form elements etc.
I will add a styling tutorial in an upcoming post. Thanks for reading, I hope this has helped someone out there.