Create a blank HTML5 page

Update: WHATWG announced that HTML is the new HTML5, it means that HTML is a living standard. To see this post updated, please visit: create a blank HTML page. Thanks!

Undoubtedly, the most established web technologies are the specifications published by the W3C. That is why it's important to know all the news they're doing. You can work with HTML in its first version perfectly. The backward compatibility is, for me, one of its strengths. But if you want to take advantage of the current browsers you need to learn HTML5.

1. Open a text editor

To start you need a text editor to write your HTML code. You can use the text editors that come with each operating system. For example you can use Notepad for Windows, TextEdit for Mac OS X or Gedit for Ubuntu Linux. In internet there are a lot of text editors for all operating systems.

My favorite text editor is Geany because it's simple and it's multiplatform for all operating systems.

2. Write HTML5 code

Once you open your favourite text editor type the following:

<!doctype html>

<html>

  <head>
    <title>A blank HTML5 page</title>
    <meta charset="utf-8" />
  </head>

  <body>

  </body>

</html>

In the first line, <!doctype html>, you define the type of document. This element tells the browser the version and the type of HTML used in the document, in this case would HTML5. With this, the browser will use the rendering model for the type of document. If you not specify the document type the browser will interpret the HTML code written as it wants. Very different results are obtained in this way, even between two versions of a same browser. Therefore, it is always best to define the type of document.

With the next element, <html>, you define the HTML document and tells the browser the beginning and end of the HTML page. Their labels are: <html>, put it even after specifying the type of document, and </html> always put it at the end of the document. For this and all others elements is necessary define the beginning and end of an element with tags. The syntax is <tag_name> for a start tag and </tag_name> for an end tag. The only label that does not need to close is <!doctype html>. If among these tags are not going to enter text you can also write as follows: <tag_name />.

The third element, <head>, has the function of delimiting the file header. The header is the appropriate section to include information about the document, most of which will not be shown to your visitors. To include this information you have different elements, so far only the two most important comment: title and meta.

With the element <title> you indicate the title of the document. What you include between these tags is the name that appears at the top of the browser.

The element <meta charset="utf-8" /> is used to specify information about the document itself. The meta elements are often part of the head element of the document. The attribute charset="utf-8" specifies that the document will follow the UTF-8 encoding format of Unicode characters.

Finally, the element <body> defines the document body. Here are all the contents of the page you want to show your visitors: text, images, videos, etc.

3. Save as HTML5 file

Known items and how form a HTML5 page, now save the document with an html extension, an example would be template.html. Run the file and you'll see your browser with a blank screen.

4. Validate it

Finally, to validate your document HTML5, go with your favorite browser to the W3 validator. Now you see a row of tabs, click Validate by File Upload. Then click the Browse File button and select the file you created earlier. And finally click the Check button. If you have not seen any problems you will have your document validated. Congratulations! You've created your first HTML5 page!

18 comments:

  1. Do you like this article? Share it with your friends with this link: http://miloq.blogspot.com/2010/10/create-blank-html5-page.html

    Thanks for reading! :-)

    ReplyDelete
  2. Will this make copy consistent on most different browser?

    ReplyDelete
  3. GoodWil: yes, this blank HTML5 page is consistent in all browsers. It's validated correctly from W3C.

    ReplyDelete
  4. Simple and efective.. that is a pure blank template

    ReplyDelete
  5. One thing I also like to include in my HTML5 head is:

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    ReplyDelete
  6. Useful example!!! :D
    A brief, simple, validated blank html 5 standard page. Well done. Thanks.

    ReplyDelete
  7. I created an HTML5 page. I saved it: (File; Save as;,basic.html; Text Document; UTF-8.). When I am trying to open it, I can not open it with the Notepad. It gives me the options: Google Chrome, Internet Explorer and Choose Default Program. Could anybody help me with this? Why it does not give me the option to open with Notepad? Thank you

    ReplyDelete
    Replies
    1. this is because it is trying to open it as a html (browser ) page try downloading "notepad++" it is a free open source upgrade to notepad that is a very effective html editor

      Delete
  8. I found it very useful. I was looking for something like this and i find it here.The contents are masterwork. youve done a magnificent job on this topic.
    website design


    ReplyDelete
  9. super duper simple.
    basic to learn about html5

    ReplyDelete
  10. Inspiring writings and I greatly admired what you have to say , I hope you continue to provide new ideas for us all and greetings success always for you..Keep update more information..find out here now School web design uk

    ReplyDelete
  11. I feel like an idiot now. Very easy guide :0

    ReplyDelete
  12. Thanks for this valuable blog. It was very informative and interesting. Keep sharing this kind of Information.
    Matlab Training in Chennai
    HTML5 Training in Chennai
    Matlab Course in Chennai

    ReplyDelete
  13. Tranonkala tsara : Zonahobisaya
    Tranonkala tsara : lambang
    Tranonkala tsara : lambang
    Tranonkala tsara : Zonahobisaya
    Tranonkala tsara : Zonahobisaya
    Tranonkala tsara : Resep
    Tranonkala tsara : Zonahobisaya
    Tranonkala tsara : Zonahobisaya

    ReplyDelete