Basic html coding involves using a range of ‘tags’ to categorise different pieces of information on your page. You’ll use CSS after to format your content with fonts, colours etc.
Most html tags come in a pair. You need to open & close your tag to define which content belongs inside.
An open tag has a set of greater than and less than brackets which will have the tag type in-between <>.
When you would like to close the tag you’ll write the tag name again but it will include a slash after the first bracket </>.
Setting up your page
Your html will always include some basic tags which set up your page.
These are the doctype, html, head and body.
Doctype & Html
The doctype & html tags let the browser know what language you are using.
When writing an html5 page you need to start the document with
You’ll also need to close just the html tag at the end of your page with
The head tag will include information for your browser, this content won’t display on within your webpage.
Open your head tag with <head> and close with </head>
Within your head tag you’ll put information such as an analytics code or a page title to display on the browser tab
<title>This is a title</title>
Your body tag is where you will put all of the content of your webpage such as headings, text, images and links. Open your body tag with <body> and close with </body>
Tags you need to know:
Within your body content there are a few essential tags you will likely be using, the more commonly used of these have been covered below:
Divs: <div> Put sections of text and images inside a div so that it can later be formatted with css styling </div>
Paragraphs: <p> Write you paragraph here </p>
Line break: This tag does not need to be closed. Anything after <br>
will be pushed down onto the next line.
Links: <a href=”http://www.mydomain.co.nz”> Write link text here </a>
Images: <img src=”file/location/img.jpg”> Your image tag doesn’t need to be closed either but it does need a source url for the image within the “”.
Bold text: <b> The text here will be bold </b>
Italics: <i> The text here will be in italics </i>
Headings: Headings are defined with a heading tag. H1 is the largest heading, through to the smallest H6.
<h1>Write your section heading here</h1>
<h2>Write your main heading here</h2>
<h3> Write your subheading here </h3>
Using these tags you should be able to put together a basic webpage. You can then format your webpage with CSS.