Here is a screen capture of the “index.html” file used in the template you downloaded:
I’ve taken out the comments and reformatted some of the content in order to make my subsequent explanations easier but it is essentially the same file just made easier to explain. Let’s work our way through this example line by line making a little sense of why all that code is there.
Line #01: “doctype“
“doctype” refers to the type of document we’re creating. With all the different versions of HTML and all the different types of documents you can put on the web, this is simply the way you tell a web browser that the file it is reading is HTML5 compliant. So every single time you’re making a web page and you want it to be HTML5 compliant, this line must be numero uno, exactly as you see it!
Line #02: The “html” tag
The “html” tag might seem a bit redundant since the doctype line already mentioned this document was HTML but sometimes you just have to follow protocol. Just remember that a tag wraps content it applies to, notice how the final line of the document – Line #15 – closes this tag? This means that everything within it is HTML.
Line #02: The “lang” attribute
Within our “html” tag you can see we’ve encountered our first attribute. This attribute simply states to the browser that everything surrounded by this tag is meant to be interpreted as “en” (which I’m sure you worked out stands for “English“).
Line #03: The “head” tag
This tag simply surrounds HTML code that gets executed “behind the scenes” in a sense. When you look at the content of a web page, that stuff is usually included in the “body” tag (we’ll get to this one soon.) The things you don’t see happening usually occur in the “head” tag. You’ll soon learn how to use it. Notice it closes on Line #11.
Line #04: The “meta” tag
This is a curious tag that can be used for all sorts of things. So rather than confuse you let’s just explain the way it’s been used in this instance. Notice it has a single attribute called “charset” and that attribute has the value “utf-8“. All this does is make sure that the browser interpreting our web page knows it’s been written in unicode format. If that makes no sense to you, don’t worry. It’s only a pedantic line that browsers like and humans don’t so just stick it in your code and forget about it!
Line #05: The “title” tag
The title tag is a very simple one and just places a phrase in the title bar of your browser. Because it is small you may notice it’s been opened and closed on the same line.
Line #06: The “link” tag
This is a fairly important tag. This one allows us to separate the CSS from our HTML much more easily. You can see that there are three attributes being used:
Line #06: The “rel” attribute
This attribute stands for relationship and is supposed to define the relationship between this link and the current document. In our case we’re linking to a “stylesheet“.
Line #07: The “type” attribute
This will again feel a little like double up but basically this specifies the type of document we’re linking to. In our case we’re linking to a “text/css” file.
Line #08: The “href” attribute
This is another very important attribute. This is what specifies how we find the file we’re trying to link to. The ways you can do this are better explained in Making a website
Line #09: The “script” tag
Line #09: The “src” attribute
This is practically identical to the “href” attribute. Sometimes things are worded slightly differently in different tags but it works exactly like “href“.
Line #10: The “async” attribute
Line #12: The “body” tag
Well, we’ve finally finished defining things that go on behind the scenes and now we can start the bit that users will see on the web page, that’s what the “body” tag is for.
Line #13: The “p” tag
The “p” tag is used to create paragraphs, pretty simple huh?
And there you have it. This page may seem like it’s been a lengthy one but we’ve really only skimmed the surface of HTML, but this tutorial is only meant to give you a superficial understanding of web design. If you’re looking for more depth then be sure to continue onto the Making a website tutorial when you’re done with this one!