HTML : qu'est-ce que c'est, quelle est son importance pour le Web.

Lorsque vous accédez à des sites d'actualités, des réseaux sociaux, des systèmes bancaires, entre autres, nous avons plusieurs éléments disponibles à l'écran qui permettent l'interaction de l'utilisateur.

Mais avez-vous déjà pris le temps de réfléchir à la façon dont tout cela a été construit ?

L'un des professionnels responsables de la création d'un site Web est le développeur front-end, qui transforme une mise en page réalisée par l'équipe de conception UX/UI en code à l'aide de figma.

Techniquement, la création d'un site Web se fait via plusieurs technologies, et l'une d'entre elles est HTML.

Dans cet article, vous apprendrez ce qu'est le HTML, à quoi il sert et comment il peut être utilisé.

Qu’est-ce que le HTML ?

Comme il s'agit d'une technologie utilisée pour développer des sites Web, il est courant de penser que l'on programme en HTML. Une remarque importante est que HTML n'est pas un langage de programmation, mais un langage de balisage.

Les langages de programmation sont utilisés pour créer des algorithmes, manipuler des variables et des structures de données. HTML, acronyme anglais de Hypertext Markup Language, structure et formate le contenu des pages Web.

Pour pouvoir construire un projet avec cette technologie, vous avez besoin d'un fichier au format « .html », afin de pouvoir l'ouvrir dans un navigateur, qui interprétera le code source pour afficher les éléments à l'écran.

Anatomie d'un fichier HTML

L'anatomie d'un fichier HTML peut être interprétée comme un arbre.

Nous avons la racine, qui est l'élément, et à partir de là nous pouvons déclarer de nouveaux éléments (qui sont comme des branches) qui peuvent être interprétés comme des enfants et par conséquent, il est également possible de créer des éléments parents. De plus, les éléments qui partagent la même ligne d'origine peuvent être appelés frères et sœurs.

L'anatomie d'un élément HTML

L'anatomie d'un élément HTML est construite en ouvrant la balise entourée de crochets angulaires.

Par exemple, la balise paragraphe

est suivi du contenu qui sera affiché et enfin, il est fermé par une balise qui est la même que la balise d'ouverture, mais avec une barre oblique avant le nom de l'élément :

.

Le résultat final est le suivant :

Ex.

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

Que peut-on créer avec HTML ?

Avec HTML nous pouvons créer divers éléments pour construire une page web avec le thème de votre choix : Blogs, boutiques en ligne, pages d'actualités, etc.

Certains des principaux éléments que nous pouvons créer sont :

• Titres et paragraphes
• Liens et boutons
• Images
• Listes et tableaux
• Formulaires
• Vidéos et audios

Ce langage de balisage nous offre un large éventail de ressources, dont seulement quelques-unes ont été évoquées, qui peuvent être utilisées selon les besoins du projet.

L'évolution du HTML

Tim Berners-Lee a développé HTML au CERN (Organisation européenne pour la recherche nucléaire) en utilisant l'environnement de développement NeXTSTEP. A l'origine, il s'agissait d'un ensemble d'outils permettant de gérer les recherches et la communication entre eux.

Avec l'évolution d'Internet, la solution a attiré l'attention du monde entier. Les premières versions étaient flexibles, ce qui aidait les débutants dans le domaine.

Au fil du temps, la structure est devenue plus rigide, mais même aujourd'hui, les navigateurs peuvent interpréter les pages Web créées à l'ancienne grâce à la rétrocompatibilité.

Les spécifications ont été définies dans les années 1990. Puis l'évolution du HTML a commencé, avec la création d'un groupe de travail HTML qui, en 1995, a publié la version HTML 2.0.

Fin 1997, la version HTML 3.5 est sortie et avec elle, le groupe de travail du W3C a commencé à se concentrer sur le développement de XHTML en 2000, et nous sommes finalement arrivés en 2014, lorsque le HTML est sorti, qui est utilisé jusqu'à aujourd'hui.

Nous avons vu que plusieurs versions de HTML ont été publiées jusqu'à arriver à celle que nous utilisons aujourd'hui, mais quelle est la différence entre HTML et HTML5 ?

Différences entre HTML et HTML5

Dans les anciennes versions, la structuration du contenu se faisait principalement par des éléments génériques, tels que

et .

En HTML5, nous avons des balises sémantiques qui font référence au but de l'élément avec l'en-tête, le pied de page, les sections de séparation, entre autres.

De plus, aujourd'hui avec HTML5 nous avons un support natif pour l'audio, nous pouvons les embarquer directement sur la page.

Les formulaires peuvent également couvrir plus de types de champs dans la version : nous disposons désormais de champs d'e-mail, de numéro, de date et de spécification qui génèrent des validations natives sur les éléments.

Cependant, il est important de savoir que HTML est une version statique. Il est encore en cours de développement et d'amélioration aujourd'hui, avec des fonctionnalités et des fonctionnalités ajoutées de temps en temps.

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:

• : É 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.

Toujours concernant les textes dans le contexte de la sémantique, il est important d'utiliser des liens descriptifs plutôt que génériques. Par exemple, au lieu de créer un lien « cliquez ici », écrivez un texte qui indique clairement la destination de ce lien.

En appliquant ces pratiques, vous créez des pages conviviales pour les moteurs de recherche, comme Google, et accessibles à tous les utilisateurs. cela donne :

• Meilleure expérience utilisateur
• Une plus grande audience
• Plus de Web inclus.

Quelle est la relation entre HTML, CSS et JavaScript ?

Les développeurs front-end utilisent diverses technologies lors du développement d'un site Web, mais qu'il s'agisse de frameworks ou de bibliothèques, la base est toujours la même : HTML, CSS et JavaScript.

Le HTML, comme nous l'avons vu dans cet article, est un langage de balisage utilisé pour structurer et organiser le contenu des pages. mais avec HTML seul, il n'est pas possible de styliser des éléments ou de créer des interactions complexes.

C'est comme la structure d'un bâtiment, fournissant des murs, des portes et des fenêtres. Mais quelle est la différence entre le langage HTML et le langage CSS ?

La différence entre HTML et CSS

Différent du HTML, CSS (Cascading Style Sheets) est un langage de style qui définit l'apparence et la disposition des éléments HTML sur une page Web.

Avec lui, nous pouvons placer des couleurs, des polices, des marges, des tailles, un positionnement et d'autres attributs sur les éléments.

C'est comme peindre, décorer et aménager l'intérieur d'un bâtiment, le rendre esthétiquement attrayant et agréable.

Dans quels domaines le HTML est-il utilisé ?

Bien que le HTML soit généralement utilisé dans le domaine du développement web, il est également possible de l'utiliser dans d'autres domaines de la programmation, tels que :

• Dans le développement de l'email marketing
• En développement mobile
• Dans le développement de jeux
• Dans le développement d'applications de bureau

Il est important de noter que le HTML est souvent combiné avec d'autres technologies, telles que CSS et JavaScript, pour créer ces expériences et d'autres.

Conclusion

Dans cet article, vous avez découvert le HTML, son histoire, son fonctionnement et comment l'utiliser à travers des balises et des éléments. En plus de savoir où le HTML peut être appliqué et la relation entre HTML, CSS et JavaScript.

HTML est un langage de balisage, pas un langage de programmation. Il est utilisé pour créer des éléments et structurer des pages Web. Il s'agit d'une technologie utilisée par les développeurs front-end, généralement en conjonction avec CSS et JavaScript.

Si vous avez aimé ce contenu, laissez votre avis dans les commentaires, partagez-le pour que davantage de personnes puissent le voir et l'aimer aussi.

À plus tard !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!