What is HTML – Definition and Meaning of Hypertext Markup Language?

HTML is one of the foundations of web development. HTML is present on all internet sites, blogs, or online stores every time you browse the internet.

This language is interpreted by your browser and is the basis for the content of the pages.

If you are interested in learning more about this language, I will talk about its origin, standards, and the HTML elements that compose it. I’ll also show you how you can add or edit HTML in WordPress.

What is HTML?

HTML is an acronym for HyperText Markup Language that, takes the meaning of HyperText Markup Language. At first, this name may sound like something very technical, so I am going to explain in detail the purpose of its name:

• HyperText: Hypertext means a text containing links or links to other readers. For example, when you browse a web page and click on a link, hypertext. As additional data, the concept of hypertext was coined by Ted Nelson around 1965.
• Markup language: A markup language contains guidelines for writing or encoding our texts. These rules, which mark this type of language, can affect how the structure of the texts or their format should be.

When starting with HTML, you can make one mistake referring to it as a programming language. This statement is wrong because HTML is a markup language, not a programming language. If you want to save yourself sidelong glances from purist programmers, avoid saying, “I’ve written page with HTML.”

Now that you have understood these concepts, you can better understand the meaning of HTML. Before continuing with the technical definition, I would like to explain to you with an analogy the implication that HTML has in web development.

If a web Html page were a person, HTML would be the skeleton,  in charge of building and positioning the head or defining how many arms or legs that person has. If you wanted her to be blonde or brunette, you would use the CSS language, which is in charge of styling the HTML you build. Finally, programming languages ​​would be responsible for giving dynamism to the person, giving them movement and skills.

Basically, HTML would be the foundation of web development.

Currently, HTML is the standard markup language used for creating web pages. This language provides a series of HTML elements that define the structure of a website and can be interpreted by our web browser.

The HTML source

To talk about the origin of HTML, we must mention Tim Berners-Lee, who is considered the creator of this markup language. 

Collaboration is essential in this industry, and that’s why he came up with a new way to share HTML documents. It consisted of a digital text format where you could go from one page to another with just a click, having text links that connected directly with other relevant documents or research papers.

Tim Berners-Lee began developing the HTML markup language and the entire system that made it work with that purpose in mind. After several prototypes, he created what we know today as the World Wide Web or global computer network.

HTML standards

When HTML was developed, it was very well received, so many companies saw the potential and began to develop and market what we now know as web browsers.

This fact gave rise to a big problem for web developers since each browser interpreted web pages differently.

To try to solve this problem, the World Wide Web Consortium emerged. Better known as W3C, it appeared. This organization set itself the goal of standardizing everything related to the World Wide Web ecosystem that Berners-Lee invented.

Thus arose the first version of the HTML standard, called HTML 2.0. Thanks to this, web pages became compatible, but this standard was scarce in content. Hence, current browsers such as Netscape Navigator or Internet Explorer started to create HTML tags that were only interpretable by their browser.

It has subsequently evolved into several versions. Today, the standard used corresponds to the understanding of HTML 5, and the similarity in the interpretation of the HTML language between browsers has increased considerably.

If you want to consult all the available tags and study the HTML language in more depth, you can consult the W3CSchools website.

You can also find out if a certain web page complies with the standards or not through the W3C validator.

HTML tags

The elements that HTML is made up of are called tags. Today there are about 140 that can be used.

These components are embedded in an HTML document. Most are composed of an opening tag and a closing tag, although there are elements that lack a closing tag.

These tags allow web browsers to understand the content of a page and interpret it in a certain way.

In addition, some of them give the content a semantic and hierarchical context, so it is essential to know how to use them correctly if we want to structure our website optimally.

Using a good structure, hierarchy, and correct practices of hyperlinks will help you position your website correctly since the major search engines, such as Google, take this aspect into account for their results.

This task is usually carried out by an SEO professional, who carries out a study of the contents of your web page and applies the measures that he sees fit. For example, you can optimize the hierarchy of the titles of an article on your blog.

HTML tag structure

An HTML tag is composed of:

• Opening tag: Indicates the beginning of the title and is written between the symbols less than “< “and greater than”>.” Between the start opening or opening, the attributes or properties of the label will be arranged.
• Closing tag: The end of the title is indicated. 
• Its syntax is similar to the opening tag, except that the beginning sign, the less than sign «,» is followed by a slash, «/.
• It is not always necessary to indicate the closing tag. In some elements, it will suffice to mark the label’s opening.
• Previously, when an HTML element did not need to specify a closing tag, it was indicated by adding a slash in the opening tag just before the greater than ‘/>’ sign. This practice is currently deprecated.
• Content: The content is what we find between the opening and the closing.
• Attributes: Attributes are properties that tags can have. Some attributes are exclusive to certain tags. Attributes are defined with the attribute’s name, followed by the equals sign “=” and its value enclosed in single or double quotes.
• In some attributes, we don’t need to assign a value as such, and it will be enough to write the name of the fact.

Classification of tags in HTML

HTML provides us with a multitude of tags that we can use to create the structure of our web page. In addition, through them, you can insert images or display a paragraph of text.

Next, I will list some classified labels to make it easier for you to know and understand them.

Structure tags

Some structure tags give our HTML a semantic sense. They will allow you to organize and prioritize the content and show some of the most basic elements.

Two structure tags are worth mentioning in more detail: the head and body tags.

