HTML

HyperText Markup Language

Adrián L. G. P.

BÁSICO 
<!DOCTYPE html>
 Se coloca en la primera línea del documento para especificar que es un archivo de tipo html. 
<html>
    ...
</html>
 Elemento raíz del documento. Debe contener todo el contenido dentro. 
<head>
    ...
</head>
 Primer elemento dentro de la etiqueta <head> que contiene dentro ciertas etiquetas para interpretar el documento. No es visible el documento expecto en ciertos casos. 
<body>
    ...
</body>
 Elemento donde se colocarán los elementos físicos del documento. 
<!-- COMENTARIO -->
 Un comentario es una anotación dentro del documento que solo es visible para el desarrollador del documento.
ETIQUETAS DENTRO DE <head> 
<title>...</title>
. 
<meta charset="UTF-8">
 Especificamos la codificación de carácteres del documento. 
<meta name="viewport" content="width=device-width", initial-scale="1.0">
 Especificamos un metadato de la ventana gráfica que ayuda a los navegadores web a hacer webs responsives en dispositivos móviles. A parte hay que crear @media queries. 
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
 Especificamos qué tipo de contenido es y el tipo de codificación de carácteres. 
<meta http-equiv="cache-control" content="no-store, no-cache, must-revalidate, max-age=0">
 Especificamos un metadato del navegador: Si debe guardar la página web en caché y cuanto tiempo. Opciones de content (ponerlas separadas por comas):

no-store Evita que el navegador guarde cualquier copia.
no-cache: Obliga al navegador a revalidar el contenido con el servidor antes de usar la versión en caché.
must-revalidate: Indica que la caché expira inmediatamente.
max-age=0: Obliga a que cuando expire la caché se valide con el servidor. Si no, un tiempo en segundos. 
<meta http-equiv="refresh" content="3; url=URL>
 Especificamos que, pasado 3 segundos, cargue otra página o refresque la actual. 
<meta name="robots" content="noindex">
 Especificamos que a los motores de búsqueda no indexen esta página como un resultado. 
<meta  name="keywords" content="PALABRA1, PALABRA2, ...">
 Especificamos a los motores de búsqueda unas palabras clave para clasificar el contenido. 
<meta  name="author" content="AUTOR">
 Especificamos el autor del documento. 
<meta  name="copyright" content="AUTOR">
 Especificamos el autor que posée el copyright del documento.
ELEMENTOS DE BLOQUE 
<main>
    ...
</main>
 Se coloca por motivos semánticos para englobar las etiquetas header, section, article y aside, no pudiendo estar dentro de ellas. 
<header>
    ...
</header>
 . 
<section>
    ...
</section>
 Sirve para agrupar la información relacionada y dependiente. 
<article>
    ...
</article>
 Sirve para agrupar la información que está relacionada entre sí y además es independiente de otros bloques. 
<aside>
    ...
</aside>
 . 
<nav>
    ...
</nav>
 Se utiliza para almacenar enlaces de navegación tanto internos como externos. 
<address>...</address>
 Para representar información de una dirección física. Puede ponerse links y texto dentro. 
<blockquote cite="URL">...</blockquote>
 Añadir una cita de una fuente externa. Se puede poner un <p></p> dentro con el texto de la cita. 
<details>
    <summary>Nota resumida<summary>
    Contenido detallado
</details>
 Podemos hacer que al hacer click a <summary> se oculte/muestre el contenido detallado. 
<dialog open>
    <p>A devolución realizouse correctamente</p>
</dialog>
 Se representa una caja de dialógo u otro componete interactivo, como una ventana. open indica que está activo y disponible para interactuar. 
<div>...</div>
 Sirve para crear agrupaciones de etiquetas permitiendo una mejor organización. 
<figure>
    <img src="URL" alt="Definición">
    <ficaption>Leyenda</ficaption>
</figure>
 Podemos añadir una descripción debajo de una imágen (leyenda). 
<h1>Título</h1>
 Para crear títulos se usa la etiqueta header (h) seguido de un número del 1 al 6, siendo el 1 el título principal y el 6 el nivel más bajo. 
<p>Párrafo</p>
 Deilimita un párrafo del texto. No respeta multiples espacios, tabulaciones ni saltos de línea. 
<pre>Párrafo</pre>
 Representa un texto tal como se especifica en el documento, respetando espacios, saltos de línea y tabulaciones. 
<hr>
 Crea una división en el contenido mediante una línea.
ELEMENTOS DE LÍNEA 
<a href="URL" target="_blank" type="text/html">Enlace</a>
 Especificamos un enlace a un texto. Al presionarlo nos llevará a la URL especificada en href. target sirve para poder especificar como se comporta el abrir el enlace, como en una nueva pestaña con _blank.

Además podemos hacer que la URL sea un enlace interno o externo. Si es interno se especificará #ID, cambiando el ID por el que se especicó en un documento mediante id="...". Si es externo simplemente se especifica la URL del destino.
Por último, podemos apuntar a un correo electrónico poniendo la URL como: mailto:CORREO		 
<abbr title="SIGNIFICADO">Abreviación</abbr>
 Podemos especificar abreviaciones de una palabra y su significado en title="", que al hacer hover se enseñará. 
