Logotipo horizontal de Diego C Martín colores invertidos, blanco y naranja para findo negro

Basic structure of an HTML page

Categorías:  Autor: Diego C Martin 

HTML instructions are enclosed between the characters: and we call them tags.

Most HTML tags require a start mark, opening clause, and an end clause, closing clause.

The basic structure of an HTML page is:

<!DOCTYPE html>
   Body of the page.

An HTML page is a file that usually has html characters as an extension. For example we can call our first page with the name: page1.html

These are the basic elements that every HTML page must carry.

Considerations for an HTML page

The first tag is DOCTYPE, which must appear and serves to inform the browser about the html version with which our page is encoded. The one indicated in the example is that of HTML5, and it is the simplest if we compare it with the previous ones.

  • The page then begins with the tag: and ends with the tag:
  • Closing clauses have the same name as opening clauses, plus the character /

An HTML page has two very well defined sections that are the header:


And the body of the page:

Body page
  • All the text that we have within it appears within the browser as we have written it.
  • All pages have at least this structure: header and body.

Another important thing is that the HTML language is not sensitive to upper and lower case, that is, we can write it as we like, it also does not require that we have each mark on one line (we could even write the entire page in a single line! which is not convenient since we are the ones who will have to modify it at some point).

Remember that within the HTML elements we can put whatever we want. Img, tables, lists, etc. As we will develop in the rest of related articles.

Case Study:

Copy the above code with the basic structure of the page into a text file and then change the extension from .txt to .html.

Note: The file extension may not be visible by default on your computer, this can be changed in the Windows folder options.

Once that is done, the page opens in a predefined way with the web browser

To re-edit its content we will have to select Open with.. and use a text editor such as notepad.

Code editors for HTML

Normally, in web design we use code editors that facilitate the writing of the languages of development and web design.

One of the most popular currently is Visual Studio Code, although this can be a bit heavy, since it is designed for the use of other programming languages such as JavaScript. If you just want to edit HTML and CSS there are many others much lighter like Notepad++ or Bluefish.

Leave a Reply

Your email address will not be published. Required fields are marked *

Artículos de la misma categoría

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram