Step 1: Start the file

It’s been like a lifetime ago since wrote my first Step By Step HTML course and yes it has had a few revisions since. A few tweaks here and there were made to make sure you don’t get to far removed from what’s going on now. But now, there’s HTML5. This takes it all to a different level, so I thought I’d write a new course teaching you HTML 5 step by step.

Starting our sample HTML5 file

Get your notepad ready to copy and paste this code below. Then save the file as index.html. This will be our sample file:

<!DOCTYPE html>
<html>

</html>

Doctype

Notice a difference with the first course? Yes, we are writing html tags in lowercase nowadays and the file kicks off with a doctype line. I think this is pretty straight forward in terms of what it could stand for, but I’ll still explain: “DOC” stands for document and here you are telling the browser which “TYPE” of document you are creating, hence doctype. We are creating an html file.

Terminology

Officially there’s also a change in how we describe the html codes. We don’t call them tags anymore, but they are HTML elements. People will still know what you talk about when you call them tags though. Any text that you write in between the elements (tags) is what we describe as content. And if you use any other HTML element within another HTML element, for instance when we add the <head>-element in the <html>-element (next step), we call those nested HTML elements.

<html>-element

In old versions of HTML you could set a language for the whole of your page within the <html>-element. This was an exclusive to the <html>-element and was done like this:

<html lang=”en”>

This would set the page for English. In HTML5 you can set a language within any HTML element. It’s usually not set within the HTML tag anymore. This change is due to the dynamic use that HTML now needs to facilitate.

If you are not interested in technical mambo jambo you can go to the next step now.

The difference between HTML then and now

To explain this quickly, I’ll tell you a little bit of what’s been changed over the years. Back in the early days of the Internet every action online would always have to be triggered by a click on something (a button or a link). A page would have to get reloaded in order for  information to be passed onto the server and processed. A few years ago a way was developed for this to be done on the fly, in real time. This makes it possible for Facebook for instance to show you updates of your newsfeed when it happens as it happens. You didn’t click anything to reload the page to view those new updates, did you? If it were 1996, you had to! It wasn’t technically possible to do it any other way back then.

In the past, this meant a lot more seperate HTML files were created, because every click would usually need to load a new page or renew the current page. Also, every bit of content was always placed within in the HTML file itself. Now a lot of pages are created dynamically. Meaning, you usually stay on the same page and the link or a mouse over action will actually put the content of a page together for you. Content is now usually stored in and pulled from a database.

In order to make this possible a page actually already contains most of the coding it could need to possibly offer to someone. It’s stored in layers or elements of layers, all stacked on top of each other and packed with info. Some are visible, some others get triggered by your actions on a website (a click, a mouse over, pressing enter, even leaving a website). Just think of how many times you’ve filled out a form and saw new fields magically appear, when you check a box. Welcome to the world of dynamic websites!

With that said, one major thing that has changed is that HTML is now not seen as one of the leading languages, but more as a supporting language. During the rest of this course you will find out that HTML5 assumes you’ll be using CSS to actually help markup the page layout and styles. For now, let’s go back to keeping it simple though.

Go to the next step

Bookmark the permalink.

Comments are closed.