Différence entre DIV et SPAN

et sont des balises HTML qui définissent des éléments dans le code HTML.

HTML (Hypertext Markup Language) est un code structuré utilisé pour créer et afficher les pages Web que nous visitons en ligne, tous les jours, sur n’importe quel appareil..

D'autres technologies et langages de programmation peuvent être intégrés au HTML pour fournir des fonctionnalités dynamiques et avancées sur un site Web..

Comprendre le HTML

Langage Signalétique Hyper Text (HTML) est un langage de balisage largement utilisé et fait référence à la structure et au code "derrière" une page Web, affichés dans un navigateur Web..

HTML est un fichier texte utilisant un code spécifique (syntaxe) pour définir le style, le contenu, la mise en page et le format d'une page. le Balisage terme indique que le texte / code est en préparation pour le traitement et la présentation, c'est-à-dire sur une page Web, dans un navigateur Web.

Le World Wide Web Consortium (Consortium W3C) [i] reconnaît le langage HTML en tant que langage de balisage formel dans le développement de pages Web et, par conséquent, le langage HTML est pris en charge par la plupart des navigateurs. Ainsi, les pages Web peuvent être développées dans un langage reconnu, facilement interprétées par différents navigateurs pour restituer la page comme prévu par le concepteur..

La version actuelle encore utilisée est HTML4, mais elle est progressivement supprimée à mesure que HTML5 gagne en support et en adoption pour les pages Web dynamiques et réactives..

La réactivité est en train de devenir un élément fondamental du développement Web pour offrir une expérience utilisateur plus facile et plus dynamique, qui doit être adaptée à plusieurs appareils tels que les smartphones, les tablettes et les ordinateurs portables..

Feuilles de style en cascade (CSS) devient une partie intégrante de la construction de pages dynamiques et réactives. Il s'agit d'un fichier distinct définissant les attributs de chaque élément, comme la police, la couleur et l'alignement. Le développeur ne doit donc pas indiquer le style de l'élément à chaque utilisation dans le code HTML..

Structure de base du HTML

Pour tirer le meilleur parti de toutes les langues de développement, il est essentiel de respecter la structure de fichier standard et de mieux utiliser la syntaxe pour fournir un contenu Web stable, utile et attrayant..

Une page HTML a une structure définie par des éléments (également appelés balises). Lors de l'écriture du code HTML, ces éléments sont affichés par paires, ce qui signifie que chaque balise nécessite une ouverture et une fermeture. Un début et une fin.

Un élément est ouvert avec la syntaxe: et fermé avec.  le / la ligne oblique indique la fin de la définition de cet élément.

Les attributs et le contenu de l'élément sont définis entre ces deux points.

le éléments minimum requis pour un fichier HTML sont la définition,, (HTML4 uniquement) et les balises.

  • Définition DOCTYPE

La définition (DTD) doit d’abord être déclarée comme la première balise d’un fichier HTML. Par conséquent, lors du traitement de la page, le navigateur Web connaît le type de fichier et peut donc interpréter et afficher correctement la page..

En HTML4, il existe des variantes de la DTD (en fonction des attributs et des éléments de la page), mais les instructions les plus typiques sont incluses comme suit:

ou

La DTD en HTML5 est beaucoup plus simple:

· HTML, HEAD et BODY

  • La balise indique qu'il s'agit d'un fichier HTML et qu'il s'agit de la racine de l'élément HTML qui contient tous les autres éléments suivants définis dans celui-ci. et l'inclusion d'un attribut de langue est recommandée en tant que meilleure pratique; par exemple:
  • Le est requis en HTML4, mais pas obligatoire en HTML5. C'est un élément qui contient d'autres éléments pertinents pour cette partie du document, tels que le titre, les scripts de référencement, la définition des styles et des métadonnées. La balise fermée doit être utilisée avant de définir la 
  • L'élément contient le contenu principal de la page, y compris les tableaux, le texte des images, les listes, etc. Une fois la balise fermée, l'élément peut maintenant se terminer. L'utilisation du nouvel élément HTML5 est facultative pour la page ou dans une autre partie du contenu..

