Editando HTML (sección)

== Etiquetas HTML básicas ==
[[Archivo:HTML source code example.svg|thumb|300px|Un ejemplo de código HTML con [[coloreado de sintaxis]].]]Las etiquetas HTML<ref>{{Cita web|url=https://codigodeprogramacion.com/html/etiquetas-html5/|título=Principales Etiquetas HTML: Funciones y Ejemplos Clave|fechaacceso=2023-12-15|apellido=PabloLupu|fecha=2023-12-13|sitioweb=Codigo de Programacion|idioma=es}}</ref> son códigos utilizados para estructurar y dar formato al contenido en páginas web. Funcionan como instrucciones que indican al navegador cómo mostrar diferentes elementos, como texto, imágenes o enlaces, al interpretar el código HTML. Cada etiqueta tiene una función específica y se compone de elementos como apertura <etiqueta> y cierre </etiqueta>, encerrando el contenido que afectará.
* <code><html></code>: define el inicio del documento HTML, le indica al [[Navegador web|navegador]] que lo que viene a continuación debe ser interpretado como código HTML. Esto es así ''[[de facto]]'', ya que en teoría lo que define el tipo de documento es el [[DOCTYPE]], que significa la palabra justo tras DOCTYPE el tag de raíz.
* <code><script></code>: incrusta un [[script]] en una web, o llama a uno mediante <code>src="url del script"</code>. Se recomienda incluir el [[Multipurpose Internet Mail Extensions|tipo MIME]] en el atributo <code>type</code>, en el caso de [[JavaScript]] <code>text/javascript</code>.
* <code><head></code>: define la [[Cabecera (informática)|cabecera]] del documento HTML; esta cabecera suele contener información sobre el documento que no se muestra directamente al [[usuario]] como, por ejemplo, el título de la ventana del navegador. Dentro de la cabecera <code><head></code> es posible encontrar:
** <code><title></code>: define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana.
** <code><link></code>: para vincular el sitio a [[hojas de estilo en cascada|hojas de estilo]] o iconos. Por ejemplo:<code><link rel="stylesheet" href="/style.css" type="text/css"></code>.
** <code><style></code>: para colocar el estilo interno de la página; ya sea usando [[hojas de estilo en cascada|CSS]] u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <code><link></code>.
** <code><meta></code>: para metadatos como la autoría o la licencia, incluso para indicar parámetros http (mediante <code>http-equiv=""</code>) cuando no se pueden modificar por no estar disponible la configuración o por dificultades con server-side scripting.
* <code><body></code>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como [[HTML (colores)|color]] de fondo y márgenes. Dentro del cuerpo <code><body></code> es posible encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo:
**<code><article></code>: Representa una composición auto-contenida en un documento, página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o re-utilizable.
** <code><nowiki><h1></nowiki></code> a <code><nowiki><h6></nowiki></code>: encabezados o títulos del documento con diferente relevancia.
** <code><nowiki><p></nowiki></code>: párrafo.
** <code><nowiki><table></nowiki></code>: define una tabla.
*** <code><nowiki><tr></nowiki></code>: fila de una tabla.
*** <code><nowiki><td></nowiki></code>: celda de una tabla (debe estar dentro de una fila).
** <code><footer></code> : representa el pie de un documento o sección. La información que se suele añadir en este bloque es el autor del documento, enlaces a contenido relacionado, información de copyright, avisos legales, etc.
** <code><a></code>: [[hipervínculo]] o enlace, dentro o fuera del [[sitio web]]. Debe definirse el parámetro de pasada por medio del atributo ''href''. Por ejemplo: <code><nowiki><a&nbsp;href="http://www.example.com" title="Ejemplo" target="_blank" tabindex="1">Ejemplo</a></nowiki></code> se representa como ejemplo.<ref>[http://www.example.com/ www.example.com].</ref>
** <code><nowiki><div></nowiki></code>: división de la página. Se recomienda, junto con css, en vez de <code><nowiki><table></nowiki></code> cuando se desea alinear contenido.
** <code><img></code>: imagen. Requiere del atributo ''src'', que indica la ruta en la que se encuentra la imagen. Por ejemplo: <code><img src="./imágenes/mifoto.jpg" /></code>. Es conveniente, por accesibilidad, poner un atributo <code>alt="texto alternativo"</code>.
**<code><nowiki><ol></nowiki></code>: etiqueta para listas ordenadas.
**<code><nowiki><ul></nowiki></code>: etiqueta para listas desordenadas.
** <code><nowiki><li></nowiki></code>: etiqueta elementos de una lista.
** <code><nowiki><b></nowiki></code>: texto en negrita (''etiqueta desaprobada. Se recomienda usar la etiqueta <code><nowiki><strong></nowiki></code>'').
** <code><nowiki><i></nowiki></code>: texto en cursiva (''etiqueta desaprobada. Se recomienda usar la etiqueta <code><nowiki><em></nowiki></code>'').
** <code><nowiki><s></nowiki></code>: texto tachado (''etiqueta desaprobada. Se recomienda usar la etiqueta <code><nowiki><del></nowiki></code>'').
** <code><nowiki><u></nowiki></code>: Antes texto subrayado. A partir de HTML 5 define porciones de texto diferenciadas o destacadas del resto, para indicar correcciones por ejemplo (etiqueta desaprobada en HTML 4.01 y redefinida en HTML 5).<ref>[http://html5doctor.com/u-element/ ''The return of the u element''], "regreso de la etiqueta u" (en inglés).</ref><ref>[http://www.quackit.com/html_5/tags/html_u_tag.cfm Referencia de la etiqueta u] (en inglés).</ref>
** <code><main></code>: división estructural de la página que engloba el contenido principal de la misma. Dentro de esta etiqueta, por ejemplo, encontramos los <code><nowiki><article></nowiki></code>.
** <code><nowiki><span></nowiki></code>: Sirve para diferenciar un texto de otro.
**<code><nowiki><br></nowiki></code>: Sirve para provocar un salto de línea. Esta etiqueta no se cierra.
**<code><nowiki><wbr></nowiki></code>: Sirve para indicarle al navegador donde cortar la palabra si no cabe completa en la pantalla. Está etiqueta no se cierra.
**<code><nowiki><hr></nowiki></code>: Sirve para provocar un cambio de tema entre párrafos. Esta etiqueta no se cierra.
**<code><details></code> : Sirve para crear una sección desplegable
**<code><summary></code> : Sirve para crear el título de la sección desplegable

La mayoría de etiquetas deben cerrarse como se abren, pero con una barra ( / ) tal como se muestra en los siguientes ejemplos:

* <code><nowiki><table></nowiki><nowiki><tr><td></nowiki>Contenido de una celda<nowiki></td></tr></table></nowiki></code>.
* <code><nowiki><script>Código de un script integrado en la página</script></nowiki></code>.
* <code><nowiki><header>División estructural en la parte del contenido.</header></nowiki></code>