So in the previous HTML Tutorial we looked at a lot of types of HTML tags and how HTML syntax works. In this post we’ll just put it all together into a simple HTML Page.
As explained in the previous post, HTML is used to define content and additional resources for the webpage to function normally.
Here’s what a usual HTML Document looks like:
So let’s dig deeper into each of these sections.
The Head Section
This section is at the very top in all HTML documents. It includes information about the document like character encoding, linked resources, description for the page, title of the page etc. It is here that we would include all the additional CSS and JavaScript files needed for the page to function properly.
Here’s what a typical head section looks like
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Sample Title of the Page</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="JavaScript.js"></script> <link href='https://fonts.googleapis.com/css?family=Stardos+Stencil' rel='stylesheet' type='text/css'> </head> <body> <h1> The main heading of this content </h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis, lacus vitae ornare rutrum, libero erat aliquam lorem, eu iaculis lorem neque nec libero. Mauris ullamcorper, purus et ultricies pellentesque, lectus tortor aliquet nisl, id laoreet ante ligula non est. </p> <img src="sample.jpg" alt="Example Image"> <p> Curabitur posuere finibus porttitor. Sed congue lacus ac iaculis mattis. In rutrum dui ante, vitae sodales eros sagittis sollicitudin. Donec dolor tortor, ornare ac congue nec, porta ac odio. Donec faucibus nisl at ipsum fermentum sodales non sed erat. </p> </body> </html> |
Now let’s look at each tag in detail
<!doctype html>
The <!doctype html> is not exactly a HTML tag. Its actually an instruction to the web browser informing it about what version of HTML is used. This tag declares HTML 5 as the HTML version of this document. Examples of other versions are as follows
HTML 4.01 Strick
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
HTML 4.01 Transitional
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
HTML 4.01 Frameset
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
Similarly there’s for more formats but we’ll go into detail a little later.
<HTML>
The HTML tag marks the start of the HTML content. It is within this tag that the code for the whole document will reside. Hence you see the HTML tag closing right at the end.
<head>
This is where all the header content we’ve been talking about goes. As mentioned earlier this element includes content like the title of the page, links to CSS and JavaScript files etc.
Let’s have a look at the contents of the <head> tag in detail.
<meta charset=”utf-8″ />
This tag is used to define what encoding is used to the content. Encoding is basically a way different characters are stored in the system. Here’s a great article explaining this in great detail.
<title>
This section defines the title of the page. The title is the text that appears on the browser tab. As seen in the example above, “Edit Post ‹ Projectile Pixels….” is the title. In the code we have above the title would be “Sample Title of the Page”.
<link rel=”stylesheet” type=”text/css” href=”style.css” />
This tag creates a “Link” between the HTML file we are editing and another CSS File. Basically to keep things simple, all HTML code would be stored in the HTML file and all CSS code will be stored in a CSS file. These two files are then “linked” together so they can work as one single document.
The “rel” attribute
The “rel=”stylesheet” attribute defines the type of relation between the HTML file and the CSS file. In this example it’s quite straightforward that the linked file is a stylesheet for the HTML file. However in some cases it might not be so obvious, which is why this attribute is needed. As a example the <link> tag can be used to link to an alternative version of the file, in such cases we would declare the it as Link rel=”alternate”. This explains that the linked file is an alternate version of the current file.
The “type” attribute
In simple words, the type attribute states the file format of the linked document. I understand this might seem similar to the “rel” attribute and get confusing. Here’s how the two are different,let’s say we link to another HTML file which is an alternative version of this file. In such a case the rel value would be “alternate” however the type value would be “text/html” as the file itself is an HTML file. The values in the type attribute are knows as MIME types, which is just another term for file formats. Here’s a nice complete list of all MIME types there are.
The “href” attribute
href is short of Hypertext Reference. It’s basically the address or location to the actual linked file. In this case it tells the browser where exactly the CSS file is located.
How exactly is the location defined
I know some might be thinking how exactly is the location defined. The location is basically a URL to the concerned file. The URL can be a relative one or an absolute one.
Relative URL : A relative URL mentions the location relative to the HTML file’s location. For example let’s say the HTML file and CSS file are in the same folder and the filename of the CSS file is “style.css”. In this case the value would be “style.css”. However if there was a folder named CSS along with the HTML file and CSS file was within this folder it would be linked to as “CSS/style.css”. Similarly ” ../ ” means “up” the directory tree. Equivalent to you pressing “up” on windows explorer.
Here’s a quick illustration to explain it better.
<script>
The script tag is used to add JavaScript or other available scripting code to the document. There’s two ways of using this tag which we will look into detail in the Javascript section. For now all you need to keep in mind this that the “src” attribute acts exactly like the “href” attribute. “src” is short of source.
After all this we can go ahead and close the <head> tag with the closing head tag </head>.
<body>
Now that we’re done setting up the head section let’s move to the body section. The body section is where all your content will be defined. All the headings, tables, lists, forms, images, paragraphs etc are added to this section. Do note that some tags in the head section can also be used in the body section. For example the <script> tag.
In the above example we have created a simple HTML page with a main heading followed by a paragraph ,an image and then another paragraph.
<h1>
The <h1> tag defines the heading. In the above example the heading would be ” The main heading of this content “.
<p>
The <p> tag is used to define the text that forms a paragraph. You will see another paragraph after the image has been defined.
<img>
This tag defines the image. The src attribute works exactly like the src explained earlier in the <script> tag. The “alt” attribute provides alternate text that can be displayed incase the image itself does not load.
The image at the start of this post also shows a <script> at the bottom of the document. That’s basically just good practice, JavaScript kept at the top of the page can often slowdown the loading of HTML pages and hence are often placed at the bottom of the page. This means any additional JavaScript would be included at this part of the document just before closing the <body> tag.
Once done with closing the <body> tag, we also close the <html> tag as a sign that this document has ended.
I highly recommend you copy the code at the top of this post and save it as an HTML file (filename.html). Then go ahead and load it in any browser to understand how exactly all this code translates to the page. You will also need to place an image named “example.jpg” in the same folder as the HTML file.
I hope this post was helpful, if it wasn’t feel free to ask your questions in the comment section and I’ll be happy to answer them all.