As a web developer, one of the fundamental languages you must master is HTML (HyperText Markup Language). HTML provides the basic structure for creating web pages and is the key language for any front-end developer. In this article, I will show you how to correctly structure an HTML document and give you some tips and best practices for doing so.
The basic structure of an HTML document
Before you start writing HTML code, it is important to understand the basic structure of an HTML document. An HTML document mainly consists of two parts: the tag <head> and the label <body>.
The label <head> It is used to include metadata about the page, such as the title, links to CSS style sheets, and JavaScript scripts. This section is not visible to users and generally does not contain visual content.
The label <body> It is where all content visible to users is placed, such as text, images, and other multimedia elements. This is where users interact with the website.
Lang attributes in HTML
One of the important aspects to keep in mind when structuring an HTML document is the use of the lang attribute. This attribute is used to specify the primary language of the page. It is especially useful for optimizing accessibility and SEO.
You can add lang attribute to the tag <html> to indicate the main language of the page. For example, if the primary language is English, you can add the lang attribute as follows:
<html lang="en">
Similarly, if the primary language is Spanish, the lang attribute would look like this:
<html lang="es">
The complete basic structure
The basic structure of a complete HTML document would look like this:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page title</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Main title</h1>
<p>Page content</p>
</body>
</html>
In the previous structure, the tags are included <meta> to define the character encoding and initial scaling of the page. Also included is the label
Where should I place the link to a CSS style sheet in an HTML document?
The link to a CSS style sheet must be placed inside the tag <head>, using the tag <link>. For example, <link rel="stylesheet" href="styles.css">.
English 
Spanish