El lenguaje HTML es el mas utilizado para la estructuración de paginas web, practicamente no se utiliza otro lenguaje mas, En este post nos sumergiremos en la primera de las tres partes que divide el desarrollo web, deglosaremos HTML, etiquetas, atributos, eventos, etc.
HTML (HyperText Markup Language) es el lenguaje de marcado estándar utilizado para definir la estructura y el contenido de las páginas web mediante un sistema de etiquetas que actúan como el esqueleto del sitio. Estas etiquetas organizan elementos como encabezados, párrafos, enlaces e imágenes,permitiendo que los navegadores interpreten y presenten la información de forma jerárquica y legible.
Las etiquetas son palabras clave encerradas entre < y > que le dan instrucciones al navegador de como mostrar el cPtemas de codigo para pagina estilo visual studio code open sourceetición ontenido de la pagina, ejemplo: <p>, <h1>, <div>, etc. Se usan en pares (etiqueta de apertura y cierre) para "envolver" el contenido.
Las etiquetas pueden llevar atributos, que proporcionan información adicional sobre el elemento. Siempre van dentro de la etiqueta de apertura. Existen atributos especificos para cada etiqueta como tambien atributos globales que pueden ser utilizados con cualquier etiqueta, entre estos encontramos:
Es un identificador único. Como un número de identificación (DNI/Cédula); no debería haber dos elementos con el mismo id en una página. Se usa mucho para aplicar estilos específicos o anclas de navegación.
<h1 id="titulo-principal">Bienvenido</h1>Es un identificador grupal normalmente utilizado para aplicarles estilos con CSS.
<p class="parrafo-destacado">Texto importante</p>Permite escribir código CSS directamente dentro de la etiqueta.
<p style="color: red; font-size: 18px;">Texto rojo</p>Muestra un pequeño cuadro de texto (tooltip) cuando dejas el cursor encima del elemento.
<a href="https://ejemplo.com" title="Visita nuestro sitio">Enlace</a>Indica el idioma del contenido de ese elemento (muy importante para el SEO y los lectores de pantalla).
<p lang="es">Este texto está en español.</p>Un atributo booleano que, si está presente, oculta el elemento de la vista.
<p hidden>Este párrafo está oculto.</p>La estructura básica de un documento HTML5 comienza con <!DOCTYPE HTML> para indicar que es un documento HTML, ademas, permite elegir la version que es utilizara, seguida de la etiqueta raíz <html> que indica donde comienza y termina el codigo HTML. La siguiente etiquea es <head>(metadatos, título, enlaces a estilos) por ultimo <body> (contenido visible como texto, imágenes y enlaces). Es esencial para la correcta visualización en navegadores.
<!DOCTYPE html>
<html>
<head>
<!-- Metadatos de la pagina -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titulo de la pagina</title>
</head>
<body>
<!-- Estructura de la pagina -->
</body>
</html> Las etiquetas <html>, <head> y <body> forman la base esencial de todo documento HTML. <html> envuelve todo el documento y acepta atributos como lang para el idioma. <head> contiene metadatos invisibles para el usuario. <body> contiene todo el contenido visible.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi sitio</title>
</head>
<body>
<h1>Bienvenido</h1>
</body>
</html>| Atributo | Descripción | Ejemplo |
|---|---|---|
| lang | Especifica el idioma del documento (importante para SEO y lectores de pantalla) | <html lang="es"> |
| xmlns | Define el namespace XML del documento (para XHTML) | <html xmlns="..."> |
<a> crea enlaces a otras páginas o recursos. <link> enlaza recursos externos como hojas de estilo CSS.
<a href="https://example.com" target="_blank">Visita Example</a><link rel="stylesheet" href="style.css" type="text/css">| Atributo | Descripción | Ejemplo |
|---|---|---|
| Etiqueta <a> | ||
| href | URL de destino del enlace | href="https://..." |
| target | Dónde abrir el enlace (_blank para nueva pestaña) | target="_blank" |
| title | Tooltip que aparece al pasar el cursor | title="Más info" |
| Etiqueta <link> | ||
| rel | Relación del recurso (stylesheet, icon, etc.) | rel="stylesheet" |
| href | Ruta al recurso externo | href="style.css" |
| type | Tipo MIME del recurso | type="text/css" |
<table> define la tabla. <tr> crea filas. <td> define celdas de datos. <th> define celdas de encabezado.
<table border="1">
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Ana</td>
<td>25</td>
</tr>
</table>| Atributo | Descripción | Ejemplo |
|---|---|---|
| Etiqueta <table> | ||
| border | Ancho del borde de la tabla | border="1" |
| cellpadding | Espacio interior de las celdas | cellpadding="8" |
| cellspacing | Espacio entre celdas | cellspacing="0" |
| Etiquetas <td> y <th> | ||
| colspan | Número de columnas que ocupa la celda | colspan="2" |
| rowspan | Número de filas que ocupa la celda | rowspan="2" |
Conjunto de etiquetas para crear formularios interactivos que recopilan datos del usuario.
<form action="/submit" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Tu nombre">
<button type="submit">Enviar</button>
</form><select name="pais">
<option value="ve">Venezuela</option>
<option value="co" selected>Colombia</option>
</select><fieldset>
<legend>Datos personales</legend>
<textarea name="comentario" rows="4" cols="50"></textarea>
</fieldset>| Atributo | Descripción | Ejemplo |
|---|---|---|
| Etiqueta <form> | ||
| action | URL donde se envían los datos del formulario | action="/submit" |
| method | Método HTTP (GET o POST) | method="post" |
| Etiqueta <input> | ||
| type | Tipo de campo (text, email, password, number, etc.) | type="text" |
| name | Nombre del campo para el envío | name="email" |
| placeholder | Texto de ejemplo dentro del campo | placeholder="..." |
| required | Campo obligatorio (atributo booleano) | required |
| Etiqueta <label> | ||
| for | Vincula el label con el id del input | for="nombre" |
| Etiqueta <select> | ||
| name | Nombre del selector | name="pais" |
| multiple | Permite seleccionar varias opciones | multiple |
| Etiqueta <option> | ||
| value | Valor enviado al servidor | value="ve" |
| selected | Opción seleccionada por defecto | selected |
| Etiqueta <textarea> | ||
| rows | Número de líneas visibles | rows="4" |
| cols | Ancho en caracteres | cols="50" |
| Etiqueta <button> | ||
| type | Tipo de botón (submit, button, reset) | type="submit" |
| disabled | Deshabilita el botón | disabled |
<p> define párrafos. <br> inserta saltos de línea. <hr> crea separadores horizontales entre secciones.
<p>Este es un párrafo.</p>
<p>Otro párrafo con<br>salto de línea.</p>
<hr>
<p>Después del separador.</p>| Atributo | Descripción | Ejemplo |
|---|---|---|
| Etiqueta <hr> | ||
| color | Color de la línea | color="red" |
| size | Grosor de la línea en píxeles | size="2" |
| width | Ancho de la línea (porcentaje o píxeles) | width="50%" |
<ol> crea listas ordenadas (numeradas). <ul> crea listas desordenadas (con viñetas). <li> define cada elemento de la lista.
<ol type="1">
<li>Primer elemento</li>
<li>Segundo elemento</li>
</ol>
<ul>
<li>Manzana</li>
<li>Naranja</li>
</ul>| Atributo | Descripción | Ejemplo |
|---|---|---|
| Etiquetas <ol> y <ul> | ||
| type | Estilo de numeración/marcador (1, A, a, I, i para ol; disc, square, circle para ul) | type="A" |
| start | Número inicial (solo ol) | start="5" |
| Etiqueta <li> | ||
| value | Valor numérico del elemento (solo ol) | value="10" |
<img> inserta imágenes. <iframe> embebe páginas externas. <script> inserta código JavaScript. <style> inserta CSS.
<img src="foto.jpg" alt="Descripción de la imagen" width="300"><iframe src="https://example.com" width="500" height="300" allowfullscreen></iframe><script src="app.js" defer></script><style media="screen">
body { color: blue; }
</style>| Atributo | Descripción | Ejemplo |
|---|---|---|
| Etiqueta <img> | ||
| src | Ruta o URL de la imagen | src="img/foto.jpg" |
| alt | Texto alternativo (accesibilidad) | alt="Logo" |
| width | Ancho de la imagen | width="300" |
| height | Alto de la imagen | height="200" |
| Etiqueta <iframe> | ||
| src | URL de la página a embedir | src="https://..." |
| allowfullscreen | Permite pantalla completa | allowfullscreen |
| Etiqueta <script> | ||
| src | URL del archivo JavaScript externo | src="app.js" |
| type | Tipo de script (normalmente "text/javascript") | type="text/javascript" |
| defer | Ejecuta el script después de cargar el HTML | defer |
| async | Ejecuta el script de forma asíncrona | async |
| Etiqueta <style> | ||
| media | Medio al que aplican los estilos (screen, print, etc.) | media="screen" |
<title> define el título de la página que aparece en la pestaña del navegador y en los resultados de búsqueda.
<title>Mi Página Web - Bienvenida</title>Esta etiqueta no tiene atributos propios, solo acepta los atributos globales.
<div> es un contenedor de nivel de bloque usado para agrupar elementos y aplicar estilos o estructura al diseño. No tiene semántica especial.
<div class="contenedor">
<h2>Título</h2>
<p>Contenido</p>
</div>Esta etiqueta no tiene atributos específicos, solo acepta los atributos globales.