¿Qué es HTML y sus tags? Estructura básica
¿Alguna vez has pensado en cómo se hace una página web en detalle? El primer punto importante para esto es entender cómo funciona su estructura y cómo crear los elementos que la componen.
¿Qué es HTML y sus etiquetas?
HTML existe desde 1991 y actualmente se encuentra en la versión 5, la cual vino llena de características y funcionalidades que traen mejoras al desarrollo web, su principal responsabilidad es delimitar la estructura de una página web. Esta estructura HTML está formada por un conjunto de elementos, es decir, los hipertextos, que se conectan entre sí formando la página. Los elementos HTML, o también llamados etiquetas HTML, se utilizan para informar al navegador qué tipo de estructura se está construyendo, las cuales pueden ser títulos, párrafos, imágenes, enlaces, entre otros.
Así, para que un documento sea interpretado por el navegador, es necesario que el archivo tenga la extensión .html y a partir de ahí pueda ser visualizado por cualquier navegador web.
Las etiquetas están formadas por una estructura propia, comienzan con el signo “menor que”, luego viene el nombre de ese elemento y finalmente, el signo “mayor que”. Se pueden organizar en etiquetas que necesitan cierre y etiquetas que se cierran solas (autocierre). El cierre de una etiqueta se definirá con una barra diagonal (/), y en el caso de etiquetas de cierre automático, no es necesario que este carácter esté presente.
<!--Etiqueta que necesita cerrarse-->
<h1> Hola Mundo!</h1>
<!--Etiqueta de cierre automático-->
<img src="banner.jpg">
Tipos de etiquetas
Las etiquetas se pueden clasificar inicialmente en dos tipos, "a nivel de bloque" e "en línea" (en línea). Un elemento a nivel de bloque ocupa todo el ancho de su elemento principal, al que también llamamos elemento contenedor, creando así un "bloque". En cuanto a los elementos en línea, generalmente los usamos para delimitar el contenido del texto.
Estructura basica
VS Code utiliza las abreviaturas de Emmet de forma predeterminada, lo que trae la aparición automática de líneas de código que forman parte de la estructura básica de HTML al escribir el signo de exclamación. De esa forma:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
</head>
<body>
Informa al navegador que este documento es de tipo HTML y su versión. Cuando se escribe solo html, indica que es el más reciente.
<html>
Representa la raíz del documento, sirve como contenedor que abarca todos los demás elementos HTML.
<body>
Es donde se ubica todo el contenido de texto, imagen y video, en el que el usuario ve e interactúa, en el que los contenidos son estructurados por las demás etiquetas HTML.
<script>
Este elemento contiene instrucciones de script o apunta a un archivo de script externo a través del atributo src.
<head>
Comprende la información del documento que será interpretada por el navegador (metadatos). Por ejemplo, título del documento, enlaces a hojas de estilo, etc.
<meta>
Define metadatos, es decir, información sobre datos en un documento HTML. Las etiquetas <meta> van dentro del elemento <head> y se utilizan para especificar el conjunto de caracteres, el autor del documento, la configuración de la ventana gráfica, etc.
<link>
Es una etiqueta vacía, que solo contiene atributos y relaciona el documento HTML con recursos externos, se usa comúnmente para vincular una hoja de estilo externa, también se usa para definir el favicon de la página (icono de la pestaña del navegador), como otros recursos.
<style>
Esta etiqueta se usa para declarar estilos (CSS) para un documento.
Etiquetas semánticas
Las etiquetas semánticas son etiquetas que tienen un significado, que le dan significado a la información del texto para el navegador y los motores de búsqueda, por ejemplo, usar la etiqueta <header> para encabezados o <article> para dar significado a un artículo a ese bloque de texto, incluso <p> para indicar que ese texto es un párrafo, es una buena práctica siempre tratar de usar estas etiquetas semánticas para ayudar en la comprensión del código, además de ayudar mucho en el SEO del sitio (Optimización para motores de búsqueda, es lo que ayuda a que su sitio se clasifique mejor en los motores de búsqueda como Google). A continuación se muestra la lista de etiquetas semánticas mencionadas durante el artículo:
<header>
<main>
<footer>
<section>
<article>
<aside>
<nav>
<ol>
<ul>
<li>
Ejemplo de estructuración con etiquetas semánticas:
Etiquetas sin semántica
Las etiquetas que no tienen semántica no definen un significado para ese texto, normalmente se usan solo con fines de separación y estilo. A continuación se muestra una lista de algunas etiquetas no semánticas:
<div><span><b><i>Comentarios
Los comentarios en HTML o en cualquier otro idioma son notas que se pueden incluir en el código fuente para describir lo que quieras. Por lo tanto, no modifican el programa ejecutado y solo sirven para ayudar a la persona que está desarrollando a organizar mejor sus códigos. Para comentar algún código en HTML, debe envolverlo en <!-- Su código aquí -–>. Por ejemplo:
<!--Este código será ignorado por el navegador.–->
Autores: Beatriz Moura e Mateus Henrique