Assemble a complete web page with the doctype and the html, head, meta and body tags.
Open this lesson in KodokonSo far, you have written fragments of HTML. A real web page, however, always follows the same complete structure, a bit like a formal letter always has a header, a body and a signature. Everything starts with the <!DOCTYPE html> declaration, written on the very first line: it tells the browser that the document uses modern HTML. It is not a tag - it is a simple declaration, and it is never closed.
Next comes the <html> element, the root of the page: everything else goes inside it. Its lang="en" attribute states the language of the document. It contains exactly two children. First <head>: the page's identity card, with information that is invisible to the visitor. Then <body>: all the visible content, meaning your headings, paragraphs, lists, links, images and tables.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first page</title>
</head>
<body>
<h1>Welcome to my page!</h1>
<p>It contains everything I have learned.</p>
</body>
</html>Let's look at the contents of the <head>. The self-closing tag <meta charset="UTF-8"> specifies the character encoding: it is what guarantees that accented characters (é, à, ç) display correctly. The <title> tag sets the page title, shown in the browser tab and in search results. A second <meta> tag, known as the viewport tag, is often added so the page adapts to the width of phone screens.
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>My first page</title>
</head>You can try it right now, without installing anything. Open a simple text editor (Notepad on Windows, TextEdit on Mac in plain-text mode), copy the complete skeleton, then save the file with the .html extension, for example index.html. Then double-click the file: it opens in your browser, and your first page appears.