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
<!DOCTYPE html>
<html>
You’ll also need to close just the html tag at the end of your page with
</html>
Head
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
eg.
<title>This is a title</title>
Body
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.