The head tag contains metadata or information about our pages, including the title, language, and style sheets. At the same time, the body tag contains the main content of our page.

Some examples:

• <body>: Defines the body of the document.
• <aside>: Represents a sidebar.
• <footer>:Indicates the page footer.
• <header>: Represents the header of the document.
• <form>: Contains a web form.
• <p>: Defines a paragraph or text.
• <h1> to <h6>: Allows for define the titles and their hierarchy.

metadata tags

Metadata tags are texts that are not displayed by the browser. Its functionality is based on providing information. So that, for example, search engines can understand what the content of a page consists of, you can provide additional relevant information. An example of this tag could be information about the author:

1 <meta name=”author” content=”Pepito Perez”>

Here are some examples:

• <meta>: Provides information about the content of the document.
• <style>: Indicates the styles (CSS documents) that the page must insert.
• <title>:Defines the title of the document.

form labels

A form contains a series of tags that the user can interact with. They can be dropdowns, text boxes that you have to fill in, or options that you can choose. All these elements are inside the <form> tag.

Some items you can use are:

• <input>:Short text input. By using its attributes, we can limit the data that the user can enter. Additionally, we can indicate the input type, such as a password field.
• <textarea>: Text input that can contain many characters. You could use this tag, for example, to have the user enter a description.
• <select>: This allows you to create dropdowns with certain predefined options.

format tags

They are used in your HTML document to add some formatting to an element; for example, formatting text as bold.

Some examples are:

• <b>: Makes the text bold.
• <strong>: Highlights a text.
• <i>: Converts the text to italic style.
• <output>: Represents the result of a calculation.

list tags

As the name suggests, they are used to display lists.

Some of the list tags are:

• <ul>: Represent unordered lists. Each element begins with the <li> tag by default; it will be displayed as a dotted list.
• <ol>:Represent ordered lists. You can use different numbering, such as decimal or alphabetic. Each element begins with the <li> tag.

table labels

They are used to display tables. They are contained by the <table> tag.

Some examples:

• <tr>: Defines a row of the table.
• <th>: Determines the header of the table.
• <td>: Indicates a column of the table.

script tag

The <script> tag defines a code that will execute. Normally this tag contains Javascript code. If we add the src attribute, it will load the script that includes that attribute.

Embedded content tags

The <embed> tag defines a container to display external content.

Some examples of such labels are:

• <audio>: This allows you to load audio.
• <video>: This will enable you to upload a video.
• <img> : Load an image. We can use the attribute to load different images based on their size and have them load based on the size of the screen.

Add and edit HTML code in WordPress

WordPress is the most widely used open-source CMS in the world. With this information in mind, you can imagine the number of plugins and themes at our disposal. However, there may be times when you need to insert or edit some HTML code to make it exactly the way you want.

WordPress provides several options that you can use to add or edit your custom HTML code, from specific blocks to widgets.

Next, I will show you different ways to do it.

Using the Gutenberg editor

The easiest and fastest way to insert HTML code is through the custom HTML block. You should remember that not all tags are allowed for security reasons, although you shouldn’t have any problems with the most used ones.

Aside from this WordPress block specific to HTML embedding, most partnerships allow editing of their code. For example, we can see this option in an image block.

The steps to deploy this option are simple:

1. Click on the block you want to edit.
2. Again, click on the three dots.
3. Select the “Edit as HTML” option. Selecting this option will display the code contained in the block.
4. Repeat the same steps but select the “Edit visually” option to edit the block again.

The last option with which you can work with the HTML code from Gutenberg can be intimidating at first since we will be working with the entire page or posting content in HTML format.

To access the code editor, we must follow these steps:

1. Edit a post or page.
2. In the upper right corner, click on the three dots.
3. Select “Code Editor.” Once selected, you will see that the content of your page is displayed as a single block of code.
4. To go back to editing visually, repeat the same process but select “Visual Editor.”

Using the classic editor

If your WordPress installation uses the classic TinyMCE editor, you will be able to view and edit your content in HTML format without much complication.

To display the content in HTML, you must follow these steps:

1. From the classic editor, select the tab that you will find in the upper right corner that indicates “HTML.”
2. To return to the visual editor, select the account where it says “Visual.”

Through the widgets

Through the widgets, we can insert HTML code very quickly. It is especially useful for inserting custom HTML code in areas such as the footer or sidebar of your website.

To do so, you must follow the following guidelines:

1. From the WordPress side menu, in your admin panel, go to Appearance->Widgets.
2. Click the add icon.
3. Find the custom HTML block and drag it to the desired widget space.

Using the theme editor

Another alternative would be to use the WordPress theme editor. It is a quick way to customize your theme templates or plugins.

Before considering editing the templates, you should take into account these two considerations:

1. Have a child theme installed so that your modifications are not deleted in the updates that your article or plugins may receive.
2. Take special care when editing these templates. A bad edition can break your web page. It is advisable that, if you do not have much experience in editing templates, you make a backup copy. You can use the JetBackup tool to restore a single file without restoring the entire backup in our WordPress hosting.

To access the theme editor, you can follow these steps:

1. In the WordPress menu, go to Appearance-> Theme Editor.
2. In the right column, just below Theme Files, select the template you want to edit.
3. Once selected, you can start editing the file you wish to directly from WordPress.

Conclusion

As you have been able to read, HTML is a mandatory learning language if you want to have a deeper understanding of the structure that makes up web pages.

It will allow you to expand your skills in development or SEO, making you grow as a professional in the sector.