HTML - Coding Basics

15th April 2013


The basics of HTML Coding

HTML Coding? Wouldn’t know where to start?
Well, we’ve got one of our developers here at Attitude Design to explain the basics.

Before you begin: Open up a text editor such as Textwrangler. You can find by searching on Google.

Setting up a basic HTML page

Setting up a basic HTML page is quite easy. Type the following code into your text editor:

<html lang = “en”>
<!-- Basic.html -->
<meta charset = “UTF-8” />
<h1>Level One Heading</h1>
<h1>This is a paragraph</h1>
Note that text will be automatically wrapped.

About this code:

a) Document type: <!DOCTYPE HTML>
This should be on the first line of your Website and set to HTML5.

b) HTML Tag: <html lang = “en”>
The <html> tag indicates the beginning of a Webpage. The </html> tag should then go at the bottom of the page to close it off. It is important to include the forward-slash. Also you need to add the language the page is written in to the opening tag. For English = “en”.

c) Head Tag: <head> </head>
This tag is empty in the above example but can fill up with JavaScript and other CSS goodies before you know it. Remember to add the closing </head>

d) Character Set: <meta charset = “UTF-8” />
You need to specify the character set. Those written in English generally are indicated thus: <meta charset = “UTA-8” />

e) Indentation:
It is good to get into the habit of indenting your code. It doesn’t make any difference to the browser but helps you to see it more clearly. An example of indentation is shown below.

untitled text

f) Comments: <!-- Basic.html -->
Adding a comment can help navigation around your web page. HTML comments start with:

g) Title Tag: <title>basic.html</title>
You can add a title for your web page by typing: <title>typeyourtitlehere</title>
This will appear in the tab or title bar of your web browser and will often appear in search engine results for your page.

h) Body Tag: <body> </body>
The majority of your page code will be included between these tags. Most of the text that is seen on your site is contained within the body. The </body> tag is usually placed just before the