Preguntas y Respuestas sobre HTML

1. ¿Qué significa HTML?

HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto).

2. ¿Para qué sirve el HTML?

El HTML sirve para estructurar el contenido de una página web (textos, imágenes, enlaces, formularios, etc.). Es el esqueleto básico de cualquier sitio web.

3. ¿Qué es una etiqueta en HTML?

Una etiqueta HTML es un código que se escribe entre los símbolos < > y que define elementos en una página web. Por ejemplo: <p> para párrafos o <img> para imágenes.

4. ¿Cómo se estructura una página HTML básica?
<!DOCTYPE html>
<html>
<head>
    <title>Título de la página</title>
</head>
<body>
    <!-- Contenido visible aquí -->
</body>
</html>
5. ¿Qué etiquetas son necesarias para crear una página mínima en HTML?

Las etiquetas esenciales son: <!DOCTYPE html>, <html>, <head>, <title> y <body>.

6. ¿Qué es el elemento <head> y qué información contiene?

El elemento <head> contiene metadatos (información sobre el documento) que no se muestran directamente en la página. Incluye:

7. ¿Qué se coloca dentro del elemento <body>?

Dentro del <body> se coloca todo el contenido visible de la página web:

8. ¿Qué etiqueta se utiliza para crear un título principal en una página?

La etiqueta <h1> se usa para el título principal. HTML tiene 6 niveles de encabezados:

<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Sub-subtítulo</h3>
<!-- ... hasta h6 -->
9. ¿Cómo se insertan párrafos de texto en HTML?

Se utiliza la etiqueta <p> (paragraph):

<p>Este es un párrafo de ejemplo.</p>
<p>Este es otro párrafo.</p>
10. ¿Qué etiquetas existen para crear listas?

Hay dos tipos principales de listas:

Listas no ordenadas (con viñetas):

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
</ul>

Listas ordenadas (numeradas):

<ol>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
</ol>
11. ¿Cómo se crea un enlace (link) en HTML?

Se usa la etiqueta <a> con el atributo href:

<a href="https://www.ejemplo.com">Texto del enlace</a>

También se pueden crear enlaces a otras páginas del mismo sitio:

<a href="contacto.html">Contacto</a>
12. ¿Qué etiqueta se usa para insertar una imagen?

La etiqueta <img>:

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

Es una etiqueta auto-cerrada (no necesita </img>).

13. ¿Qué atributo de la etiqueta <img> define la dirección de la imagen?

El atributo src (source) define la ruta o URL de la imagen:

<img src="fotos/mi-foto.jpg" alt="Mi foto">
<img src="https://www.ejemplo.com/imagen.png" alt="Imagen externa">
14. ¿Qué es un atributo en HTML?

Un atributo es información adicional que se coloca dentro de una etiqueta para modificar su comportamiento o apariencia. Los atributos generalmente vienen en pares nombre-valor:

<etiqueta atributo="valor">Contenido</etiqueta>

Ejemplos comunes:

15. ¿Qué significa la etiqueta <a> y qué atributo necesitas para enlazar?

La etiqueta <a> (anchor, ancla) se usa para crear hipervínculos. El atributo esencial es href que especifica la URL de destino:

<a href="destino.html">Texto del enlace</a>

También puede incluir otros atributos como target="_blank" para abrir en nueva pestaña.

16. ¿Qué es un formulario en HTML?

Un formulario HTML es una sección de un documento que contiene controles (campos de texto, casillas de verificación, botones, etc.) para que los usuarios ingresen datos que pueden ser enviados a un servidor para su procesamiento.

Ejemplos comunes: formularios de contacto, login, búsqueda, registro, etc.

17. ¿Qué etiqueta se usa para crear un formulario?

La etiqueta <form>:

<form action="/procesar" method="POST">
    <!-- Elementos del formulario aquí -->
</form>

Atributos importantes:

18. ¿Qué etiqueta se usa para un campo de texto en un formulario?

La etiqueta <input> con type="text":

<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">

Otros tipos útiles de <input>:

19. ¿Cómo se crea un botón en HTML?

Hay varias formas:

1. Botón de envío en formularios:

<input type="submit" value="Enviar">

2. Botón genérico:

<button type="button">Click aquí</button>

3. Botón de reset:

<input type="reset" value="Limpiar">
20. ¿Qué diferencia hay entre <div> y <span>?
Elemento Descripción Comportamiento Uso típico
<div> Contenedor genérico en bloque Ocupa todo el ancho disponible y fuerza un salto de línea Estructurar secciones de la página
<span> Contenedor genérico en línea Ocupa solo el espacio necesario y no fuerza saltos de línea Aplicar estilos a partes de texto

