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

Getting started with HTML

Categorías:  Autor: Diego C Martin 

We have already seen the basic structure of an HTML page, now let’s see how to proceed when working with HTML and then the basic tags to start adding content to our pages.

Working procedure with HTML

The first thing to keep in mind is that we write the web pages with HTML in a text editor and we view them in the browser, therefore, it is normal to have the document open with both applications at the same time, so that when we save the changes in HTML, we just have to refresh the page in the browser to see the changes.

When we save the HTML document with the extension .html, that file is associated with the predefined browser in the system, so that when you double-click to open it it will open in the browser.

To open it also with a text editor under Windows, we right-click, select the option Open with… and then the desired text editor, such as Notepad.

Summary of the procedure for working with HTML:

  1. Create a new text document, (.txt).
  2. Rename or Save as… with the name we want followed by the extension .html.
  3. Open the HTML file in your browser.
  4. Open the HTML file in a text editor.
  5. When making changes with the text editor, we save and in the browser reload the page (F5 key).

Recommended code editors for HTML

Web editors are applications that help us when writing code for web pages.

We can do it with any text editor, such as the Windows notepad, but the truth is that a specific editor helps us a lot, since it puts different colors on the labels and reserved words to facilitate reading, they have autocomplete systems, and endless other functions that undoubtedly make our lives much easier.

Some examples of free and cross-platform web editors:

  • Atom : From the creators of Git. It has a huge number of plugins and is very focused on editing code with web programming languages such as JavaScript, beyond HTML and has functionalities that allow us to connect with Git and GitHub.
  • NotePad++ : Apparently simple, very light, fast and effective. It also has a great functionality to record procedures, similar to Excel macros.
  • Bluefish : Similar to the previous one, well known and widespread for Linux users.
  • Brackets : It is from Adobe, and they have managed to compete with Atom with a robust and complete editor also supported by a large number of additional components. It is more design-oriented (HTML + CSS) than Atom.
  • Visual Studio Code : The one that has crushed everyone by far in terms of use. It is from Microsoft and we must recognize that they have done a very good job. It serves for almost everything, has a huge amount of extensions and aids and connects with almost any platform.

Code Playgrounds

Additionally, in recent years the so-called Code Playgrounds have proliferated, web applications that include a code editor and interpreter in which we can directly see the results of those we program.

Well-known examples are JSFiddle or CodePen, with which you will see that I embed examples in other articles in this sequence of articles about web design.

Basic HTML tags

Line break

All the text that we have in the body of the page appears on the same line, it does not matter if when we create the page we have each word in a different line, (that is, a browser does not take into account the ENTER key).

To indicate to the browser that we want it to continue in the next line we must do it with the HTML element

When the label appears
the browser continues with the text on the next line. It is one of the few HTML elements that has no closing clause.

Here is an example of a page showing car brand names, one per line:

Mercedes Benz<br>

As we can see we have only added the br> tag <every time we want to start a line. Keep in mind that it is the same if we place the br label on the same line or on the following:


it’s the same:


To remember the names of the HTML elements it is good to see what the full word is:

<br> comes from break.


A paragraph is a phrase or set of sentences referring to the same topic. Everything we lock between the brands

Within a paragraph there may be line breaks.

Let’s see with an example how to have two paragraphs:

<p>Lorem ipsum dolor sit amet, consectetuer.</p>

<p>Cum sociis natoque penatibus et magnis...</p>

We have in this HTML page two paragraphs, when the browser interprets this page, it separates the contents of the two paragraphs with a horizontal space.
When we modify the browser window the paragraphs are automatically placed according to the width of the window.

To remember the name of this HTML mark:

<p> comes from paragraph.

Note: The Latin texts in this example have been generated with an automatic fill text generator. There are many, Blind Text Generator is a very useful one since it allows us to configure the number of words and paragraphs that we want to obtain.

HTML titles or headers

Other HTML elements widely used are to indicate the titles, for this we have the elements:

The highest level title is H1. Depending on the importance of the title, we will use some of these HTML elements, creating a hierarchical structure as in a numbered scheme of several levels.

They require a closing clause.

Example of a page that contains a first-level

<h1>Data Types</h1>
It is used to store character strings. A chain
It is placed between quotes (single): 'Hello'.<br>
Used to store integer numeric values, from -200..

Each title always appears on a different line, it does not matter if we write it often in the file, that is, the result will be the same if we do:

<h1>Data types in MySQL</h1>

or this:

<h1>Data types in MySQL</h1><h2>varchar</h2>

The browser arranges each title on a new line.

Remember that HTML has no responsibility to indicate the size of fonts. The browser will define the font size according to the level of title that we indicate. The largest size is level 1.

<h1> comes from heading

HTML comments within the document

We may include comments within our code. The comments are not seen in the browser, they serve to explain what we developers do internally.

<!--This is a comment
<B>As it is a <i>comment</i></B> it will not appear...
<p>Not even HTML tags will have value</p>-->

It is highly recommended to get used to using comments to increase the readability of our code and thus facilitate its manipulation by third parties or by ourselves in the future.

Emphasis with bold and italics

Emphasizing something means enhancing the importance of a thing, for example a word or set of words.

To emphasize texts we have the elements and <em> and <strong>

The element of greatest strength of emphasis is strong and followed by

Let’s see an example of the use of these two HTML elements:

<p><strong>Data types</strong> in MySQL</p>
<p><em>TEXT</em>: To store text we use strings...</p>
<p><em>NUMBERS</em>: There are a variety of numerical types
to represent integers, negatives, decimals. </p>
<p><em>DATES AND TIMES</em>: to save dates and times you have
of several types: date (date), datetime (date and time),
and timestamp.</p>

We can see that the syntax for the strong element is:

<strong>Types of data</strong>

Most browsers display the text emphasized with strong with a bold text and for the em element they use italics.

Another important thing that we can note is that these HTML elements do not produce a line break like the title ones (h1,h2 etc.)

To remember the name of these HTML elements:

<em> comes from empathize which means emphasis.

<strong> comes from strong which means strong.

Title tag, the title of the HTML document

is one of the most important labels and exceptionally is located in the head:

<!DOCTYPE html>
<title>Page title</title>
Body of the page.

The title tag serves to indicate the title of the page and is also what is displayed in the browser tab. Normally the pages have the name of the website or brand followed by the name of the page.

From now on do not forget to include the title on all pages. It is also of vital importance in SEO.

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