Untitled

Slide 1

• Etiquetas principales y elementos semánticos en HTML.

Etiquetas Principales en HTML.

• Mediante el uso de las etiquetas HTML puedes subrayar textos, ponerlos en negrita, establecer encabezados, estructurar el texto en guiones, en párrafos, añadir imágenes y vínculos a otras páginas, etc. De ahí que el conocimiento de estas etiquetas sea importante para hacer páginas web, mejor dicho imprescindible.
• 

Slide 3

• <html>: indica el comienzo del documento HTML.
• <head>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title>) de la web, una descripción y otras informaciones relacionadas con el contenido de la página.
• <body>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web.

Slide 4

• <h1>, <h2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores.
• <a>: define los enlaces.
• <table>: es una tabla, y dentro de esta tenemos filas <tr> y celdas <td>.
• <p>: el texto dentro de esta etiqueta forma un párrafo.
• <img>: imágenes.
• <ul>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <li> definimos cada guión dentro de la lista, y usando <ol> en lugar de <ul> tendremos listas ordenadas.
• <b> y <strong>: se utilizan para resaltar el texto.
• <u>: texto subrayado.
• <i> y <em>: texto en cursiva.

Elementos Semánticos

• Desde su inicio el HTML añade significado semántico a el código que comprende un sitio web.
• Con etiquetas como <h1> , <p>, <img> , etc… el desarrollador puede designar un título, añadir encabezados y párrafos e insertar imágenes para así dar forma al documento.
• En el HTML cada elemento tiene su propio modelo de contenido, el cual describe el tipo de contenido que este debe contener.
• Los modelos de contenido se dividen en las siguientes categorías
• Elementos para seccionar
• Elementos de metadata
• Interactivos
• Fraseo, de títulos
• Elementos para incrustar
• 

Slide 6

• Algunos de estos elementos pueden pertenecer a dos o más categorías por su función y definición.
• Al dividir el contenido en secciones por temas o funcionalidad, logramos visualizar el esquema del documento.
• Antes del lanzamiento del HTML5 la mejor manera para describir el esquema o índice del contenido, era utilizando los elementos de títulos que van del H1 al H6.
• En verdad hoy siguen siendo muy importantes para identificar y generar secciones dentro del contenido.
• Aplicar estas etiquetas de títulos correctamente es fundamental para optimizar el contenido para los buscadores y uno de los elementos más importantes en el checklist del On-page SEO.
• Los autores pueden otorgar diferente peso y relevancia a las secciones del contenido utilizando el número correspondiente en el título al inicio de dicha sección.
• Utiliza el <h1> para el título del artículo o página y <h2> a <h6> para dividir el contenido interno de acuerdo al esquema del documento.

Slide 7

• Con el lanzamiento del HTML5 surgieron nuevos elementos enfocados en aumentar el poder semántico y estructural del lenguaje.
• <article>, <aside>, <nav>, <section>, <footer>, <header> y <main>
• Nuevos elementos como <main> o <nav> que describen secciones de una página de Internet y nuevos elementos como <figure> o <time> que describen el tipo de contenido que contienen.

Slide 8

• Entender el significado semántico de estos nuevos elementos permite estructurar con detalle el esquema del documento. Lo que ayuda al lector a visualizar y entender mejor el contenido.
• Además permite a personas con discapacidad, navegar y consumir tu contenido con mayor facilidad. Además que ayuda a los buscadores como Google rastrear y entender mejor el contenido de tu sitio de internet.
• Con el surgimiento de los asistentes digitales y la búsqueda por voz, hoy en día la semántica en el código de tu página es fundamental.

Slide 9

Slide 10