Ejemplo:

<div>Este es un bloque</div>
<div>Este es otro bloque</div>

<p>Este es un <span style="color:red;">texto</span> con estilo.</p>
21. ¿Qué son los comentarios en HTML y cómo se escriben?

Los comentarios son notas que no se muestran en el navegador, útiles para documentar el código. Se escriben así:

<!-- Esto es un comentario -->

Pueden abarcar múltiples líneas:

<!-- 
    Este es un comentario
    de múltiples líneas
-->
22. ¿Qué es una tabla en HTML y qué etiquetas la componen?

Una tabla HTML es una estructura para mostrar datos en filas y columnas. Las etiquetas principales son:

Estructura básica:

<table>
    <tr>
        <th>Encabezado 1</th>
        <th>Encabezado 2</th>
    </tr>
    <tr>
        <td>Dato 1</td>
        <td>Dato 2</td>
    </tr>
</table>
23. ¿Cómo se organiza una tabla en HTML? (Filas y columnas)

Las tablas se organizan en filas (<tr>) que contienen celdas (<td> o <th>). Cada <tr> representa una fila, y cada celda dentro representa una columna.

Ejemplo con 2 filas y 3 columnas:

<table border="1">
    <tr>
        <th>Nombre</th>
        <th>Edad</th>
        <th>Ciudad</th>
    </tr>
    <tr>
        <td>Ana</td>
        <td>25</td>
        <td>Madrid</td>
    </tr>
    <tr>
        <td>Carlos</td>
        <td>30</td>
        <td>Barcelona</td>
    </tr>
</table>
24. ¿Qué etiqueta se usa para agregar una imagen que también es un enlace?

Se anida una etiqueta <img> dentro de una etiqueta <a>:

<a href="destino.html">
    <img src="imagen.jpg" alt="Descripción">
</a>

Ejemplo práctico:

<a href="https://www.google.com" target="_blank">
    <img src="google-logo.png" alt="Ir a Google">
</a>
25. ¿Qué etiqueta se usa para resaltar texto en negrita?

Hay dos opciones principales:

1. <strong>: Indica que el texto es importante (semántico).

2. <b>: Solo aplica negrita visualmente (sin significado semántico).

<p>Este es un <strong>texto importante</strong>.</p>
<p>Este es un <b>texto en negrita</b>.</p>
26. ¿Cómo se define el idioma de una página en HTML?

Se usa el atributo lang en la etiqueta <html>:

<html lang="es">
<!-- Contenido en español -->
</html>

Ejemplos para otros idiomas:

27. ¿Qué significa DOCTYPE en un documento HTML?

<!DOCTYPE html> es una declaración que indica al navegador qué versión de HTML se está usando. En HTML5 (la versión actual), es simplemente:

<!DOCTYPE html>

Su propósito es:

28. ¿Qué es la etiqueta <meta> y para qué sirve?

La etiqueta <meta> proporciona metadatos sobre el documento HTML. Algunos usos comunes:

1. Codificación de caracteres:

<meta charset="UTF-8">

2. Viewport (para diseño responsive):

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. Descripción para motores de búsqueda:

<meta name="description" content="Descripción de la página">

4. Palabras clave (menos importante hoy):

<meta name="keywords" content="HTML, CSS, JavaScript">
29. ¿Cómo se aplican estilos básicos (colores, tamaños) en una página HTML?

Hay tres métodos principales:

1. Estilos en línea (con el atributo style):

<p style="color: blue; font-size: 16px;">Texto azul</p>

2. Hoja de estilo interna (en <head>):

<style>
    p {
        color: red;
        font-size: 18px;
    }
</style>

3. Hoja de estilo externa (archivo .css):

<link rel="stylesheet" href="estilos.css">

El método recomendado es el tercero (hoja de estilo externa) para separar el contenido de la presentación.

30. ¿Qué relación tiene HTML con CSS?

HTML y CSS trabajan juntos pero tienen funciones diferentes:

HTML CSS
Estructura el contenido Estiliza la presentación
Define qué se muestra Define cómo se muestra
Etiquetas como <p>, <h1> Reglas como color: red;, font-size: 16px;
Es el esqueleto de la página Es la piel y ropa de la página

Ejemplo de cómo trabajan juntos:

<!-- HTML -->
<p class="destacado">Texto importante</p>

<!-- CSS -->
<style>
    .destacado {
        color: red;
        font-weight: bold;
    }
</style>