When you enter news sites, social networks, banking systems, among others, we have several elements that are available on the screen that enable user interaction.
But have you ever stopped to think about how all this was built?
One of the professionals responsible for building a website is the front-end developer, who transforms a layout made by the UX/UI design team into code using figma.
Technically, building a website is done through several technologies, and one of them is HTML.
In this article, you will learn what HTML is and what it is for and how it can be used.
What is HTML?
As it is a technology used to develop websites, it is common to think that we program in HTML. An important note is that HTML is not a programming language, but a markup language.
Programming languages are used to create algorithms, manipulate variables and data structures. HTML, the English acronym for Hypertext Markup Language, structures and formats the content of web pages.
To be able to build a project with this technology, you need a file with the format “.html”, so you can open it in a browser, which will interpret the source code to show the elements on the screen.
Anatomy of an HTML file
The anatomy of an HTML file can be interpreted as a tree.
We have the root, which is the element, and from there we can declare new elements (which are like branches) that can be interpreted as children and consequently, it is also possible to create parent elements. Furthermore, elements that share the same row of origin can be called siblings.
The anatomy of an HTML element
The anatomy of an HTML element is constructed by opening the tag that is surrounded by angle brackets.
For example, the paragraph tag
is followed by the content that will be shown and finally, it is closed by a tag that is the same as the opening tag, but with a slash before the element name:
.
The end result is this:
Ex.
<p> O nome do meu cão é Retovem. </p>
Copy after login
e
What can we create with HTML?
With HTML we can create various elements to build a web page with the theme of your choice: Blogs, online stores, news pages, etc.
Some of the main elements we can create are:
- Titles and paragraphs
- Links and buttons
- Images
- Lists and tables
- Forms
- Videos and audios
This markup language offers us a wide range of resources, only a few of which have been mentioned, which can be used according to the needs of the project.
The evolution of HTML
Tim Berners-Lee developed HTML at CERN (European Organization for Nuclear Research) using the NeXTSTEP development environment. Originally, it was a set of tools for managing searches and communication between it.
With the evolution of the internet, the solution gained worldwide attention. The first versions were flexible, and this helped beginners in the field.
Over time, the structure became more rigid, but to this day browsers can interpret web pages created the old way through backwards compatibility.
The specifications were defined in the 1990s. Then the evolution of HTML began, with an HTML working group being created which, in 1995, published the HTML 2.0 version.
At the end of 1997, the HTML 3.5 version was released and with it, the W3C working group began to focus on the development of XHTML in 2000, and we finally arrived in 2014, when HTML was released, which is used until today.
We saw that several versions of HTML were released until we reached the one we use today, but what is the difference between HTML and HTML5?
Differences between HTML and HTML5
In older versions, content structuring was mainly done using generic elements, such as
and .
In HTML5 we have semantic tags that refer to the purpose of the element with the header, footer, separating sections, among others.
In addition, today with HTML5 we have native support for audio, we can embed them directly on the page.
Forms can also cover more types of fields in the version: we now have email, number, date and specification fields available that generate native validations on the elements.
However, it is important to know that HTML is a static version. It is still being developed and improved today, with features and features being added from time to time.
HTML vs XML: Quais são suas diferenças?
Tanto o XML (Extensible Markup Language) quanto o HTML são linguagens de marcação utilizadas na web, mas apesar disso, possuem propósitos e estrutura diferentes.
O XML é projetado para representar informações hierárquicas e legíveis para humanos e máquinas. Não se preocupa com a apresentação visual e não possui estrutura pré-definida. Em vez disso, descreve a estrutura dos dados de forma consistente e portátil.
No Brasil, é o formato mais utilizado na emissão de notas fiscais.
O HTML, é usado para criar e exibir conteúdo em páginas web, é limitado devido à sua estrutura e elementos pré-definidos, focando na apresentação visual e exibição dos elementos no navegador. Ele é comumente utilizado na construção de sites.
Podemos considerar que as principais diferenças são: enquanto o XML é usado para armazenar e transportar dados, o HTML é utilizado para criar páginas web com conteúdo formatado e que possibilita a interação.
Como funciona o HTML?
Como falamos anteriormente, o HTML é utilizado para estruturar e formatar o conteúdo de páginas web através de tags, que são interpretadas pelo navegador.
Para que seja possível essa interpretação, é importante declarar qual a versão do HTML será usada.
Essa declaração é feita através do , garantindo que o navegador interprete corretamente o código.
É importante observar que isso não é uma tag HTML, e sim uma instrução para o navegador que deve ser colocada no início do documento sem espaços entre ela.
Dom
A representação estruturada do conteúdo HTML de uma página web é feita através do DOM (Document Object Modal), que é uma interface de programação que permite o acesso e manipulação dos elementos.
É o DOM que faz a estruturação em forma de árvore dos elementos, em que cada um deles é representado por um nó organizado hierarquicamente de acordo com a estrutura do documento.
Podemos analisar um exemplo de código em HTML para a exibição de uma frase na tela:
<span class="cp"><!DOCTYPE html>
<html>
<head>
<title>Aprendendo HTML</title>
</head>
<body>
<h1>Olá, mundo!</h1>
<p>Este é o meu primeiro projeto HTML</p>
</body>
</html>
Copy after login
A estrutura do DOM seria a seguinte:
Assim, podemos visualizar que o DOM é uma representação em forma de árvore do conteúdo inserido no HTML e que, ao criar um nó para cada elemento, permite que eles sejam acessados por meio do JavaScript.
HTML semântico
O HTML semântico é uma abordagem no desenvolvimento web que enfatiza o uso correto e significativo dos elementos, escolhendo aqueles que melhor descrevem o conteúdo que está sendo apresentado.
Em vez de usar uma
genérico para todo o conteúdo, podemos usar elementos mais específicos, como , , , , , , entre outros, de acordo com a estrutura e a natureza do conteúdo. isso é utilizado para melhorar o SEO ( Search Engine Optimization).
Uma das principais características dessas abordagem é a importância dos cabeçalhos, que são representados pelos elementos
a , sendo essenciais para indicar a hierarquia do conteúdo.
Os sites de pesquisas dão importância aos cabeçalhos, por isso é um ponto de foco.
O texto alternativo em imagens é crucial tanto para a acessibilidade quanto para o SEO. Tendo o cuidado de inserir o atributo “alt” nas tags de imagem, fornecendo um texto descritivo, isso permite que leitores de tela leiam o texto e que sites de pesquisas considerem esse texto ao classificar as páginas.
Still on texts in the context of semantics, it is important to use descriptive links instead of generic ones. For example, instead of building a “click here” link, write text that makes the destination of that link clear.
By applying these practices, you create pages that are friendly to search engines, like Google, and accessible to all users. this results in:
- Better user experience
- Greater audience reach
- More web included.
What is the relationship between HTML, CSS and JavaScript?
Front-end devs use various technologies when developing a website, but whether using frameworks and libraries, the base is always the same: HTML, CSS and JavaScript.
HTML, as we saw in this article, is a markup language used to structure and organize page content. but with HTML alone it is not possible to style elements or build complex interactions.
It's like the structure of a building, providing walls, doors and windows. But what is the difference between the HTML language and the CSS language?
The difference between HTML and CSS
Different from HTML, CSS (Cascading Style Sheets) is a style language that defines the appearance and layout of HTML elements on a web page.
With it, we can place colors, fonts, margins, sizes, positioning and other attributes on the elements.
It's like painting, decorating and interior designing a building, making it aesthetically appealing and pleasing.
In which areas is HTML used?
Although HTML is generally used in the area of web development, it is also possible to use it in other areas of programming, such as:
- In email marketing development
- In mobile development
- In game development
- In desktop application development
It's important to note that HTML is often combined with other technologies, such as CSS and JavaScript, to create these and other experiences.
Conclusion
In this article you learned about HTML, its history, how it works and how to use it through tags and elements. In addition to knowing where HTML can be applied and the relationship between HTML, CSS and JavaScript.
HTML is a markup language, not a programming language. It is used to create elements and structure web pages. It is a technology employed by front-end developers, usually in conjunction with CSS and JavaScript.
If you liked this content, leave your opinion in the comments, share it so that more people can see it and like it too.
See you later!
The above is the detailed content of HTML: what it is, how important it is for the web.. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
