5 Essential Steps to Understanding HTML – HTML is a relatively simple language in the world of IT and web. But that doesn’t stop people having problems with it. Why is that? Well, it’s mainly because, while the HTML tags themselves are easy, creating a valid document that works as planned on a web server requires you to know a few extra things. They are mentioned in the learning videos or books, but sometimes they are not explained correctly. Here, then, is a guide to understanding those parts of HTML. We are not going to go deep as that would take 50 guides like this, but this will help you get there.
Step 1: Understand HTML Doctypes
It isn’t often noted that valid HMTL documents don’t actually start with the tag – they have one extra tag before it. This is the doctype, and it must be present right at the top of your document for it to be valid HTML.
There are only really two doctypes that you really need to know about. The HTML4 doctype looks like this:
The HTML 4.01 strict doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
The HTML 4.01 Loose doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
These versions of the doctypes that are a little more forgiving – if you’re a purist, you can use the strict ones instead by changing the words ‘transitional’ and ‘loose’ to ‘strict’.
The XML 1.0 strict and transitional doctypes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
They also look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 4 is now getting old and they have replaced it with HTML 5. This has made the doctype very simple and is and should be the standard that every website is written in. An example of HTML 5 doctype:
Yep that’s it. Tiny and easy. This has made life so much easy for beginners to start with.
But what is the doctype for? Well, its purpose is simple enough: it tells web browsers exactly what version of HTML your page was written in, to help them to interpret it correctly. It goes right at the beginning of your HTML document, before the <html> tag.
Below is an example of a layout
<!DOCTYPE html> <html> <head> <title>Title of the Website</title> </head> <body> The content of the Website </body> </html>
Step 2: Understand HTTP Errors.
A truly shocking number of people writing HTML pages don’t know how HTTP works. At the start I was one of them. I was writing code but never really knew how it all worked. This quickly run me into trouble.
To start with HTTP is the way a web browser communicates with a web server , and this communication includes information about your pages, such as cookies.
You don’t need to worry too much about the internals of HTTP, but it’s worth knowing that it works by the browser sending a request to the server for a certain page. Then the server responds with a code for that page.
Your website should be set up to handle error codes well. For example, a 404 (page not found) error should show a page with links to the most useful parts of your site. This will get people to look at other pages and stay on your site for longer.
Other common error codes include:
200 – OK
301 – Page moved.
403 – Forbidden (no authorisation to access).
500 – Internal server error. [adinserter block=”4"]
Step 3: Understand MIME Types.
MIME types are another part of the head tag. They are very important to make a website function for today’s interne. Also known as the content-type header, they tell the browser what kind of file they are about to send. Browsers don’t rely on HTML files ending in .html, JPEG images ending in .jpeg , and so on. They rely on the content-type header. If you don’t know about this, you can have problems if you need to configure your server to send anything unusual.
Here are some common MIME types:
text/html – HTML.
text/css – CSS
text/plain – plain text.
image/gif – GIF image.
image/jpeg – JPEG image.
image/png – PNG image.
audio/mpeg – MP3 audio file.
application/x-shockwave-flash – Flash movie.
Step 4: Understand Link Paths.
One of the hardest things to understand about HTML is all the different things that you can put in an ‘href’ property. Abbreviated URLs are created using the rules of old text-based operating systems, and there are plenty of people writing HTML today who are completely unfamiliar with these rules.
First a URL represents a link to a web page. When creating links to web pages there are two choices:
An Absolute link
A Relative link
Next, we have the paths, say we are on the index.html page, the root folder:
We need to get to an access a file on the same level, all we do is write:
example2.html or ./example2.html
The ‘ ./ ‘ is implicit , this means it will be added if we don’t add it ourselves.
The Absolute URL link to this file would be
Or the A Relative link
example2.html or ./example2.html
Now what about the URL , there is a sub folder then the file :
this is a absolute path, from the root we can instead do the relative path:
example1/example2.html or ./example1/example2.html
But if we are already in the example1 folder and want to access a file in the Root, say the index.html, we have to now go a up a level. We now use the double dots and slash ‘ ../ ‘
Example would be: ../index.html To put it simply, one dot means “in the folder we’re in now”, while two dots means “in the folder above the one we’re in now”. This can get confusing fast – just look at the difference one dot can make! Be careful with it.
Step 5: Understand How to Insert Things That Aren’t HTML.
For other file types you can link them in, but slightly different. For example, if you want use a clickable link, the href is used in the anchor tag:
When you want to use an image we use the image tags and the src:
<img src="assets/logo.jpg" alt="">
When linking CSS, the href:
<link href="./css/stylesheet.css" rel="stylesheet">
Well that the basics over with, you have now got a better idea of what makes a website work. Below i have added a example Hello World page.
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <title>Hello World</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <H1>Hello World from the TechArt Team</H1> <a href="https://thetechart.com"><img src="https://thetechart.com/theTechArt.jpg"></a> </div> </body> </html>
This brings all the pieces together, plus a bit more.