Introducción a HTML

Hola gente de EDteam...

...soy su amigo y docente digital Jonathan MirCha, y en esta ocasión quiero darles una introducción a HTML.

HTML Hyper Text Markup Language.

Lenguaje de Marcado de Hiper Texto basado en etiquetas y atributos, nos define estructura y contenido.

Etiquetas HTML.

Tabla periódica de las etiquetas HTML.

Tabla periódica de las etiquetas HTML

Estructura y Contenido.

  • El contenido es el rey.
  • Planear bien nuestra estructura HTML (uso de etiquetas).
  • Trabajar la semántica (significado de nuestro contenido).
  • La semántica de nuestras etiquetas la define el contenido y su distribución.
  • Los motores de búsqueda son ciegos, si tu contenido esta bien estructurado, tu contenido será bien posicionado.

HTML5.

  • Sitio Oficial HTML5.
  • No es un software, no se instala, no se descarga, no se necesita licencia, no cuesta, vive y existe en los navegadores web.
  • Es el paradigma actual de diseño y desarrollo web.
  • Define los actuales estándares de diseño y desarrollo web, tanto para equipos de escritorio, como para dispositivos móviles.
  • Es la sinergia de 3 tecnologías que se complementan en el Front end:
    1. HTML (estructura y contenido).
    2. CSS (diseño y presentación).
    3. JS (interactividad y funcionalidad).
  • Se subdivide en 8 implementaciones:
    1. Semántica (HTML).
    2. CSS3 (CSS).
    3. Multimedia (HTML y JS).
    4. Desconexión y Almacenamiento Local (JS).
    5. Acceso al Dispositivo (JS).
    6. 3D, Gráficos y Efectos (HTML, CSS y JS).
    7. Conectividad (JS).
    8. Rendimiento e Integración (JS).

Semántica.

Con las etiquetas semánticas mejoramos la definición de nuestro contenido, es más entendible tanto para humanos como para máquinas(algoritmos de buscadores).

Recuerda que las etiquetas semánticas no tienen una posición fija en el layout, quien determina la estructura es el contenido.

Etiquetas semánticas y estructurales:

  • <section>: Contenido genérico estructurado.
  • <article>: Contenido estructural distribuible de manera independiente.
  • <aside>: Contenido secundario relacionado o que acompaña o complementa a otro.
  • <header>: Contenido introductorio suele tener elementos de navegación y encabezados (h1...h6).
  • <footer>: Sección que contiene información acerca del documento o página.
  • <nav>: Sección relativa a enlaces dentro del documento o página.
  • <main>: Contenido principal.
  • <figure>: Sección de contenido visual, múltiples medios.
  • <figcaption>: Leyenda o pié relativo al contenido visual de figure.

Ejemplo de semántica HTML5:

semántica HTML5

Buenas Prácticas de Código HTML.

Especificar:

  • Tipo de documento HTML5
  • Atributo de idioma
  • Juego de caractéres
  • Area de Visualización

Definir:

  • Título único máx 65 caractéres
  • Descripción única máx 156 caractéres
  • Estilos antes de </head>
  • Scripts antes de </body>
  • NO Cerrar etiquetas únicas así <img src=" "> en vez de <img src=" "/>
  • Definir atributos booleanos así <input type="button" disabled> en vez de <input type="button" disabled="disabled">

Estructura Básica HTML5:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8">
	<title>Título de mi documento, este deberá ser único max 65 caracteres</title>
	<meta name="description" content="Breve descripción de lo que los usuarios
	encontrarán en este documento, deberá ser única max 156 caracteres">
	<link rel="stylesheet" href="estilos.css">
</head>
<body>
	<h1>Estructura de Documento HTML5</h1>
	<!--
		AQUÍ EL CONTENIDO HTML
		Esto es un comentaerio HTML
	-->
	<script src="codigos.js"></script>
</body>
</html>

Más Información sobre HTML:

Recuerda que en EDteam, tenemos un Curso de HTML desde cero donde te enseñamos las bases del lenguaje de marcado en que se basa Internet.

Se despide su amigo y docente digital Jonathan MirCha, sean felices, hasta siempre, nos leemos la próxima semana... 

...bye ;)

Sigue leyendo