The basic structure of a page HTML5
Returning to our text editor (in my case Notepad + +). I invite you to write or copy and paste the source code below in Notepad + +. This code corresponds to the base of a web page in HTML5:
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Title </ title>
</ Head>
<body>
</ Body>
</ Html>
I put spaces at the beginning of some lines to "shift" tags. It is not mandatory and this has no impact on the display of the page, but it makes the source code more readable. This is called indentation. In your editor, just press the Tab key to get the same result.
Copied to Notepad + +, it should look like this
 |
| HTML5 minimal code in Notepad + + |
You'll notice that the tags are opened and closed in a specific order. For example, the <html> is the first that is opened and this is also the last that is closed (at the very end of the code with </ html>). The tags must be closed in the opposite direction of opening. An example:
-<html> <body> </ body> </ html>: Correct. A tag which is open to the inside another must also be closed on the inside.
-<html> <body> </ html> </ body>: incorrect tags intermingle.
Uh, there could be an explanation of all the tags that you just copied into the editor, sir?
Of course, you asked so nicely.
Do not be scared seeing all these tags at once, I will explain their role!
The doctype
<! DOCTYPE html>
The very first line is called the doctype. It is essential because it is indicating that it is a HTML web page.
It's not really a tag like any other (it begins with an exclamation point), you can consider that this is sort of the exception that proves the rule.
This line was once the doctype incredibly complex. It was impossible to detain her head. For XHTML 1.0, you had to write:
<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.
As part of HTML5, it was decided to simplify it, to the delight of webmasters. When you see a tag short doctype (<! DOCTYPE html>), it means the page is written in HTML5.
The </ html>
<html>
</ Html>
This is the main tag code. It embraces the entire content of your page. As you can see, the closing </ html> is located at the end of code!
The header <head> and body <body>
A web page consists of two parts:
-The header <head>: this section provides some general information about the page like its title, the encoding (for the management of special characters), etc.. This section is usually quite short. The information in the header are not displayed on the page, these are just general information for the computer. However, they are very important!
-The body <body>: this is where lies the main part of the page. Everything we write here will be displayed on the screen. This is inside the body that we will write most of our code.
For now, an empty body (discussed below). Consider for cons to both tags in the header ...
The encoding (charset)
<meta charset="utf-8" />
This tag specifies the encoding used in your. Html.
Without going into details, as this can quickly become complicated, encoding indicates how the file is saved. It is he who determines how the special characters will be displayed (accents, Chinese ideograms, Japanese, Arabic, etc..).
There are several encoding techniques with weird names and language used according to ISO-8859-1, 775 OEM, Windows-1253 ... One should however be used today as much as possible: UTF-8. This encoding method is used to display without any problems virtually all symbols of all the languages of our planet! This is why I indicated utf-8 in this tag.
It also requires that your file is properly saved in UTF-8. This is the case most often default on Linux but on Windows, you must tell the software generally.
In Notepad + +, go to the menu encoding> Encode in UTF-8 (without BOM) for your file to be saved in UTF-8 from the beginning. This applies only to currently open file.
For failing to do so for each new file, I suggest you go into the Setup menu> Preferences New Document tab / folder. Select UTF-8 without BOM in the list.
If you have a display problem accents later on your web page, is there a problem with encoding. Make sure the tag indicates good UTF-8 and that your file is saved in UTF-8 (your editor is able to tell you, Notepad + + does in the Encoding menu).
The main title of the page
<title>
This is the title of your page, probably the most important! Every page should have a title that describes what it contains.
It is advisable to keep the title short enough (less than 100 characters in general).
The title does not appear in your page but on top of it (often in the browser tab). Save your webpage and open it in your browser. You will see that the title appears in the tab.
You should know that the title also appears in search results.
