HTML from scratch
What a tag is, the structure of a document, the tags used 90% of the time, and forms. With a live editor.
HTML is the skeleton of every web page: it describes WHAT is there (a heading, a paragraph, an image, a form). CSS gives it style and JavaScript gives it behaviour, but it all starts here.
A tag
El HTML son etiquetas que envuelven contenido. La mayoría van en pareja: apertura y cierre.
<p>Esto es un párrafo</p>
│ │ │
apertura contenido cierre (con /)Algunas etiquetas llevan atributos (información extra): <a href="https://...">enlace</a>. Y unas pocas no tienen cierre: <img>, <br>, <input>.
The structure of a document
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la pestaña</title>
</head>
<body>
<!-- todo lo que se ve va aquí -->
<h1>Hola</h1>
</body>
</html><head>: datos que no se ven (título, codificación, enlaces a CSS).<body>: todo el contenido visible.
Live editor
Escribe HTML a la izquierda y velo a la derecha. Prueba los ejemplos:
Try HTMLinteractivo
HTML
Result
The most-used tags
| Etiqueta | Para |
|---|---|
<h1> … <h6> | encabezados, de más a menos importante (un solo h1 por página) |
<p> | párrafo de texto |
<a href> | enlace a otra página o sección |
<img src alt> | imagen (alt = texto alternativo, obligatorio) |
<ul> <ol> <li> | listas sin orden / numeradas y sus elementos |
<strong> <em> | importante (negrita) / énfasis (cursiva) |
<div> <span> | contenedores genéricos (bloque / en línea) para maquetar |
<table> <tr> <th> <td> | tabla, fila, celda de cabecera, celda |
<form> <input> <label> <button> | formularios |
Semantic tags
En vez de <div> para todo, HTML tiene etiquetas que dicen qué son. Ayudan al SEO y a los lectores de pantalla:
<header> cabecera de la página o de una sección
<nav> menú de navegación
<main> el contenido principal (uno por página)
<article> contenido independiente (un post, una noticia)
<section> una sección temática
<aside> contenido lateral (relacionado pero secundario)
<footer> pie de páginaCheck what you've learned
¿Dónde va el contenido que se ve en la página?
¿Para qué sirve el atributo
alt de <img>?