Éléments HTML

HTML5 a généré de nouveaux éléments facilitant le développement et la conception, mais il a également supprimé les éléments utilisés dans HTML4. La liste des différences entre HTML4 et HTML5 est publiée par le World Wide Web Consortium (consortium W3C) [ii]..

TAG DE DIV HTML

Outre les améliorations et les nouveaux éléments, associés aux avancées CSS, certains éléments peuvent être utilisés de différentes façons, mieux que jamais, et les pages Web deviennent plus rapides, plus riches en fonctionnalités et plus belles à regarder! avec CSS, utilisé avec HTML5 peut remplacer certains éléments trop utilisés, comme .

La balise est populaire lors de la séparation du contenu sur une page. Lors de la création de cet élément, il insère automatiquement une pause
conserver le texte ou le contenu ensemble au lieu de passer du texte sur la page.

Avec l’accessibilité des sites Web et l’optimisation des moteurs de recherche, les techniques sont en train de devenir une science. Le WC3 recommande donc de ne pas toujours revenir à l’utilisation de HTML5..

En guise d'exemple pour un format de blog parfaitement structuré, mais simple, considérons les nouveaux éléments HTML5 avec CSS au lieu d'utiliser l'élément; utilisez l'élément pour le contenu principal, l'élément pour mettre en surbrillance ou séparer tout contenu de la page, de l'en-tête ou du pied de page (n'importe où!) et l'élément peut être utilisé pour contenir des liens de menu ou de groupe à parcourir à partir de la page.

Ces nouveaux éléments identifient facilement le type de contenu à l'aide de HTML5. Cependant, la balise est également utilisée avec CSS pour créer des sites Web réactifs..

En créant chaque élément (avec son propre id ou classe), le fichier CSS peut être défini pour manipuler chaque élément.

L'exemple HTML ci-dessous montre un exemple d'utilisation de plusieurs éléments:

Mes exemples

Les éléments peuvent avoir différents attributs, en particulier différentes tailles pour une interaction réactive, en fonction de la taille de l'écran du périphérique utilisé..

Voici un exemple de la manière dont chaque élément peut être stylé dans le fichier CSS correspondant du code HTML - en référençant chaque balise.

#Entête

largeur: 800px;

hauteur: auto

marge gauche: auto;

marge gauche: auto;

#En vedette

hauteur: 150px;

Couleur de fond: #CCC;

ÉTIQUETTE DE PORTÉE HTML

L'élément est un élément en ligne et ne se divise pas en lignes à moins que la rupture
balise est utilisée et le texte défini (contenu) entre les balises d'ouverture et de fermeture est affiché sous forme de ligne (par défaut sans utiliser d'autres éléments).

Les éléments en ligne sont des éléments de texte dans le fichier HTML et peuvent être définis dans la ligne d'un autre élément..

Comme, l'élément n'a pas sens pour un référencement optimal. En gros, le contenu de l'élément est affiché tel quel, mais toutes les instances peuvent être définies en CSS pour le style si elles sont correctement étiquetées et enrichies d'autres attributs ou manipulées avec JavaScript..

Dans l'exemple ci-dessous, le texte en bleu montre comment l'élément span peut être imbriqué en tant qu'élément en ligne avec des attributs différents de celui de l'élément parent - le paragraphe p>:

Pour ouvrir l'exemple, cliquez sur l'icône en bas de la page..

Lorsqu’il est visualisé dans un navigateur Web, le texte de l’élément ci-dessus sera affiché dans une police différente de celle du paragraphe afin de souligner les endroits où l’utilisateur doit cliquer pour accéder à l’exemple..

Notez qu'il n'y a pas de différences entre HTML4 et HTML5.