Graham Morby-Raybould

Designer. Developer. Freelancer.

HTML5 An Introduction Part One


HTML5 An Introduction Part One

Welcome to a new series that i'll be doing on here and over on Youtube. This course of blog posts and videos is my first in trying to teach a hobby, job and lifestyle I love. So in this first post we will explore a few fundamental points about HTML5.

<!DOCTYPE html>
<html>
<head>

<title>Hello World!</title>
</head>
<body>

<p>Hello World!</p>
<p>Hello World!</p>
<br>
<p>Hello World!</p>

<p>Hello World!</p>
<br>
<p>Hello World!</p>

</body>
</html>

So the code you see above is by far the most important layout you will see in HTML, it has every single tag/element that you require to have a page render on a web browser or user agent. So lets break it down. 

The first thing you will notice are two different ways of writing tags/elements, the first one looks like this

The p tags : This is a Container Tag and must come in pairs with an opening and closing tag. the only difference bewteen the two is the / which indicates to the browser that the tag is closed. 

The second tag br  is a Empty Tag and does not require any closing tag. Its "Self closing".  HTML5 allows us to use empty tags but for good coding parctice we should always try and use containing tags.

The !DOCTYPE tag at the very top will tell the browser exactly what version of HTML you are using. Its very important to try and use the current version so you have a fighting chance of rendering your site across all the browsers and user agents. You can find out more about DOCTYPES here.

The html tags are the ones that will host all our HTML code.

The next set of Containing Tags we see are the head tags. These tag generally host all the information about the site. The title, meta data and any links to Javascript (Can also be loaded in the footer) or Stylesheets. 

The body tags is where we host the document code. The code you wish for the user to see should be all hosted within these two tags.

and last but not least the p tags are simpe paragrapgh tags and will render paragraphs of all the content inbetween them, with the br being a line break.

The video below goes into much more detail and should you require any more help or information please get in touch or leave a comment below

 

  


Created: 2016-08-29.


Recent posts


Basic Laravel install

So you want to set up a new Laravel Install? Correct? Right ok so lets begin..... First...

2017-06-15

Read More

Back to blogging and a headache

It's a hard thing this day in age to decide what is best to do in terms of technology and how...

2017-05-23

Read More

Twitter