Conceptos básicos del HTML5

Página 1

CONCEPTOS BÁSICOS HTML5

Declaración del tipo de documento: < ! DOCTYPE html >

Elemento html: :

Define inicio y el final

Contiene todos los demás elementos del documento

Atributo lang: define el idioma del documento

Atributo dir: Define la dirección del txt

Elemento head:

Contiene info sobre la página web como el título, metadatos y scripts

No se muestra en la app web

title: título de la app web

meta : metadatos de la app web, como la codificación de caracteres, la descripción y las palabras clave

link: Vincula archivos externos a la pag.web, como hojas de estilo CSS o scripts JavaScript.

Script: Define scripts JavaScript que se ejecutarán en el navegador

Elemento body:

Contiene el contenido visible de la app web, como txt, imágenes, formularios, etc.

Es la parte principal de la app web.

-------------------------------------------------------------------------------------

→ Validación del código HTML para asegurarse de que cumple con los estándares del W3C:

https://validator.w3.org/

→ TIP IMPORTANTE: Al crear un fichero index.html en VScode. Si escribo html:5 y pulso enter, se me crea la estructura base de un documento HTML5.

Página 2

ATRIBUTOS HTML5

id:

Identificador único para un elemento dentro de la pág.

Se utiliza para:

Seleccionar elementos con JavaScript

Aplicar estilos específicos con CSS

Mejorar la accesibilidad para lectores de pantalla

Crear enlaces a secciones específicas de la página

Página 3

ATRIBUTOS HTML5

class:

Asigna una o más clases a un elemento para agruparlo con otros elementos similares.

Se usa para:

Aplicar estilos CSS a un grupo de elementos

Seleccionar elementos con JavaScript

Facilitar la gestión del diseño de la página

Página 4

ATRIBUTOS HTML5

style:

Aplica estilos CSS directamente a un elemento

Modificar la apariencia de un elemento sin afectar a otros

Aplicar estilos dinámicos con JavaScript

Utilizaremos hojas de estilos externas, pero en algún caso nos será útil para maquetar con info dinámica

No se recomienda abusar de su uso, a no ser que sea imposible hacerlo a través de una hoja de estilos externa.

Página 5

ATRIBUTOS HTML5

lang:

Define el idioma del contenido del elemento

Se usa para:

Mostrar el contenido en el idioma correcto

Mejorar la accesibilidad para usuarios con dif idiomas

Optimizar la pág web para los motores de búsqueda.

Página 6

ATRIBUTOS HTML5

dir:

Indica la dirección del txt (Itr para izq a drcha o rtl para dcha a izq)

Se usa para:

Mostrar el texto en la dirección correcta

Mejorar la accesibilidad para usuarios de idiomas con diferentes direcciones de escritura.

title:

Muestra txt informativo al pasar el cursor sobre el elemento

Se usa para:

Proporcionar info adicional sobre un elemento

Mejorar la accesibilidad para usuarios con lectores de pantalla

Página 7

ATRIBUTOS HTML5

data-* :

Permite almacenar datos personalizados en un elemento

Se usa para:

Almacenar info que no se muestra en la pág

Acceder a la info con JavaScript

Facilitar la interacción con frameworks JavaScript

accesskey:

Permite asignar una tecla de acceso rápido a un elemento HTML, facilitando la navegación para usuarios con necesidad de accesibilidad o que prefieren el teclado al ratón