If you work or are familiar with technology and the internet, you’ve probably heard about HTML. But, after all, what is this HTML?
Created by the British Tim Berners-Lee, the acronym HTML stands for Hypertext Markup Language. The HTML is the basic component of the web , it lets you insert the contents and establish the basic structure of a website. Therefore, it serves to give meaning and organize information on a web page. Without this, the browser would not be able to display text as elements or load images and other content.
Hypertexts are sets of connected elements. These can be words, images, videos, documents, etc. When connected, they form an information network that allows data communication, organizing knowledge and storing information.
When visiting a simple web page, you can see that there are different distributions and sizes for titles, paragraphs, images, videos and any other element. This structure is established through HTML. At the beginning of the web, it was common to find sites containing only simple texts and images, with basic structure and without stylization. However, nowadays, you will hardly find sites that have only HTML elements. Therefore, we can consider HTML to be the “skeleton” of your page.
Imagine then that in addition to the skeleton, it is necessary to have the body. For this, we have CSS and JavaScript languages, which together with HTML, form the basis for all current websites. We will see later what these languages mean.
Through an HTML document, that is, a document with the extension. html or .htm ., the browser reads the file and renders its content so that the end user can view it. The .html files can be viewed in any browser (such as Google Chrome, Safari, or Mozilla Firefox).
Generally, a website consists of several HTML pages , for example: a website that contains three pages (a homepage, a contact page and a product page) will receive at least three distinct .html documents , one for each page of the website .
The code can be written using any text editor, such as the notepad itself. Each page consists of a series of tags (also called elements) that can be considered the building blocks of the pages. Therefore, these blocks are the way in which HTML marks content, creating its hierarchy and structure, divided between sections, paragraphs, headings, and others.
What are tags
Through any text editor, such as Sublime Text, NotePad ++ or even notepad, it is possible to create a document with the extension .html that will be rendered by browsers.
As explained earlier, this document consists of a series of tags. Tags are codes that define the entire structure of the page, such as its size, font, colors, line breaks, etc. Most elements of the HTML document are composed of an opening structure and a facade structure, such as
Let’s say you wanted to write a paragraph, then we call the <p> tag , we write the paragraph and finally we close the tag with</p> :
<p> My first paragraph.</p>
That way, when you save the file with the extension .html and open it in a browser, you will see the paragraph written on the browser screen.
There are currently more than 140 tags, but some of them are hardly used. Among the most used we have:
- <head> - place to declare all information, such as your page's title and metadata;
- <title> - defines the title;
- <body> - place to declare all elements that will make up the body of the page;
- <h1>, <h2>, <h3>, <h4>, <h5> and <h6> - Tags to define a title and subtitles, ranging from 1 to 6, with h1 being the most important title and h6 being the least important ;
- <p> - Tag to define a paragraph. +;
- <a> - Link tag, next to the href = ”” attribute is responsible for the main feature of the web;
- <header> - defines a header;
- <section> - define a section;
- <article> - defines an article;
- <div> - define a division;
- <footer> - defines a footer;
- <nav> - defines a navigation area (such as menus);
- <table> - define a table;
- <ol> - define an ordered list;
- <ul> - defines an unordered list;
- <li> - defines a list item;
- <form> - define a form;
- <input> - defines the form fields;
- <textarea> - defines an area for the user to type text;
- <button> - define a button;
- <img> - allows you to insert an image into your document.
Now that we know how it works and what its main tags are, let’s understand how the basic structure of an HTML document is formed.
The document must contain a declaration informing the doctype, that in the case of HTML5, it is enough to declare with the element <! DOCTYPE html>. After that, we start our document with the <html> tag that should be closed at the end of the document with </html>. Subsequently, our document should have an
element that will receive all the basic information on your page, such as the title, links to external elements, metadata, etc. We then declare a page title using the <title> tag . Finally we open the <body> tagwhich consists of the body of our document, where all the elements that will be rendered on the browser screen will be. Thus, we have the basic structure of our html document:
<! DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
In order to avoid rendering errors or character incompatibility, we must also declare the keyboard default. In most parts of the world UTF-8 standard is being used. Thus, using the <meta /> metadata tag , we will declare within a charset attribute that our default is UTF-8. So we have the basic structure of our HTML document:
<! DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset = "utf-8" />
</head>
<body>
</body>
</html>
As explained earlier, at the beginning of the article, HTML will serve to mark all elements of our page. It works like a page skeleton. However, HTML alone is limited to this function, even in its most current version.
Therefore, we can define that a web page is composed of three layers. The HTML form the first layer that presents the content to the user. The CSS will form a second layer that will shape the elements. Finally, Javascript will form the third layer that will add dynamic behavior to the page.
In order to shape our document, it is necessary to work with the cascading style, CSS. With this we can style all our elements, applying spacing, colors, positioning, font size, font families, borders and other visual effects that shape the document. For a long time, the style was applied directly to the html tag . Nowadays, it is possible to use a space inside your html document , through the <style> </style> tag that must be declared inside the head, where it will contain all the CSS. Likewise, you can use an external style sheet, usually with the extension .css, which makes the code much cleaner and more organized. Currently, the most recent version of CSS is CSS 3. We can consider that CSS is the body of our document.
JavaScript, unlike HTML and CSS, is a programming language, and together with these, it is able to give life, generate movement to the website. It is what will make the elements more dynamic, as it is JavaScript that allows the execution of scripts on our page. That way, when the user is browsing a page and performs an action that results in a behavior on the page, it will most likely be a script that will execute that behavior. Therefore, JavaScript can be compared to the movement of the body (and skeleton) of our page.