TAI
Tema

HTML para Oposiciones TAI: Guía Completa

📝 30 preguntas 📖 Teoría 🎯 Preparación TAI

💡 Qué aprenderás

En este tema estudiarás todos los conceptos necesarios para responder correctamente las preguntas relacionadas con HTML en la oposición.

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje de marcado estándar utilizado para crear y estructurar el contenido de las páginas web.

No es un lenguaje de programación, sino un lenguaje que define la estructura y el significado de los distintos elementos que componen un documento web.

Los navegadores interpretan el código HTML para mostrar textos, imágenes, enlaces, formularios, tablas y otros elementos al usuario.

📖 Definición
HTML define la estructura de una página web; CSS define su apariencia y JavaScript añade comportamiento e interactividad.

Conceptos fundamentales

Para comprender HTML es imprescindible conocer los siguientes conceptos:

  • Etiqueta (Tag): elemento que define la estructura del documento.
  • Elemento HTML: conjunto formado por la etiqueta de apertura, el contenido y la etiqueta de cierre.
  • Atributo: información adicional que modifica el comportamiento de una etiqueta.
  • Documento HTML: archivo con extensión .html.
  • DOM (Document Object Model): representación en memoria del documento HTML.
🎯 Muy preguntado
HTML pertenece a la capa de presentación de contenidos, siendo la base sobre la que trabajan CSS y JavaScript.

Estructura básica de un documento HTML

Todo documento HTML5 sigue una estructura similar:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi página</title>
</head>
<body>
    <h1>Hola Mundo</h1>
</body>
</html>

Cada parte cumple una función específica:

  • <!DOCTYPE html> indica que se utiliza HTML5.
  • <html> contiene todo el documento.
  • <head> almacena información no visible.
  • <body> contiene el contenido mostrado al usuario.
💡 Consejo para el examen
Todo documento HTML5 debería comenzar con <!DOCTYPE html>.

Características de HTML

HTML presenta las siguientes características:

  • Es un lenguaje de marcado.
  • Utiliza etiquetas.
  • Es independiente del sistema operativo.
  • Es interpretado por el navegador.
  • Permite estructurar documentos hipertexto.
  • Constituye el estándar para la creación de páginas web.
🎯 Muy preguntado
HTML describe la estructura del contenido, pero no su diseño ni su comportamiento.

Etiquetas HTML

Las etiquetas indican al navegador cómo interpretar cada parte del documento.

Generalmente siguen esta estructura:

<etiqueta>Contenido</etiqueta>

Existen también etiquetas sin cierre, como:

<br>
<img>
<meta>

Las etiquetas pueden incluir atributos:

<a href="https://ejemplo.com">Enlace</a>
⚠️ Error habitual
No todas las etiquetas necesitan etiqueta de cierre.

Atributos HTML

Los atributos proporcionan información adicional sobre los elementos HTML.

Su sintaxis general es:

<etiqueta atributo="valor">

Algunos atributos habituales son:

Atributo Función
id Identificador único.
class Agrupa elementos para CSS o JavaScript.
href Dirección de un enlace.
src Ruta de una imagen o recurso.
alt Texto alternativo de una imagen.
title Información adicional al pasar el cursor.
💡 Consejo para el examen
Los atributos id y class son fundamentales para CSS y JavaScript.

Estructura semántica

HTML5 incorpora etiquetas semánticas que describen el significado del contenido.

Las principales son:

Etiqueta Función
header Cabecera.
nav Navegación.
main Contenido principal.
section Sección temática.
article Contenido independiente.
aside Información complementaria.
footer Pie de página.

Estas etiquetas mejoran:

  • La accesibilidad.
  • El SEO.
  • La organización del código.
🎯 Muy preguntado
HTML5 recomienda utilizar etiquetas semánticas frente al abuso de <div>.

Encabezados

Los encabezados establecen la jerarquía del contenido.

HTML dispone de seis niveles:

<h1>Título principal</h1>
<h2>Sección</h2>
<h3>Subsección</h3>
  • <h1> representa el título principal.
  • <h2> inicia una sección.
  • <h3> desarrolla una subsección.
⚠️ Error habitual
Una página debería contener un único h1 principal y mantener una jerarquía lógica de encabezados.

Enlaces e imágenes

Los enlaces permiten navegar entre recursos mediante la etiqueta <a>.

<a href="https://ejemplo.com">Visitar sitio</a>

Las imágenes se insertan mediante:

<img src="imagen.jpg" alt="Descripción">

El atributo alt mejora:

  • La accesibilidad.
  • El posicionamiento SEO.
  • La visualización cuando la imagen no puede cargarse.
🎯 Muy preguntado
El atributo alt es obligatorio desde el punto de vista de la accesibilidad.

Formularios HTML

Los formularios permiten recoger información del usuario.

Los elementos más utilizados son:

Etiqueta Función
form Contenedor del formulario.
input Campo de entrada.
label Etiqueta descriptiva.
textarea Texto multilínea.
select Lista desplegable.
button Botón.

Ejemplo:

