===== HTML5 ===== .. image:: /logos/logo-html5.png :scale: 25% :alt: Logo HTML5 :align: center .. |date| date:: .. |time| date:: %H:%M Última edición el día |date| a las |time|. Esta es la documentación que he recopilado para trabajar con HTML5, HyperText Markup Language que se utiliza para crear la estructura de un sitio web. .. contents:: Índice Sintaxis HTML5 ############## HTML5 se basa en el uso de etiquetas definidas para cada función como cabeceras, párrafos, contenedores, imágenes, videos, enlaces... La estructura básica de una etiqueta html es la siguiente: .. code:: html * Esto es una etiqueta html completa con contenido y etiqueta de cierre: .. code:: html

esto es un párrafo

* También existen etiquetas html que no utilizan etiqueta de cierre: .. code:: html Cada etiqueta tiene uno o varios atributos disponibles para personalizarla como es el caso de ``src`` en el ejemplo anterior. Existen dos clases de atributos que sirven para todas las etiquetas html: Lo que se encuentra entre comillas definido en el atributo se denomina valor. * id: sirve para establecer un identificador que utilizaremos para personalizar con CSS y JavaScript nuestra etiqueta. * class: sirve exactamente para lo mismo que id. * data-: el prefijo data- seguido de cualquier palabra sirve para añadir metadatos a nuestros archivos multimedia. Ej: "data-formato", "data-duracion". * title: con title podemos definir una frase o palabra que se mostrará cuando situemos el cursor sobre la etiqueta que lo posee. Generalmente y aunque se puede utilizar tanto uno como el otro para los mismos propósitos, en lo personal yo acostumbro a utilizar id para trabajar con JavaScript y class para trabajar con CSS Ejemplo de uso: .. code:: html
Comentarios en HTML5 ******************** Los comentarios podemos utilizarlos del siguiente modo: .. code:: html Realizar un salto de línea ************************** Para realizar un salto de línea utilizamos la etiqueta ``
`` Añadir línea divisora ********************* Para añadir una línea divisora horizontal utilizamos la etiqueta ``
`` Crear un contenedor ******************* Un contenedor es una estructura donde colocaremos distintas etiquetas html y se utiliza para crear secciones y objetos que tendrán distintos estilos en nuestro código: .. code:: html

Esto es una cabezera

Esto es un párrafo

También existen las etiquetas ```` que tienen un funcionamiento similar a div pero se suelen utilizar para encapsular cosas más pequeñas. Estructura HTML5 **************** La estructura básica de un documento HTML5 se define con las siguientes etiquetas: * : Etiqueta con la que se declara la versión de HTML que utilizamos la cual es la versión 5. * : Define el tipo de documento que estamos trabajando. * : Es la cabecera del documento, aquí se añade la meta información y vinculamos hojas de estilos, fuentes, etc... * : Es donde escribimos las etiquetas HTML que comprenderán nuestro código. Ejemplo de estructura base: .. code:: html Semántica HTML5 *************** Este tipo de estructura que encontramos dentro del body sirve para que cuando un motor de búsqueda lea nuestro sitio web sepa exactamente que partes de su contenido corresponden a cada una de las partes típicas de un sitio, estas etiquetas funcionan exactamente igual que ``
``. Existen las siguientes etiquetas: *
: se utiliza para representar una sección general. *
: Representa un componente de una página tipo documento o página. *