Descargue como PDF, TXT o lea en línea desde Scribd
Descargar como pdf o txt
Está en la página 1/ 6
¿Qué es HTML?
HyperText Markup Language (HTML) es un lenguaje de marcado utilizado para
crear páginas web. Este tipo de código te permitirá crear una página web sencilla.
HTML describe la estructura de una página web y consta de una serie de
elementos.
Los elementos HTML le dicen al navegador cómo mostrar el contenido.
Los elementos HTML etiquetan fragmentos de contenido como "este es un
encabezado", "este es un párrafo", "este es un enlace", etc.
Todos los elementos HTML pueden tener atributos que proporcionan
información adicional sobre ellos. Estos atributos se especifican siempre en la etiqueta de inicio y normalmente vienen en pares nombre/valor como: nombre="valor".
¿Sabías que lo que consumes en internet está hecho con HTML? Para revisarlo haz click derecho y busca la opción inspeccionar. Se abrirá una columna en la que podrás observar código. Este código es HTML.
Estructura de un archivo HTML
En la siguiente imagen veremos cómo es la estructura inicial de un archivo HTML. Estas líneas de código irán creciendo a medida que construyamos nuestra página web. [Recomendacion]: la indentación (el espacio que colocamos al inicio de las líneas) es un recurso muy útil, ya que nos permite distinguir visualmente cómo es la estructura del archivo. Aunque no es obligatorio, todos los desarrolladores en el mundo lo utilizan.
¿Qué es un elemento? Todos los archivos HTML están conformados por distintos elementos HTML. Estos elementos son componentes individuales (conocidos como etiquetas) que nos permiten darle una estructura al archivo. Por ejemplo...
Etiquetas Los elementos dentro de un archivo HTML se distinguen mediante etiquetas. Cada elemento tiene una etiqueta asociada.
Por ejemplo, todo lo que escribamos dentro de una etiqueta <p> se
transformará en texto plano dentro de nuestra página web. En HTML, hay muchas etiquetas que se utilizan comúnmente para estructurar y dar formato al contenido de una página web. A continuación, se presentan algunas de las etiquetas HTML más utilizadas junto con una breve descripción de su propósito:
Estructura Básica
<html>: Define el documento HTML.
<head>: Contiene metadatos, como el título de la página y enlaces a archivos
de CSS y JavaScript.
<title>: Especifica el título de la página que aparece en la pestaña del
navegador.
<body>: Contiene el contenido principal de la página web.
Texto y Formato
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Encabezados, siendo <h1> el más importante y <h6> el menos.
<p>: Define un párrafo de texto.
<a>: Define un hipervínculo.
<strong>: Denota texto con fuerte énfasis (por lo general, se muestra en
negrita).
<em>: Denota texto con énfasis (por lo general, se muestra en cursiva).
<br>: Inserta un salto de línea.
<ul>, <ol>: Listas no ordenadas (con viñetas) y ordenadas (numeradas),
respectivamente.
<li>: Define un elemento de lista.
Multimedia
<img>: Inserta una imagen.
<audio>: Inserta contenido de audio.
<video>: Inserta contenido de video.
Formularios
<form>: Define un formulario HTML.
<input>: Define un campo de entrada.
<label>: Define una etiqueta para un elemento de formulario.
<button>: Define un botón.
<select>, <option>: Define un menú desplegable y sus opciones.
Estructura y Layout
<div>: Define una sección o un contenedor genérico.
<span>: Define una sección en línea, utilizada principalmente para aplicar
estilos.
<header>, <footer>: Define el encabezado y pie de página de un documento o
sección.
<nav>: Define un bloque de navegación.
<section>: Define una sección en un documento.
<article>: Define contenido autónomo que podría ser distribuido de forma
independiente.
<aside>: Define contenido secundario, como una barra lateral.
Tablas
<table>: Define una tabla.
<tr>: Define una fila en una tabla.
<td>: Define una celda en una tabla.
<th>: Define una celda de encabezado en una tabla.
Metadatos y Scripts
<meta>: Define metadatos sobre el documento, como el conjunto de caracteres
y la descripción.
<link>: Define la relación entre el documento actual y un recurso externo, como
una hoja de estilos.
<script>: Inserta o referencia un script de JavaScript.
Estas etiquetas son fundamentales para la construcción de páginas web y
permiten a los desarrolladores estructurar y dar estilo a sus documentos de manera efectiva. Elementos de Bloque (Block Elements) Las etiquetas de bloque son elementos que se utilizan para crear secciones de contenido en una página web. Estas etiquetas tienen un comportamiento por defecto que hace que ocupen todo el ancho disponible de su contenedor principal y se colocan en una línea nueva, lo que crea un efecto de separación vertical en el diseño de la página.
Elementos en Linea (Inline Elements)
Las etiquetas de contenido son aquellas que se utilizan para marcar contenido dentro de un documento HTML. Estas etiquetas permiten definir diferentes tipos de elementos, como texto, imágenes, enlaces, listas, tablas, párrafos y más, para que el navegador web pueda interpretar y mostrar el contenido de manera adecuada.
Rutas Relativas Las rutas relativas especifican la ubicación de un recurso en relación con la ubicación del documento actual. No incluyen el dominio completo ni la URL base. Las rutas relativas son útiles cuando los recursos están en el mismo servidor, directorio o subdirectorio.
<img src="../imagen.jpg" alt="Descripción de la imagen">
Rutas Absoluta Las rutas absolutas especifican la ubicación completa de un recurso, incluyendo el protocolo (http:// o https://), el dominio y la ruta completa. Son útiles cuando necesitas vincular a recursos externos o a una ubicación específica en un dominio diferente.
<img src="https://www.ejemplo.com/imagenes/imagen.jpg" alt="Descripción de
la imagen">
¿Qué son los elementos semánticos?
Los elementos semánticos en HTML son aquellos que no solo definen la estructura de la página, sino que también tienen un significado específico para el contenido que contienen. Estos elementos ayudan a los navegadores, motores de búsqueda y desarrolladores a entender la estructura y el contenido de la página de manera más clara. Resumen de Elementos Semánticos vs No Semánticos: Elementos Semánticos: Tienen un significado claro y específico, tanto para el navegador como para el desarrollador, y ayudan a mejorar la accesibilidad y SEO.
Elementos No Semánticos: No tienen significado específico por sí mismos. Se
utilizan principalmente para propósitos de estilo y estructura sin transmitir significado.
Ejemplos: <div>, <span>
Utilizar elementos semánticos cuando sea posible es una buena práctica
porque mejora la accesibilidad del sitio, facilita el mantenimiento del código y ayuda a los motores de búsqueda a entender mejor el contenido de la página.
