HTML：它是什么，它对网络有多重要。-css教程-PHP中文网

当您进入新闻网站、社交网络、银行系统等时，我们在屏幕上提供了几个支持用户交互的元素。

但是你有没有停下来思考过这一切是如何建造的？

负责构建网站的专业人员之一是前端开发人员，他使用Figma将UX/UI设计团队制作的布局转换为代码。

从技术上讲，构建网站是通过多种技术完成的，其中之一就是 HTML。

在本文中，您将了解 HTML 是什么、它的用途以及如何使用它。

什么是 HTML？

由于它是一种用于开发网站的技术，因此人们通常认为我们是用 HTML 进行编程的。需要注意的是，HTML 不是一种编程语言，而是一种标记语言。

编程语言用于创建算法、操作变量和数据结构。 HTML 是超文本标记语言的英文缩写，用于构建和格式化网页内容。

为了能够使用此技术构建项目，您需要一个格式为“.html”的文件，以便您可以在浏览器中打开它，浏览器将解释源代码以在屏幕上显示元素。

HTML 文件剖析

HTML 文件的结构可以解释为一棵树。

我们有根，即元素，从那里我们可以声明可以解释为子元素的新元素（就像分支），因此也可以创建父元素。此外，共享同一行原点的元素可以称为兄弟元素。

HTML 元素的剖析

HTML 元素的结构是通过打开尖括号包围的标签来构造的。

例如段落标签

后面是要显示的内容，最后由一个与开始标签相同的标签关闭，但在元素名称之前有一个斜杠：

。

最终结果是这样的：

例如

<p> O nome do meu cão é Retovem. </p>

登录后复制

我们可以用 HTML 创建什么？

使用 HTML，我们可以创建各种元素来构建具有您选择的主题的网页：博客、在线商店、新闻页面等。

我们可以创建的一些主要元素是：

标题和段落
链接和按钮
图片
列表和表格
表格
视频和音频

这种标记语言为我们提供了广泛的资源，这里只提到了其中的一小部分，可以根据项目的需要来使用。

HTML 的演变

Tim Berners-Lee 在 CERN（欧洲核研究组织）使用 NeXTSTEP 开发环境开发了 HTML。最初，它是一组用于管理搜索和之间通信的工具。

随着互联网的发展，该解决方案获得了全世界的关注。第一个版本很灵活，这有助于该领域的初学者。

随着时间的推移，结构变得更加严格，但即使在今天，浏览器也可以通过向后兼容性解释以旧方式创建的网页。

该规范是在 20 世纪 90 年代定义的，然后 HTML 开始发展，创建了一个 HTML 工作组，并于 1995 年发布了 HTML 2.0 版本。

1997年底，HTML 3.5版本发布，随之W3C工作组在2000年开始重点关注XHTML的开发，终于到了2014年，HTML发布了，一直使用到今天。

我们看到 HTML 的多个版本被发布，直到我们今天使用的版本，但是 HTML 和 HTML5 之间有什么区别？

HTML 和 HTML5 之间的差异

在旧版本中，内容结构主要由通用元素完成，例如

和 .

在 HTML5 中，我们有语义标签来引用元素的用途，包括页眉、页脚、分隔部分等。

此外，今天有了 HTML5，我们对音频有了原生支持，我们可以将它们直接嵌入到页面上。

表单还可以涵盖该版本中更多类型的字段：我们现在提供电子邮件、号码、日期和规范字段，可以对元素生成本机验证。

但是，重要的是要知道 HTML 是静态版本。时至今日它仍在开发和改进中，不时添加功能和功能。

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>

登录后复制

A estrutura do DOM seria a seguinte:

HTML: o que é, Qual a sua importância para a web.

: É o elemento raiz da página, de maneira hierárquica, está acima de todos.
: Se refere à “cabeça” da página, onde é possível inserir configurações que auxiliam na renderização, assim como o título da página. Ele está dentro do elemento , portanto ele é um elemento filho dele.
: Define o título da página, aquele que ficará visível na aba do navegador. É uma ramificação do , sendo um elemento filho.
: É o “corpo” da página, onde serão inseridos os elementos visuais que deverão aparecer, como os textos. Ele também está hierarquicamente inserido dentro do , portanto, é filho dele.
: Refere-se ao título principal que ficará visível no corpo da página. Como está dentro do , consequentemente pode ser considerado como filho.
: Constrói um parágrafo de texto de acordo com o conteúdo inserido dentro dele. Também está dentro do body, portanto é filho dele e irmão do

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.

仍然考虑语义上下文中的文本，重要的是使用描述性链接而不是通用链接。例如，不要构建“单击此处”链接，而是编写使该链接的目的地清晰可见的文本。

通过应用这些实践，您可以创建对搜索引擎（例如 Google）友好且所有用户都可以访问的页面。结果是：