HTML Syntax

Description of the syntax used in the HTML language, as well as the structure that the basic HTML document will have.

HTML is a “markup language”. It bases its syntax on a base element that we call mark, tag or simply label. Through the labels we define the elements of the document, such as links, paragraphs, images, etc. Thus, an HTML document will be made up of text and a set of tags to define the role played by each content within the page. All this will help the browser to know how the text and other elements on the page should be presented.

There are tags to create bold, paragraphs, images, tables, lists, links, etc. So, learning HTML is basically learning a series of tags, their functions, their uses and knowing a little about how a basic document should be built. It is a very simple task to face, within the reach of any person, since the language is very understandable by human beings.

Anatomy of an HTML tag

The tag frequently has two parts, its opening and closing parts, and both parts are enclosed between “less than” and “greater than” symbols. We will see it below.

Opening

The start of a tag occurs as follows:

Closing

The end of a tag is produced in a similar way to its opening, except by adding a slash:

Note: For reasons of text format, at .com, when we are not writing a code and we want to refer to a label, we write it with capital letters. The codes are easily differentiated because they have their particular style. Where we write the labels without the greater than and less than and with capital letters is in the text paragraphs.

Everything included inside that label will undergo the modifications that characterize this label. For example:

The B tag defines a bold text. If in our HTML document we write a sentence with the following code:

This is in bold

We will see that the words “This is in bold” appear in bold. It’s that easy.

Another quick example. The P tag defines a paragraph. If in our HTML document we write:

Hello, we are in paragraph 1

Now we have changed the paragraph

As a result we would obtain two paragraphs with those texts. In HTML, paragraphs are separated by a double line break. They would look something like this:

Parts of an HTML document

In addition to all this, an HTML document must be delimited by the HTML tag. Within this document, we can also distinguish two main parts:

The header, delimited by the HEAD tag, where we will place informative tags, such as the title of our page. The content of the header does not usually appear in the body of the page, but it is used by browsers and other systems to find useful information to understand and process the document.

The body, flanked by the BODY tag, which will be where we will place our text and images delimited in turn by other tags like the ones we have seen.

The output of a basic document has the following structure:

This is the body of my first HTML page

This second paragraph is also part of the body

Note: This basic document is still missing some important things that we don’t want you to ever forget. However, we will talk about them in the following article, dedicated to .

Uppercase or lowercase is irrelevant when writing labels

In HTML, upper and lower case are irrelevant. It means that the labels can be written with any type of combination of upper and lower case letters. However, it is advisable to get used to writing them in lowercase since other technologies that can coexist with our HTML (XML for example) are not so permissive and it never hurts to practice good habits from the beginning, to avoid trivial errors in the future.

Line breaks in HTML

Another important thing to know about basic HTML syntax is that line breaks don’t matter when interpreting a page. A line break will simply be interpreted as a word separator, a blank space. That is why to separate lines we need to use the paragraph tag commented before, or the BR tag which means a simple line break.

This is a line
This is another line Now, even though I’m apparently typing on another line, you won’t see the line break because I haven’t separated it by the BR (or P, or whatever tag produces the line break

Note: The BR label does not have its corresponding closure. It is a detail that may have caught your attention. We will return to this later.

It is a detail that shocks at the beginning of using HTML, but one that you quickly get used to. We’ll be seeing examples throughout the , so don’t worry about it for now, just keep reading.