0000100 Qué es el HTML y estructura básica - Camino-S/HTML-CSS GitHub Wiki

Qué es HTML

  • Son las siglas de:
    • HyperText
    • Markup
    • Language

HTML es un lenguaje de marcado fundamentado en códigos o marcas que organizan y estructuran el texto para hacerlo legible. Dicho lenguaje se expresa a través de etiquetas. Sus orígenes se remontan a principios de la década de los 90 y, a lo largo del tiempo, ha tenido diferentes cambios y evoluciones que garantizan su vigencia.

  • HTTP y URL
    • HyperText Transfer Protocol
    • Uniform Resource Locator

Sintaxis de HTML

ETIQUETA DE APERTURA

  • El carácter menor que «<«.
  • Etiqueta propiamente dicha, por ejemplo, body.
  • Atributos HTML pertinentes.
  • El carácter mayor que «>.

ETIQUETA DE CIERRE

  • El carácter menor que «<«.
  • El carácter /
  • Etiqueta que queremos cerrar.
  • El carácter mayor que «>. NOTAS
  • No todas las etiquetas tienen etiqueta de cierre, la mayoría si
  • Si hay etiquetas anidadas se cierran primero las últimas que has abierto
<p>Esto es un párrafo con un 
          <a>
              enlace
          </a> 
   dentro
</p>

¿Qué son los atributos HTML?

Los atributos HTML son propiedades añadidas a las etiquetas. Es decir, los atributos pueden modificar el comportamiento de las etiquetas e incluso dotarlas de funcionalidad. Por ejemplo, la etiqueta debe ir acompañada del atributo src, que es el que va a indicar de dónde proviene dicha imagen.

Principales tipos de etiquetas HTML

Ahora sí, es hora de centrarnos en los tipos de etiquetas HTML. A continuación, te contamos cuáles son los tipos más importantes e imprescindibles:

  • Tipos de etiquetas HTML para metadatos Son todas aquellas etiquetas que permitirán introducir información importante sobre los datos del documento.
<head>: corresponde a la parte superior del documento HTML y agrupa diferente información sobre el mismo, que puede ser o no visible.
<link>: enlaza recursos externos, por ejemplo, las hojas de estilo CSS3.
<title> </title>: establece el inicio y el fin del título.
  • Tipos de etiquetas HTML para dar estructura Este tipo de etiquetas HTML, como su nombre indica, permite dar estructura al documento HTML, ya sea establecer algunas secciones e incluso jerarquizar contenido. Entre las más comunes encontramos:
<body> </body>: indica todo el contenido a mostrar en la web.
<h1> – <h6>: permite jerarquizar el contenido. Son lo que reconocemos como títulos o subtítulos.
<section> </section>: establece la apertura y el cierre de una sección.
  • Tipos de etiquetas HTML para agrupar contenido En esta categoría se encuentran todas las etiquetas que facilitan reunir contenido con determinadas características o finalidades. Por ejemplo:
<div> </div>: es una etiqueta que se usa para dividir un contenido en partes o establecer secciones.
<p> </p>: corresponde al inicio y cierre de un párrafo.
<ol> </ol>: con esta etiqueta es posible crear listas ordenadas.
<ul> </ul>: esta también nos permite crear listas, pero desordenadas.
<li> </li>: esta etiqueta agrupa cierta información sin importar si proviene de listas ordenadas o desordenadas.
  • Tipos de etiquetas HTML para insertar contenido Este tipo de etiquetas HTML se usa para incrustar cierto contenido e información de utilidad para la página web.
<img>: con esta etiqueta podremos introducir una imagen en el documento.
<video> </video>: esta etiqueta permitirá la reproducción de vídeo en el sitio web, así como otra información que esté asociada con este, como el audio.
<audio> </audio>: por su parte, esta etiqueta posibilita la reproducción de archivos de audio.
  • Tipos de etiquetas HTML semánticas El tipo de etiquetas HTML semánticas permite darle mejor estructura al documento. Estas mejoran o hacen más atractiva la página para los motores de búsqueda, resultando de mayor provecho para el sitio web.
<a> </a>: permite la creación y vinculación de enlaces con el contenido.
<br>: introduce los respectivos saltos de línea que mejoran la legibilidad del documento HTML.
<strong> </strong>: indica que ciertos elementos tienen mayor importancia, es decir, es la etiqueta mejor vinculada con la optimización de la página web (SEO).

Estructura

La estructura HTML de una página web se compone de:

las etiquetas <html>, que indica el comienzo de la página;

<head>, que contiene información más descriptiva sobre el sitio;

<body>, que conforma todos los elementos visibles de la página.

image

Cabecera (HEAD) de un documento HTML

La HEAD es la primera de las dos partes en que se estructura un documento HTML. En la HEAD reside información acerca del documento, y generalmente no se ve cuando se navega por él.

Elementos del HEAD:

  • <TITLE> que es título de la página. Es lo que el navegador se guarda en el "Bookmarks"
  • <META NAME="keywords" CONTENT="HTML, internet "> Permite definir las palabras clave del documento. Las keywords son aquellos criterios a los que responde un buscador para ofrecerle al usuario páginas HTML como respuesta. Antes se usaba mucho pero hoy google no las tiene en cuenta por un mal uso en el pasado. Las palabras clave que contiene la página van separadas por comas.
  • <META NAME="description" CONTENT="Manual para escribir HTML."> Este otro sirve para que los buscadores puedan ofrecer un breve resumen de los contenidos de tu página.
  • <meta charset="UTF-8"> ó <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Indica la tabla de caracteres que se ha empleado al escribir la página. De no usarlo, puede ocurrir que el navegador no muestre correctamente los caracteres especiales no ascii, tales como acentos, letras de alfabetos no occidentales, etc., que se hayan quedado sin codificar de la forma típica en html.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> Controla como se visualiza la página.

Cuerpo (BODY) de un documento HTML

Contiene todos los elementos que se ven en una página web.

⚠️ **GitHub.com Fallback** ⚠️