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:
<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!
Do you like this article? Share it with your friends with this link: http://miloq.blogspot.com/2010/10/create-blank-html5-page.html
ReplyDeleteThanks for reading! :-)
Will this make copy consistent on most different browser?
ReplyDeleteGoodWil: yes, this blank HTML5 page is consistent in all browsers. It's validated correctly from W3C.
ReplyDeletegreat ! thanks !!
ReplyDeleteSimple and efective.. that is a pure blank template
ReplyDeleteOne thing I also like to include in my HTML5 head is:
ReplyDelete<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Useful example!!! :D
ReplyDeleteA brief, simple, validated blank html 5 standard page. Well done. Thanks.
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
ReplyDeletethis 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
DeleteI 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.
ReplyDeletewebsite design
super duper simple.
ReplyDeletebasic to learn about html5
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
ReplyDeleteI feel like an idiot now. Very easy guide :0
ReplyDeleteThanks for this valuable blog. It was very informative and interesting. Keep sharing this kind of Information.
ReplyDeleteMatlab Training in Chennai
HTML5 Training in Chennai
Matlab Course in Chennai
Nice Blog With Full of Knowledge
ReplyDeleteThanks For Sharing.....
what internship is all about
where to do internship
what internship should i do
How will internship benefit you
internship providing companies in chennai
internship program in chennai
How internship works
internship permission letter
internship with training
internship meaning in tamil
Nice post. Thanks for sharing! I want people to know just how good this information is in your article. It’s interesting content and Great work.
ReplyDeleteinternship mail format , What internship means , internship hiring companies , internship without degree , internship without experience , internship acknowledgement , internship 2022 summer , internship training online , internship websites in india , internship completion certificate
Tranonkala tsara : Zonahobisaya
ReplyDeleteTranonkala tsara : lambang
Tranonkala tsara : lambang
Tranonkala tsara : Zonahobisaya
Tranonkala tsara : Zonahobisaya
Tranonkala tsara : Resep
Tranonkala tsara : Zonahobisaya
Tranonkala tsara : Zonahobisaya
ReplyDeleteThanks for the information... I really love your blog posts..
summer training |
web design and development |
aws training |
cyber technology courses |
robotics coding course |
mba finance internship in gurgaon |
website design institute |
students database chennai |
full stack engineer intern |
php mysql training |