<b>Texto</b>
 Podemos poner en negrita un texto. 
<strong>Texto</strong>
 Podemos poner en negrita un texto pero además el navegador lo interpreta como importante. 
<bdi>Texto</bdi>
 . 
<bdo>Texto</bdo>
 . 
<br>
 Para hacer un salto de línea en párrafos. El método tradicional (\n) no se interpreta en html. 
<cite>"Texto de la cita"</cite>
 Otro método para especificar una cita dentro en una línea. 
<code>Pedazo de código</code>
 Se especifica dentro en una línea que hay un bloque de lenguaje de programación. 
<data value="VALOR_REAL">Valor formateado</data>
 Asocia un contenido con un valor que sirve para poder representarlo y procesarlo. No es visible para el usuario. 
<del datetime="HORARIO" cite="URL">Contenido Borrado</del>
 Se especifica que un contenido fué borrado dando la razón de ella en cite="", especificando la URL donde explique el cambio. datetime="" es la fecha de cuando se produjo la eliminación del contenido. 
<ins datetime="HORARIO" cite="URL">Contenido Añadido</ins>
 Al contrario de <del>, indica que un contenido fué insertado. Tiene los 2 mismos atributos que <del>. 
<dfn>Texto de referencia</dfn>
 Dentro de un <p>, <section> o un <dl> se da con esta etiqueta una referencia al bloque al que pertenece, marcándose en italic para dar una identificación visual. 
<em>Texto</em>
 Sirve para remarcar una palabra marcada podiendolo en cursiva dándole un significado semántico. 
<i>Texto</i>
 Sirve para poner en cursiva una palabra pero no da un significado semántico. 
<kbd>CTRL + ALT + SUPR</kbd>
 Permite indicar que el usaurio debe insertar ese contenido. Cada navegador representa ese contenido de una manera u otra. 
<mark>Texto resaltado</mark>
 Resalta el texto especificado marcándolo con color de fondo amarillo. 
<script src="URI" type="LENGUAJE">
    ...
</script>
 Si la ejecución de javascript del lado del cliente está permitida, enseñará el contenido dentro de esta etiqueta o lo cargará del archivo especificado en src="". Se define el lenguaje de programación usado con type="". 
<noscript>
    ...
</noscript>
 Si la ejecución de javascript del lado del cliente está bloqueada, enseñará el contenido dentro de esta etiqueta. 
<slot>...</slot>
 Etiqueta que permite definir componentes reutilizables. 
<q cite="URL">Contenido de la cita</q>
 Indicamos una cita literal donde el texto se enmarccará entre comillas. cite="" es el enlace al lugar de donde sacaste la cita. 
<s>Texto</s>
 Tacha un texto con una linea horizontal en mitad de las palabras. 
<samp>Texto</samp>
 Define un mensaje que da el sistema que actua igual que <pre< con los carácteres. 
<small>Texto</small>
 Define un comentario al margen del contenido. Utilizado para representar avisos, mensajes, copyright, etc. 
<sub>Texto</sub>
 Podemos poner un subíncide. 
<sup>Texto</sup>
 Podemos poner un superíndice. 
<template>...</template>
 Permite crear modelos mediante JavaScript para que funcione. 
<date datetime="FECHA">Texto indicando la fecha</date>
 Representa una fecha mediante un atributo datetime="". 
<var>Texto</var>
 Indica que el texto marcado es el nombre de una expresión matemática o informática. Además pone en cursiva el texto. 
<wbr>Parte de la palabra que se puede separar</wbr>
 Si una plaabra no cabe en una línea tiende a saltar todo a la siguiente. Si indicamos un fragmento con esta etiqueta, se partirá en ese punto.
CONTENIDO INCRUSTADO 
<embed src="URI" type="TIPO_MIME" width="ANCHO_EN_PX" height="ALTURA_EN_PX" />
 Permite incrustar un elemento externo generado por otra aplicación dandole forma con width="" y height="", además de indicando su tipo MIME específico con type="".
No se recomienda su uso si son elementos fueras de los estándares. 
<iframe src="URI" srcdoc="CÓDIGO_HTML" sandbox="..." type="TIPO_MIME" width="ANCHO_EN_PX" height="ALTURA_EN_PX" loading="lazy/eager" allow allowfullscreen  />
 . 
<object data="" type="" name="" usemap="" form="" width="" height=""  />
 .
PAG 36
LISTAS 
<dl>
    <dt>Término a definir</dt>
    <dd>Definición</dd>
    ...
</dl>
 Creamos una lista de descripciones 
<ol>
    <li>Elemento de la lista</li>
    ...
</ol>
 Listas ordenadas. 
<ul>
    <li>Elemento de la lista</li>
    ...
</ul>
 Listas desordenadas.

Adrián L. G. P.