HTML for Beginners: Basics to Start From

In this article, we’re going to dive into the basics of HTML. We’ll explain what it is and what are the 3 basic components to create an HTML. Let’s go!

HTML is the language with which the content of web pages is defined. It is a set of labels that serve to define the text and other elements that will create a web page.

HTML Editors

This language is written in a text document, for this we need a text editor. The file where the HTML code is contained is a text file that has a .html extension. So when we program in HTML we will do it with a text editor and save our works with a .html extension, for example: “myfirstweb.html”.

Here are some examples of editor that you can explore:

• Atom
• Sublime Text
• Visual Studio
• Notepad++
• NetBeans

So far we already have an idea about what HTML does but we still don’t know how tags work. For this we are going to imagine that we have to create an essay on some subject, we will consider that the essay will be our website and the way in which an essay is ordered is by a title, introduction, development, and conclusion, this exercise tells us the structure it carries, that is, the way in which the text fits in our essay.

HTML Tags

HTML tags are text fragments surrounded by angle brackets <>, which have specific functions and uses and are used to write HTML code.

Tags or tags are the way to write HTML code.

In HTML there are opening tags and closing tags, they have the form: <tag> </tag>. Where <tag> is the opening tag and </tag> is the closing tag indicated by the diagonal. HTML has a wide variety of tags defined for different uses, not all tags have their corresponding closing tag, here are two examples:

Tags with close tags:

The opening and closing labels are the same with the only difference of the diagonal “/”, the closing label is necessary to limit the field of action of the label, for example, the <p> label indicates the beginning of a paragraph of text and once the opening tag is written, the browser will take as paragraph all the text that is found after that tag until it comes across the closing tag </p> and so on with the other tags depending on the function of each.

Tags without close tags:

This second group of tags does not need a closing tag because its scope is limited to the place where the tag is included.

Returning to the first example, we see the tag that serves to or show a line break, the browser does not need to be told how far to “limit” the scope of this tag because the line breaks are that “a change of line” if we want more than one line break we write several in a row, the second <img> tag is used to insert an image on the page, it doesn’t need a closing tag either since the tag must be placed in place where we want to insert the image, but it takes something else to complete the label since a simple “img” does not tell us anything about the image, for this there are attributes.

HTML Attributes

The labels have attributes that help us to specify certain details of that label, for example, to specify a text or background color, the width and height of some element, its alignment, the location of a document, image, etc.

In the second case of the previous example we saw that <img> serves to insert an image, but for the tag to work, it needs its attributes, through these, we will use the tag.

Attributes are written inside the tag as follows:

Now returning to the example of the <img> tag it is necessary to state in the form of an attribute the address and the name of the image that we want to be displayed, this as follows:

With the above, our <img> tag can now display the desired image.

There are specific attributes for each tag, in this example, we show the <img> tag with the least required, but it can carry more attributes, which I will not mention here because it is not the topic to be discussed, but if it is necessary to clarify that to any HTML tag You can add attributes. Tags and their attributes are the basis of the HTML language, and through these is how a web page is built.

HTML Attributes:

That’s it for now!

In conclusion, creating HTML is simple, I invite you to further investigate this language, I recommend you learn how to write in HTML as it is a beginning to a world of creation and discovery. Enjoy!