<form>
    <label>Nombre</label>
    <input type="text">
    <button>Enviar</button>
</form>
📌 Recuerda
HTML crea el formulario, pero normalmente su procesamiento se realiza mediante JavaScript o un servidor.

Listas y tablas

HTML permite organizar información mediante listas y tablas.

Tipos de listas:

  • Lista ordenada (<ol>).
  • Lista no ordenada (<ul>).
  • Elemento de lista (<li>).

Las tablas utilizan:

  • <table>
  • <tr>
  • <th>
  • <td>
💡 Consejo para el examen
Las tablas deben emplearse para datos tabulares y no para diseñar la distribución de una página.

HTML5

HTML5 introdujo importantes mejoras respecto a versiones anteriores.

Entre ellas destacan:

  • Etiquetas semánticas.
  • Soporte para audio y vídeo.
  • Formularios más completos.
  • Nuevos tipos de entrada.
  • APIs para aplicaciones web.

Ejemplos de nuevos tipos de entrada:

  • email
  • number
  • date
  • range
  • color
🎯 Muy preguntado
HTML5 es la versión utilizada actualmente en prácticamente todos los desarrollos web.

Comparación HTML, CSS y JavaScript

Tecnología Función
HTML Estructura del contenido.
CSS Diseño y presentación.
JavaScript Interactividad y lógica del cliente.
⚠️ Error habitual
Es muy frecuente confundir HTML con un lenguaje de programación.

Caso práctico

Situación

Se desea crear una página web sencilla con un título, un párrafo y una imagen.

Solución

Se utilizaría un documento HTML similar al siguiente:

<body>
    <h1>Mi página</h1>
    <p>Bienvenido al sitio web.</p>
    <img src="logo.png" alt="Logotipo">
</body>

El navegador interpretará las etiquetas y mostrará el contenido correctamente estructurado.

💡 Consejo para el examen
HTML describe qué elementos contiene la página; el navegador decide cómo representarlos.

Ventajas e inconvenientes

Ventajas

  • Fácil de aprender.
  • Estándar universal.
  • Compatible con todos los navegadores modernos.
  • Base de cualquier sitio web.
  • Integración con CSS y JavaScript.

Inconvenientes

  • No permite implementar lógica de programación.
  • Requiere CSS para el diseño.
  • Requiere JavaScript para la interactividad.
  • El código es visible desde el navegador.

Errores habituales

⚠️ Error habitual
Los errores más frecuentes al estudiar HTML son:
  • Pensar que HTML es un lenguaje de programación.
  • Confundir HTML con CSS o JavaScript.
  • Utilizar varios <h1> sin una jerarquía adecuada.
  • Abusar de <div> en lugar de etiquetas semánticas.
  • Olvidar el atributo alt en las imágenes.
  • Utilizar tablas para maquetar páginas.

Cómo evitarlos

  • Diferenciar claramente HTML, CSS y JavaScript.
  • Utilizar una estructura semántica.
  • Mantener la jerarquía correcta de encabezados.
  • Añadir atributos descriptivos en imágenes y enlaces.
  • Reservar las tablas para datos tabulares.

Relaciones con otros temas

HTML está directamente relacionado con:

  • CSS.
  • JavaScript.
  • DOM.
  • HTTP.
  • Navegadores web.
  • Desarrollo Front-end.
  • APIs Web.
  • Accesibilidad.
  • SEO.
📌 Recuerda
En exámenes es muy frecuente relacionar HTML con CSS, JavaScript, DOM, HTML5, etiquetas semánticas, formularios y accesibilidad.

Conceptos clave para recordar

[!NOTE]

  • HTML (HyperText Markup Language) es el lenguaje de marcado estándar para crear páginas web.
  • No es un lenguaje de programación.
  • Define la estructura del contenido.
  • HTML5 es la versión actualmente utilizada.
  • Todo documento HTML5 comienza con <!DOCTYPE html>.
  • Los elementos se definen mediante etiquetas y atributos.
  • Las etiquetas semánticas (header, main, section, article, footer, etc.) mejoran la accesibilidad y el SEO.
  • HTML trabaja conjuntamente con CSS (presentación) y JavaScript (interactividad).
  • El navegador interpreta el documento HTML y construye el DOM (Document Object Model) para representar la página.

📝 Preguntas de ejemplo

Comprueba si reconoces este tipo de preguntas.

1. ¿Qué significan las siglas HTML?
2. ¿Cuál es la función principal de HTML?
3. ¿Cuál es la versión actual del estándar HTML?
4. ¿Qué etiqueta indica el inicio de un documento HTML?
5. ¿Qué declaración debe aparecer al principio de un documento HTML5?

¿Has terminado de estudiar?

Ahora pon a prueba tus conocimientos realizando el test completo de este tema.

Comenzar test

Utilizamos cookies

Utilizamos cookies analíticas para conocer el uso de la plataforma y mejorar la experiencia del usuario. Puedes aceptar o rechazarlas en cualquier momento. Más información en nuestra Política de Cookies .