Etiquetas estructurales
Crean la estructura para el resto de la página:,
doctype: identifica el estándar.
todo documento debe ir entre las marcas <html> y </html>.
Todo html tiene dos partes: head y body. El primero incluye otros elementos
estructurales como <title> que indica el título de dicha página. Dentro del body se
incluye el contenido real de la página.
Dentro del body pueden incluirse otras etiquetas que estructuran el contenido de la
página:
o La etiqueta <section> permite marcar contenido de una página relacionado
con un tema concreto.
o <article> es una unidad de contenido sobre un tema específico el cual puede
ser independiente de otros «artículos».
o <header> se utiliza para indicar cual es la cabecera de un artículo o sección.
o <footer> permite definir un «pie de página», normalmente con indicación de
derechos de autor, fecha o datos similares.
o <address> se usa para marcar información de contacto.
o <aside> se usa para definir contenido con «una relación vaga con el resto de la
página» (definición tomada del estándar).
o <hgroup> permite agrupar un conjunto de encabezados y marcarlos como
pertenecientes al mismo contenido.
<h1> , <h2> , <h3> , <h4> , <h5> y <h6> establecen encabezados: trozos de texto que
identifican la importancia del siguiente trozo de texto.
Cualquier etiqueta puede ir comentada. Los comentarios no se muestran, son solo de
interés para el programador en un futuro. Un comentario se abre con <!-- y se cierra
con -->
La etiqueta <a> permite construir enlaces.
La etiqueta <nav> se utilizará para crear barras de navegación.
La etiqueta <aside> se utiliza para indicar información relacionada con el artículo o
texto pero que no tiene porque ser parte del mismo. El ejemplo más común es
utilizarlo para publicidad relacionada o texto del tipo «artículos relacionados con
este».
Las etiquetas <script> y <noscript> se utilizan para marcar pequeños programas o la
ausencia de ellos.
El elemento <main> indica el contenido principal de una página
La etiqueta <div> permite crear «divisiones» en el documento y nos serán muy útiles
cuando hagamos posicionamiento. Una etiqueta muy similar, pero con un
comportamiento distinto es <span> que permite dividir trozos de texto en un párrafo.
La etiqueta <details> junto con la etiqueta <summary> permite crear controles que
ofrecen al usuario la posibilidad de «ampliar información» a voluntad.
<body>
<details>
<summary>HTML5</summary>
<p>Es la última revisión del lenguaje</p>
</details>
</body>
La etiqueta <hr> produce una línea horizontal.
Etiquetas para definir metadatos
En líneas generales, los metadatos más importantes se definen con la
etiqueta <meta> . Para el correcto visionado de los símbolos de nuestra página
usaremos el atributo charset="...."
La etiqueta <base> define la URL raíz de toda la página. Permite cambiar fácilmente
las URL de los enlaces de una página.
Esta etiqueta permite «intentar conseguir» que se vea bien una página antigua que
no se pensó para dispositivos móviles: ´´<meta name=»viewport»
content=»width=device-width, initial-scale=1»>´´
Podemos instruir a los buscadores sobre como tratar a nuestra página en cuanto a si
indexarla o no y en cuanto a seguir los enlaces que ponemos (o no) con ´´<meta
name=»robots» contents=»index, follow»>´´ o <meta name=»robots»
contents=»noindex, follow»> o <meta name=»robots» contents=»index, nofollow»>
Las etiquetas siguientes permiten insertar código CSS :´´<style>`` y ´´</style>``.
Las veremos en profundidad en el tema sobre CSS.
Podemos insertar una descripción de nuestra página con ´´<meta
name=»description» content=»Descripción.»>´´
Podemos insertar un icono con <link rel="icon" sizes="192x192" href="/ruta/[Link]">
En realidad existen muchísimas variantes definidas por Google o Facebook pero no
forman parte de ningún estándar por lo que no se comentarán (aunque eso no quita para
que se utilicen muy a menudo)
Etiquetas de formato
Para el formateo elemental de textos se utilizan varias etiquetas:
<b> Formatea el texto en “negrita”.
<i> Lo pone en “itálica” (cursiva).
<u> Subraya el texto.
Las diversas etiquetas se pueden meter unas dentro de otras para obtener efectos
como “cursiva, y negrita” o “subrayado y cursiva”, sin embargo las etiquetas deben
cerrarse en el orden inverso al que se abrieron.
<sup> y <sub> fabrican respectivamente superíndices y subíndices.
<em> se utiliza para enfatizar un texto.
<p> Se utiliza para marcar el comienzo y el fin de un párrafo.
La etiqueta br se utiliza para hacer una ruptura en el flujo del texto. Se escribe en
forma abreviada <br/>
Nota
Una de las grandes preguntas es si escribir la etiqueta <br/> o <br> . La respuesta corta
es que da igual. La respuesta larga es que el W3C permite que «aquellos elementos que
nunca lleven nada dentro pueden indistintamente escribirse de manera autocerrada o
simplemente sin cerrar». Así, en la cabecera podremos poner cosas
como <meta...> o <meta... />
La etiqueta <abbr> permite usar abreviaturas.
Ejemplo: El <abbr title="World Wide Web Consortiun>W3C</abbr> .
La etiqueta <acronym> se ha llegado a usar pero está obsoleta .
La etiqueta <blockqoute> se usa para indicar citas largas, por ejemplo.
<blockquote>
<p>En un lugar de la Mancha de cuyo nombre...</p>
</blockquote>
La etiqueta <cite> permite indicar una cita breve, como
en <p> Es habitual decir <cite>Alea jact est</cite></p>
La etiqueta <del> permite mostrar texto tachado.
La etiqueta <dfn> permite mostrar una definición. Los navegadores suelen mostrar
esta etiqueta igual que <abbr> .
La etiqueta <ins> permite indicar texto que haya sido insertado a posteriori. Suele
mostrarse en cursiva.
La etiqueta <mark> permite destacar texto de una manera muy llamativa.
La etiqueta <output> es como el control de un formulario pero se introdujo para
recalcar que contiene el resultado de un cálculo.
La etiqueta <samp> está pensada para muestras (samples) de programas o resultado
de ejecuciones.
La etiqueta <tt> imita los teletipos (estilo máquina de escribir).
La etiqueta <wbr> está pensada para ayudar al navegador a decidir donde «romper»
una palabra y poner el guión.
Gestión de espacios
Los navegadores web manejan el espacio de una forma un poco especial:
Si se pone uno o varios espacios en blanco o si se pulsa la tecla ENTER muchas
veces el navegador mostrará un solo espacio en blanco
Para poner un espacio en blanco horizontal se puede usar la entidad .
Para hacer un salto de línea se puede usar la etiqueta <br/> (esta etiqueta no lleva
asociada una etiqueta de cierra, es autocerrada)
Se puede indicar el comienzo y el final de un párrafo con <p> y </p> .
Una pregunta habitual es «¿Cuando se debe usar <p> y cuando <br/>? . La respuesta es
«depende». Una posible respuesta es que si se escriben varios párrafos relacionados es
bastante habitual separarlos con <br/> mientras que si se ponen varios párrafos que
hablan de distintas cosas es habitual usar <p> con cada uno de ellos, sin embargo no
hay una respuesta universal.,
Entidades
Las entidades HTML permiten escribir determinados símbolos especiales que podrían
confundir al navegador, así como otros símbolos que no aparecen directamente en los
teclados:
< y > representan los símbolos < y >.
©
™
®
€ y ¥
&
Texto preformateado
Algunas marcas, como <pre> permiten obligar al navegador a que respete los espacios
en blanco tal y como aparecen en la página original.
