The Basic of HTML5 Structure
You probably already know that HTML stands for Hypertext Markup Language, and basically, all pages on the internet are created with some kind of HTML structure. There were many versions of HTML until this last version that is actually HTML 5.2. The first draft is from 1991, created by the physicist Tim Berners-Lee at CERN (European Organization for Nuclear Research). During these last 27 years, many things change in the HTML way to display and delivery information. But it’s basic conception continue the same, a structure made by code elements that are building blocks.
What is so particular about the HTML5?
It supports all the other versions of HTML. If you are a beginner, maybe you won’t understand the magic in that at first. However, it’s not such a common practice that the newer version of a language does support even the straight last version of it, and that was the way the previous HTML version worked. Differently from the others, HTML5 handles with the old obsolete features while creating a new and better one.
How was it possible to do it? Well, for this work out was necessary two separated specifications. One for the developers, people like you and hopefully me, one day, that write the code. The developers’ specs tried to explain how to avoid bad habits from the past and incorporated the new elements, making the code easier to write and read. And the second documentation, much longer than the first one, for the browsers. Explaining how to deal with elements that are officially out of use, but still supported.
Making the life even practical, the HTML5 documentation also includes how the browser should manage countless errors. One of the reasons why our page will work in most of the browsers even with some mistakes in our code. Being practical was one of the main principals of the HTML5, that brought for the first time the interactive with audio and video files. And it was it functionality that generated a huge polemic about its capability to obsolete Adobe Flash, all that discussion got the public attention after the open letter of Apple, “Thoughts on Flash,” by Steve Jobs.
The truth is that the HTML5 by itself could deal with most of the media content from the web, but for animations and interactivity, it needs CSS and Javascript functionalities. The trio is the most common for building websites. If you’ve just started learning code, and are thinking about a career as a web developer is good the include these three in our list.
Some of the changes that made your life as a developer much easier
<!DOCTYPE html> Simple as that! Before HTML5 was necessary a DOCTYPE that specified the version of the HTML and how the browser should render the standards mode. For example, the code below was used for the HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">The <!DOCTYPE html> is case-insensitive, but necessary. The HTML 5.2 documentation has a note explaining the requirement of the DOCTYPE for the HTML structure in section 8.1.1. “Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.” So, even if our tests show our website working perfectly without it, make sure to include it as a good practice in your code.
The <meta> tag also changed for a shorter version, <meta charset=uft-8>. The tag used in the previous HTML version was <meta http-equiv="Content-Type" content="text/html; charset=UFT-8"> . Two important things to notice is the unnecessarily quote for the attribute charset= “utf-8”, and the seft-closed that <meta charset=utf-8 /> doesn’t require. Even if you use both of them, the browser will work without problems, as the case-insensitive for the tag. Explaining simply, by using the attribute charset=utf-8 you ensure that our page is capable of encoding all 1.112.064 valid code points in Unicode. The Unicode Standard makes possible to encode characters in Mandarin, Arabic, or Japanese. Not include it on our page can cause you to lose some of the formatting.
Another good practice on our basic HTML document is to use the <html lang=en>, including it in our code will identify the language of the document. And if you decide to use some different languages in part of our HTML is possible to include another language attribute in the surrounds of that content. Check here for a list of language codes, if you decide to use a different one than English.
Ok! So, it is how your basic HTML document should looks like:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=uft-8>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
<!-- this is a comment -->
</body>
</html>For now, that is all!
It was the first of a series of text about HTML. Keep following to content for my next texts in this subject, and for other contents about programming languages, tech jobs, women in tech, and much more interesting topics that I will encounter in my learning journey.
Read more about HTML5:
“8 Top Reasons To Use The New Elements In Html5”
I’m a newbie in code, and to make my learning path more traceable, I decided to write a blog. For you that are reading this now, feel free to correct something mistake in my text, or leave a comment with some tips or advice. Or if you’re a newbie as I, follow me in this path and maybe we can learn something together.
