Basic structure of a document

In this chapter will be shown  how to write a HTML document, in a basic way.

The first thing is to declare the document, the HTML documents will be read by the browser and you have to declare the document type(HTML) and version(HTML5). If your declaration is wrong the browser will read your mistakes.  In addition you can make a correct declaration of the HTML version but write the document in another version, It will create mistakes when a browser read It.

Each HTML version is declared in a different way, but in this course only will be mentioned HTML5, this is due to HTML5 is the last version and there are not reason to learn HTML4.1 when the actual version is HTML5.An HTML5 document declaration is like this:

<!DOCTYPE html>

Then you must declare the idiom and country, for example:

<html lang=”Es-es”>

Then you must write the head: It is empty for now.

<head></head>

Now you must write the body:

<body></body>

…and the last tag is for keep the document closed.

</html>

 

In this moment there are wirtten the next:

<!DOCTYPE html>

<html lang=”Es-es”>

<head></head>

<body></body>

</html>

Learn a little about the elemental tags

The first one declares the HTML document and version.

<!DOCTYPE html>

Then the idiom and country:

<html lang=”Es-es”>

The <head></head> will be used to embed another tags;

<head>

<title>Document1</title>

<style></style>

</head>

In the head tag you can introduce more tags and meta tags, It will be shown in another chapters of the HTML course, the tags shown are the most basic tags. The <title>Document1</title> with the Document1 name will not be shown in the webpage opened by the browser but It will appears above, near the favicon but there is not a favicon in this document.

En el Head se puede introduccir más etiquetas y metadatos que se irá viendo a lo largo del curso de HTML, las aquí expuestas son las más básicas, simplemente la etiqueta <title>Documento1</title> con el nombre Documento1, no se verá al abrirlo con el navegador dentro del documento en sí, sino que se verá arriba de todo, junto con el Favicon del documento, que en este caso no tiene.

The <style></style> tags is used for introduce CSS styles, fot this reason It will be empty in this chapter.

Almost iat the end you must introduce tags inside the body(<body></body>):

For this example will be inserted two tags indise ths body:

<body>

<h1>Title of first head</h1>

<p>This is a paragraph </p>

<p>This is another paragraph</p>

</body>

At the end our document will be like this:

<!DOCTYPE html>

<html lang=”Es-es”>

<head>

<title>Document1</title>

<style></style>

</head>

<body>

<h1>Title of the first head</h1>

<p>This is a paragraph </p>

<p>This is another paragraph</p>

</body>

</html>

Try it yourself, you can copy the last text and paste It into your text editor like .html, then open It by  a browser and you will see the result. In adittion you can change the text and play with it.

Very important points:

1. In HTML the lowercase and capital letters are important. You must use lowercase in any case except to declare the HTML version how we have saw. <!DOCTYPE html>
2. The HTML tags are opened and closed, if you forget to close any one the browser will read It and will apply It until find a closed tags. For example if you write <p><p>, the browser will apply the paragraph until a </p>. It is not necessary to say that a HTML tag without being closed will result in mistakes.
3. The browser read a HTML document from above to below, from right to left, like a western person read.
4. An example of unclosed tag is <hr>. Copy that tag and introduce It between the paragraph, then open the document again or refresh the page and see the changes.