Estructura básica de Encabezado y formato Enlaces, imágenes,
HTML. de texto. tablas y formularios
1. <!DOCTYPE html> - 2. <p>...</p> - 3. <img src="URL"
Define el tipo de Define un párrafo de alt="Descripción"> -
documento como texto. Inserta una imagen.
HTML5. Ejemplo: <p>Este es un Ejemplo: <img
Ejemplo: <!DOCTYPE párrafo de texto.</p> src="[Link]"
html> alt="Descripción de la
imagen">
4. <html>...</html> - 5. <br> - 6. <table>...</table> -
Contenedor principal Inserta un salto de Define una tabla.
de todo el contenido línea. Ejemplo:
HTML. Ejemplo: Línea <table><tr><td>Celda
Ejemplo: 1<br>Línea 2 1</td><td>Celda
<html>...</html> 2</td></tr></table>
7. <head>...</head> 8. <hr> 9. <tr>...</tr> -
Contiene metadatos Inserta una línea Define una fila en una
sobre el documento. horizontal. tabla.
Ejemplo: Ejemplo: <hr> Ejemplo: <tr><td>Fila 1,
<head>...</head> Celda 1</td><td>Fila 1,
Celda 2</td></tr>
10. <title>...</title> - 11. 12. <td>...</td> - Define
Título de la página <strong>...</strong> una celda de datos en
visible en la pestaña del Aplica negrita a texto una fila de tabla.
navegador. importante. Ejemplo:
Ejemplo: <title>Mi Ejemplo: <td>Contenido de
Página Web</title> <strong>Texto en celda</td>
negrita</strong>
13.<body>...</body> 14. <em>...</em> 15. <form>...</form> -
Contiene el contenido Aplica cursiva a texto Crea un formulario para
visible de la página enfatizado. ingresar y enviar datos.
web. Ejemplo: <em>Texto Ejemplo: <form><input
Ejemplo: en cáursiva</em> type="text"><button>E
<body>...</body> nviar</button></form>
16. <h1>…</h1> - 17. <ul><li>…</li></ul> 18.<input ttype=“text”>
Encabezado principal. - Lista desordenada Campo de entrada de
Ejemplo: con viñetas. texto.
<h1>Título Ejemplo: Ejemplo:
Principal</h1> <ul><li>Elemento <input type=”text”
1</li><li>Elemento placeholder=”Escribe
2</li></ul> aquí”>
19. <a 20. <ol><li>…</li></ol> 21.
href=”URL”>…</a> Crea - Lista ordenada <button>…</button> -
un enlace a otra página numerada. Botón interactivo.
o recurso. Ejemplo:
Ejemplo: <a <ol><li>Elemento Ejemplo:
href=[Link] 1</li><li>Elemento <button>Enviar</butto
om>Ir a Example</a> 2</li></ol> n>
22. 23. <nav>…</nav> - 24.
<header>…</header> - Contenedor para <textarea>…</textarea>
Define el encabezado enlaces de navegación. - Crea un área de texto
de una sección o de varias líneas.
página. Ejemplo: <nav><a
href=”#inicio”>Inicio</ Ejemplo:
Ejemplo: a> | <a <textarea>Escribe
<header>Encabezadde href=”#contacto”>Cont aquí</textarea>
página</header> acto</a></nav>
25. 26. 27. <footer>…</footer>
<section>…</section> - <article>…</article> - - Pie de página de una
Define una sección de Contenido sección o página.
contenido relacionada. independiente, como
Ejemplo: una entrada de blog. Ejemplo: <footer>©
<section><h2>Sección< 2024 Mi Sitio
/h2><p>Contenido de Ejemplo: Web</footer>
la <article><h2>Título</h
sección</p></section> 2></article>
28. <aside>…</aside> - 29. <audio controls 30. <video controls
Contenido relacionado src=”audio.mp3”></au src=”video.mp4"></vid
o complementario. dio> - Inserta un eo> - Inserta un video
archivo de audio. con controles.
Ejemplo: <aside>Barra
lateral de contenido
relacionado</aside> Ejemplo: <audio Ejemplo: <video
controls controls
src=”audio.mp3”></au src=”video.mp4"></vid
dio> eo>
31. <div>…</div> - 32. <span>…</span> 33.<iframe
Contenedor genérico Contenedor en línea src=”URL”></iframe>
para agrupar contenido. para aplicar estilos. - Inserta un documento
HTML dentro de otro.
Ejemplo: Ejemplo: <span
<div>Contenido style=”color: Ejemplo: <iframe
agrupado</div> red;”>Texto en src=[Link]
rojo</span> m></iframe>
34.<meta 35.<link 36.<script
charset=”UTF-8”> - rel=”stylesheet” src=”[Link]”></script>
Define el conjunto de href=”[Link]”> - - Inserta o enlaza un
caracteres del Enlaza una hoja de archivo JavaScript
documento. estilos CSS. externo.
Ejemplo: <meta Ejemplo: <link Ejemplo: <script
charset=”UTF-8”> rel=”stylesheet” src=”[Link]”></script>
href=”[Link]”>
37.<label 38. <select><option>… 39.
for=”id”>Texto</label> - </option></select> - <fieldset>…</fieldset> -
Etiqueta para asociar un Crea un menú Agrupa elementos en
texto con un elemento desplegable. un formulario, junto
de formulario. con <legend>.
Ejemplo:
Ejemplo: <label <select><option>Opció Ejemplo:
for=”nombre”>Nombre: n 1</option></select> <fieldset><legend>Dato
</label> s</legend>…</fieldset>
40. <main>…</main> - 41. <progress 42. <figure>…</figure> -
Define el contenido value=”50” Agrupa una imagen con
principal de la página. max=”100"> - Barra de su descripción.
progreso que indica un
Ejemplo: porcentaje. Ejemplo: <figure><img
<main><h2>Contenido src=”[Link]”
principal</h2><p>Texto Ejemplo: <progress alt=””><figcaption>Desc
aquí</p></main> value=”75” ripción</figcaption></fi
max=”100"></progress gure>
>