Desarrollo Web

Primeros pasos a los estándares Web

En este primer artículo de la unidad conocerás el lenguaje de marcado de documentos web denominado HTML,
encargado de definir el esqueleto del contenido visualizado a través de los distintos navegadores y en cualquier
tipo de dispositivo que lo soporte. Al finalizar esta unidad podrás crear tu primer documento HTML, además de
entender las etiquetas y atributos que lo conforman.

¿Qué es HTML?

Tal como indican sus siglas en inglés: Hyper Text Markup Language, HTML es un lenguaje de marcado utilizado para
dar estructura de contenido a las páginas de Internet. Este lenguaje está compuesto de etiquetas predefinidas las que
el navegador web interpreta y muestra en una pantalla.
Las dos primeras siglas de HTML corresponden a hyper text. Pero, ¿qué es el hipertexto?

El hipertexto es un recurso con estructura lineal que permite crear, agregar,

enlazar y compartir información de cualquier documento web por medio de
enlaces asociativos entre ellos.

Desarrollo Web

1
Desarrollo Web

HTML posee etiquetas para variados tipos de contenidos: textos, listas, tablas de datos, formularios, enlaces (o
hipervínculos), imágenes y más recientemente audio y video, los que nos permiten crear variados tipos de interfaces.

Podríamos decir que HTML sirve para crear y definir documentos web, darles estructura, entregar
contenido y enlazarlos entre ellos.

A partir de este momento y durante todo el desarrollo del curso, te presentaremos varios ejemplos utilizando Repl.it
como editor de código. Tendrás a tu disposición las 3 capas de una página web (que veremos con detención más
adelante. Por ahora solo sirve saber que son 3: HTML, CSS y JavaScript) contenidas en cada una de las pestañas del
editor: index.html, index.css e index.js. Te invitamos a conocer las funciones de esta herramienta desde la siguiente
multimedia.
Observa cada uno de los elementos destacados de la multimedia para conocer las funciones de Repl.it:

Revisa el recurso multimedia desde plataforma.

Estrenemos Repl.it con el primer ejemplo de este curso: un modelo sencillo de código HTML.

En el ejemplo de código anterior se pueden observar varias etiquetas que se componen de la siguiente
estructura: ˂etiqueta˃contenido˂/etiqueta˃. El lenguaje HTML permite anidar etiquetas que en su mayoría puedes
abrir y cerrar tras insertar contenido o anidar otras etiquetas dentro.
Así como existen etiquetas que encierran contenido, como por ejemplo ˂p>texto˂/p>, podemos encontrar algunas que
permiten cerrarse −o no− a sí mismas como ˂br/> y ˂link/>. HTML permite este comportamiento ambiguo; es válido
tanto para ˂br/> como ˂br>˂/br>, siendo siempre importante cerrar una etiqueta abierta. Claramente no vas a poder
cerrar sobre sí misma una etiqueta ˂p/> porque envuelve contenido, pero sí un ˂input/> que no contiene nada.

Desarrollo Web

2
Desarrollo Web

Introducción a los estándares web

HTML nació de un documento publicado por Tim Berners-Lee llamado “HTML

Tags” (Etiquetas HTML) en el año 1991. Tim es el mismo creador de la World
Wide Web y necesitaba este formato para desplegar contenido e hipervínculos
para enlazarlos entre ellos. En esa primera versión se describían 22 etiquetas
que muestran un diseño inicial y simple de HTML.

Algunas de estas etiquetas se conservan en la actualidad, pero a medida que pasan los años se han ido deprecando,
agregándose muchas otras según avanzan las versiones del lenguaje HTML.
La última versión es HTML 5.2, la que utilizaremos a lo largo de este curso. Por tanto, en la mayoría de los casos, las
referencias a HTML deberán entenderse como HTML5.

 HTML, ¿un lenguaje de programación?

Como fue mencionado anteriormente, HTML no es un lenguaje de programación sino de formato y
estructura semántica de contenido. En HTML no se permite crear lógica alguna, solo soporta −a
través de sus etiquetas− la incorporación de datos y contenidos sin estructura de datos. En
conclusión, con HTML no se programa sino que se da formato al contenido de un documento.

La W3C
La W3C corresponde a las siglas de World Wide Web Consortium, una comunidad internacional cuyos miembros
trabajan en conjunto para crear, debatir y desarrollar los estándares que rigen el desarrollo web a nivel global.
Esta organización está encargada de estandarizar el lenguaje de marcado HTML junto a varios otros, los cuales
veremos a lo largo de este curso entre ellos: el lenguaje de estilos CSS y el lenguaje de programación interpretado
por el navegador JavaScript (en sus últimas versiones).
Las empresas participantes en este consorcio se encuentran principalmente en los rubros de:
 Indexadores de contenido (crawlers o buscadores).

 Fabricación de navegadores web (browsers).

 Fabricación de televisores (smart).

 Fabricación de dispositivos móviles.

 Fabricación de computadores y portátiles.

 Empresas afines al rubro tecnológico con enfoque en la presencia y uso de Internet.

Desarrollo Web

3
Desarrollo Web

Separación de capas: marcado, diseño y funcionalidad

La W3C comenzó a definir diferentes tipos de estándares a medida que la web crecía en popularidad y uso. Uno de
los principales errores del comienzo de la web fue mezclar dentro del mismo documento HTML la capa de estilos y de
funcionalidad. Esto aún se puede hacer en la actualidad, pero es rechazado por toda la comunidad de
desarrolladores por ser, además de poco escalable, una práctica anticuada y mal vista.

 ¿Página o Sitio Web?

Se define una página web como un documento único que despliega en una vista todo el
contenido de la misma. Un sitio web es un conjunto de páginas que conforman en un mismo
objetivo las vistas para el propósito de este sitio: informar, catalogar, vender, mostrar, etc. Es de
suma importancia el conocimiento de los estándares web que rigen este lenguaje de marcado y
que son interpretados por los navegadores web.

Principales lenguajes web

Actualmente existen 3 lenguajes que rigen las páginas web y que cumplen con las 3 capas de toda la web:

Durante el desarrollo de este curso entraremos en detalle de estas 3 capas, en sus usos y aplicaciones.
Comencemos en orden.

Desarrollo Web

4
Desarrollo Web

HTML y web semántica

Desde inicios de la web, el lenguaje HTML ha sido un componente esencial para la visualización del contenido que
se despliega en los diferentes navegadores. Como ya hemos visto, este lenguaje consiste básicamente en etiquetas
con diferentes propósitos y que encierran contenido visual o en forma de texto. La versión 5 de este lenguaje, que es
la versión del estándar actual recomendado por la W3C, tiene como principal propósito entregar sentido semántico al
contenido.
La semántica es el estudio del significado de los signos lingüísticos y sus combinaciones. En la web, la semántica
ayuda a darle significado a las etiquetas constituyentes de HTML. Este lenguaje está compuesto por elementos como
˂h1>, ˂h3˃, ˂p˃, ˂strong˃, ˂li˃, etc.; cada uno de ellos tienen un significado específico el cual ayuda al navegador o
browser a identificar el texto que los contiene y a los indexadores de contenido (buscadores como Google) a
entenderlos, de manera de entregar mejores resultados a sus búsquedas. El buen uso de la semántica de las
etiquetas HTML permite mejores resultados de búsqueda.

Usos y aplicaciones prácticas de la web semántica

HTML llegó con un fuerte propósito: unificar diferentes estándares y crear robustas aplicaciones web. Una aplicación
web es un software que se comporta como si fuese encapsulado (standalone) pero en realidad está basado en un
motor renderizado: un navegador web (web browser). Una aplicación web simple incorpora HTML, CSS y JavaScript
para servir a un propósito específico. Estos 3 lenguajes son interpretados por un navegador para que el usuario
interactúe con esta aplicación.
Veamos algunos ejemplos prácticos de usos que HTML vino a mejorar respecto de los estándares anteriores:

Multiplataforma: Crear un mismo codebase y permitir que sea utilizado de igual manera en diferentes dispositivos
(desktop, móviles, Smart TV’s, tablets).

Desarrollo Web

5
Desarrollo Web

Juegos: Crear juegos interactivos, con lógica y de alta performance a través de la nueva
etiqueta ˂canvas˃.

Aplicaciones que interactúen con el hardware del dispositivo, a través de API’s nativas como GPS, webcam y
micrófono entre otros.

Desarrollo Web

6
Desarrollo Web

Sitios web que indexen su contenido correctamente en los diferentes buscadores.

Te invitamos a descubrir en el siguiente artículo la declaración del tipo de documento o Doctype, además de las
principales etiquetas y atributos de HTML. ¡Vamos!

lenguaje de marcado : Un lenguaje de marcado o lenguaje de marcas, es un lenguaje que estructura el contenido de
un documento web a través de etiquetas semánticas y pre-establecidas. Este documento es interpretado por un
software como por ejemplo, un navegador web..
etiquetas: Las etiquetas son fragmentos de texto rodeados por corchetes angulares ˂˃, que tienen funciones y usos
específicos que se utilizan para escribir código HTML..
motor renderizado: Un motor de renderizado es una parte del software que permite que el navegador web interprete
código y lo despliegue correctamente en la pantalla. Actualmente el motor de Chrome se llama Blink, el de Safari
WebKit y el de Firefox Gecko..

Desarrollo Web

7
Desarrollo Web

Documento HTML5

¿De qué manera se estructura la declaración del tipo de documento o Doctype de HTML5? ¿Para qué sirven las
etiquetas Inline y Block? ¿Cómo se usa un atributo en HTML? Te invitamos a conocer las respuestas a estas
preguntas en el siguiente artículo.

¿Qué es DOCTYPE?

El Doctype o Declaración de Tipo de Documento es una declaración que se realiza al inicio de todo documento web y
que identifica la versión de HTML que el navegador deberá interpretar.
A modo de ejemplo, veamos algunos tipos de declaración de tipo de documento que precedieron la versión actual de
HTML: HTML 4.01 Strict, Frameset y Transitional; XHTML 1.0 Strict y Transitional (respectivamente):

Estos tipos de declaración ya no son utilizados; se recomienda el uso de la versión actual HTML5. Esta versión tiene

Desarrollo Web

8
Desarrollo Web

el siguiente doctype, el cual utilizaremos durante el desarrollo del curso: ˂!DOCTYPE html˃.

Estructura de cuerpo del documento

Como hemos visto al inicio de este curso, un documento HTML5 básico debe cumplir con la siguiente estructura de
etiquetas:

Revisemos a continuación cada uno de los elementos de la estructura de un documento básico de HTML5:

1. ˂!DOCTYPE html˃: Etiqueta que define el estándar de tipo de documento (doctype).

2. ˂html˃: Etiqueta principal que engloba todas las etiquetas del documento.
3. ˂head˃: Etiqueta de encabezado que contiene etiquetas de configuración del documento, tales como:
 ˂title˃: Título del documento.
 ˂link˃ : Enlaza una o varias hojas de estilos externas.
 ˂meta˃ : Información adicional de variados tipos, por ejemplo: tipo de encoding del documento,
descripción, etiquetas semánticas para redes sociales, etc.
 ˂script˃ : Enlace externo a un documento de definición de funcionalidades JavaScript.

Como puedes observar, la primera de ellas (˂title˃) está presente en el ejemplo anterior. Conocerás las demás
etiquetas a medida que avanzas en el curso.

 Cabe notar que ninguna de estas etiquetas interfiere visualmente en el documento, vale decir, son
solo referencias de configuración de la página y como tal, no modifican el documento más que sus
propias funciones.

4. ˂body˃ : Este es el cuerpo del documento, el cual carga con la estructura de la página y donde se define el
contenido de la misma. Títulos, logos, imágenes, videos, audio y todo tipo de contenido se agregan en cada una de
las etiquetas HTML creadas para tales propósitos. Más adelante veremos un extenso listado de las más importantes y

Desarrollo Web

9
Desarrollo Web

las más utilizadas.

5. UTF-8 (Codificación de caracteres): En documentos digitales existen muchos tipos de caracteres. Están los
occidentales, cirílicos, chinos, japoneses y todos los que se permiten en las culturas mundiales. UFT-8 es el formato
de caracteres que permite representar cualquier carácter en el estándar Unicode. Para que tu texto se vea
correctamente en cualquier tipo de navegador −en uno configurado en Chile o en China− debes agregar
explícitamente la etiqueta ˂meta˃ dentro de ˂head˃. Vuelve a revisar el ejemplo anterior.

 Comentando el código
Un código comentado es un código que no queremos que se ejecute, el cual no será visible para
el navegador. Puedes agregar comentarios para recordar algo, guiar o no utilizar en ese momento
una pieza de código. En HTML se comenta de la siguiente manera: ˂!— Este código no se
mostrará en el navegador —˃.

Etiquetas inline y block

Dentro del estándar HTML existen etiquetas que componen la estructura y la visualización de estas en una página
web. Una diferencia importante son las etiquetas inline (en línea) y block (bloque) ya que influyen sustancialmente en
cómo se despliegan en un navegador. Revisémoslas a continuación:

Desarrollo Web

10
Desarrollo Web

Observa el ejemplo a continuación para conocer la diferencia entre ambas etiquetas:

Las siguientes son las principales etiquetas HTML inline y block1.

: Define una fila en una tabla.

Etiquetas inline Etiquetas block

˂b˃: Bold, negrita. ˂address˃: Dirección.

˂i˃: Italic, itálica. ˂article˃: Contenido de artículo.

˂big˃: Texto mayor. ˂aside˃: Contenido adicional.

˂small˃: Texto menor. ˂audio˃: Reproductor de audio.

˂abbr˃: Abreviatura. ˂blockquote˃: Bloque de "cita".

Desarrollo Web

11
Desarrollo Web

Etiquetas inline Etiquetas block

˂acronym˃: Acrónimo. ˂canvas˃: Dibujo canvas.

˂cite˃: Cita. ˂div˃: División de documento.

˂code˃: Código. ˂dl˃: Lista de definición.

˂em˃: Énfasis, itálica. ˂dt˃: Título de definición.

˂strong˃: Fuerte, bold. ˂dd˃: Descripción de definición.

˂time˃: Tiempo, hora. ˂fieldset˃:Etiqueta de conjunto de campos (input de

formulario).

˂a˃: Link, enlace. ˂footer˃: Pie de página.

˂br˃: Salto de línea. ˂form˃: Formulario de entrada.

˂img˃: Imagen. ˂h1˃, ˂h2˃, ˂h3˃, ˂h4˃, ˂h5˃, ˂h6˃: Niveles de

cabecera, títulos 1-6.

˂script˃: Código JavaScript. ˂header˃: Sección o cabecera de página.

˂span˃: Contenedor de texto, sin valor semántico. ˂hr˃: Regla Horizontal (línea divisoria).

˂sub˃: Texto inferior. ˂main˃: Engloba el único contenido central del

documento.

˂sup˃: Texto superior. ˂nav˃: Enlaces de navegación.

˂button˃: Botón. ˂noscript˃: Contenido para ser usado si los scripts

(JavaScript) no son soportados o permitidos.

˂input˃: Campo de ingreso de datos. ˂ol˃: Lista ordenada.

˂label˃: Etiqueta identificadora de un ˂input˃ ˂ul˃: Lista desordenada.

˂select˃: Caja de selección de opciones. ˂li˃: Elemento de lista.

˂textarea˃: Área de ingreso de texto multilínea. ˂p˃: Párrafo.

˂td˃: Celda de una tabla. ˂pre˃: Texto preformateado.

˂th˃: Celda de una tabla. Se utiliza en header. ˂section˃: Sección de una página.

˂table˃: Tabla

˂thead˃: Encabezado de tabla.

˂tfoot˃: Pie de tabla.

Desarrollo Web

12
Desarrollo Web

Etiquetas inline Etiquetas block

˂video˃: Reproductor de vídeo.

A continuación te presentamos un ejemplo práctico de uso de etiquetas block e inline:

Observa detenidamente el ejemplo e identifica las etiquetas inline y block ¿Cuáles son? Inténtalo y luego revisa la
respuesta aquí.

Definición de atributos de etiquetas HTML5

En el lenguaje HTML cada etiqueta tiene uno o más atributos, los que extienden valores adicionales y agregan
información a los elementos o ajustan su comportamiento de diversas formas bajo los estándares que los definieron.
Existen 3 tipos de atributos:
 Atributos específicos para ciertas etiquetas.
 Atributos comunes o transversales.
 Atributos que determinan la existencia de etiquetas, como por ejemplo, los enlaces ˂a˃˂/a˃.

Desarrollo Web

13
Desarrollo Web

¿Cómo se usa un atributo HTML?

Dentro de una etiqueta HTML, se agrega un atributo seguido de otro, separando el nombre del atributo con un signo
= y rodeando su contenido con comillas "", de la siguiente manera:

En HTML5 se permite la omisión de las comillas, siempre y cuando no exista un espacio en el contenido del atributo,
por ejemplo: ˂a href=pagina.html˃Enlace a página ˂/a˃. Sin embargo, durante el curso usaremos las comillas dobles
para el código HTML.
En en el ejemplo anterior, una etiqueta ˂a˃ necesita un atributo href el cual vincula pagina.html como enlace web.

 Cabe decir que no todos los atributos sirven para todas etiquetas, aunque existen atributos
compartidos por otras etiquetas.

A continuación podrás conocer el listado de etiquetas más comunes, sus atributos y significados:

Documento descargable: Listado de etiquetas más comunes y atributos DESCARGAR 

En esta unidad vimos cómo se conforman las diferentes etiquetas HTML, algunos de sus usos y significados
semánticos los cuales son esenciales para la indexación de contenido por parte de los diferentes buscadores web.
En la siguiente unidad profundizaremos en el uso de estas etiquetas en diferentes medios.

Unicode: Unicode es un estándar de codificación de caracteres diseñado para facilitar el tratamiento informático,
transmisión y visualización de textos de múltiples lenguajes y disciplinas técnicas, además de textos clásicos de
lenguas muertas. El término Unicode proviene de los tres objetivos perseguidos: universalidad, uniformidad y
unicidad. Fuente: Enciclopedia libre, Wikipedia..
revisa la respuesta aquí.: Respuesta: Las etiquetas ˂h1˃, ˂p˃, ˂table˃ y ˂video˃ son de tipo block. Las etiquetas ˂img˃
y ˂a˃ son de tipo inline..

Desarrollo Web

14
Desarrollo Web

Resumen de la unidad 1

Primeros pasos a los estándares Web

¿Qué es HTML (Hyper Text Markup Language)?

HTML (Hyper Text Markup Language) es un lenguaje de marcado que da estructura a los contenidos de las páginas
en Internet. HTML5 no es un lenguaje de programación sino de formato; corresponde a la estructura semántica de
contenido.
 HTML nació de un documento publicado por Tim Berners-Lee llamado “HTML Tags” (Etiquetas HTML) en el año
1991.
 La W3C es la organización encargada de estandarizar el lenguaje HTML junto a varios otros.

Lenguaje de la web
Los principales lenguajes de la web son 3: HTML, CSS y JavaScript.
Es muy importante la separación de esas 3 capas. No es recomendable mezclar dentro de un mismo documento las
capas de estilos y funcionalidad.

Usos y aplicaciones prácticas de la web semántica

La web semántica se utiliza para crear multiplataformas, juegos, aplicaciones que interactúen con el hardware del
dispositivo a través de API’s nativas y sitios web que indexen su contenido correctamente en los diferentes
buscadores.

Documento HTML5

¿Qué es DOCTYPE?
Es una declaración que se realiza al inicio de todo documento web y que identifica la versión de HTML que el
navegador deberá interpretar. La última versión (HTML5) tiene el siguiente doctype:˂!DOCTYPE html˃

Estructura básica de un documento HTML

Desarrollo Web

15
Desarrollo Web

Revisemos algunos de los elementos más importantes de la estructura básica de un documento HTML:
 ˂head˃: Etiqueta de encabezado que contiene etiquetas de configuración del documento, tales como: ˂title˃,
˂link˃, ˂meta˃, ˂script˃, etc.
 ˂body˃: Corresponde al cuerpo del documento donde se define la estructura y contenido de la página web.
 UTF-8 (Codificación de caracteres): Define el tipo de carácter. UFT-8 es el formato de caracteres que permite
representar cualquier carácter en el estándar Unicode.

Etiquetas HTML: inline y block

 Las etiquetas block son elementos que forman un bloque separado; colocamos una a continuación de otra.
 Las de tipo inline permanecen en una misma línea junto a otras etiquetas inline.

Atributos de etiquetas HTML5

Cada etiqueta tiene uno o más atributos que añaden información e instrucciones para definir el comportamiento de
las etiquetas asociadas.
Tipos de atributos:
 Atributos específicos para ciertas etiquetas.

 Atributos globales.

 Atributos que determinan la existencia de etiquetas, como por ejemplo, los enlaces ˂a href=“"˃˂/a˃.

¿Cómo se usa un atributo HTML?

Dentro de una etiqueta HTML, se agrega un atributo seguido de otro, separando el nombre del atributo con un signo
= y rodeando su contenido con comillas ("), de la siguiente manera:

Desarrollo Web

16
Desarrollo Web

Glosario de la unidad 1
Revisa los principales conceptos de la unidad:

 Atributo de una etiqueta: Son aquellos elementos que añaden información e instrucciones para definir el
comportamiento de las etiquetas asociadas.
 ˂body˃: Corresponde al cuerpo del documento donde se define la estructura y contenido de la página web.

 CSS: Corresponde a la segunda capa de un sitio web. Es el lenguaje utilizado para dar estilos y diseño a través
de propiedades y valores. Sus archivos son .css
 Doctype o Declaración de Tipo de Documento: Es una declaración que se ubica al inicio de todo documento
web y que identifica la versión de HTML que el navegador deberá interpretar.
 Etiqueta block: Son elementos que forman un bloque separado; colocamos una a continuación de otra.

 Etiqueta inline: Son elementos que permanecen en una misma línea junto a otras etiquetas inline.

 Etiquetas: Son fragmentos de texto rodeados por corchetes angulares que tienen funciones y usos específicos y
se utilizan para escribir código HTML. Ejemplo: ˂esta es una etiqueta˃.
 ˂head˃: Etiqueta de encabezado que contiene etiquetas de configuración del documento, tales como: ˂title˃,
˂link˃, ˂meta˃, ˂script˃, etc. No se visualiza en el browser.
 HTML: Corresponde a las siglas de Hyper Text Markup Language. Es un lenguaje de marcado utilizado para dar
estructura de contenido a las páginas de Internet. Este lenguaje está compuesto de etiquetas predefinidas las
cuales el navegador web interpreta y muestra en una pantalla.
 HTML5: Es la quinta y actual versión del estándar HTML.
 JavaScript: Es la tercera capa de un sitio web. Corresponde al lenguaje de programación que otorga
funcionalidades e interacción. Sus archivos son .js
 La W3C (World Wide Web Consortium): Es una comunidad internacional cuyos miembros trabajan en conjunto
para crear, debatir y desarrollar los estándares que rigen el desarrollo web a nivel global.
 Lenguaje de marcado o lenguaje de marcas: Es un lenguaje que estructura el contenido de un documento web
a través de etiquetas semánticas y pre-establecidas.
 Lenguaje de programación: Es un lenguaje formal diseñado para realizar procesos funcionales leídos por
computadoras.
 Página web: Es un documento único que despliega en una vista todo el contenido de la misma.
 Sitio web: Es un conjunto de páginas web que conforman las vistas para el propósito de este sitio.

 UTF-8: Define el tipo de carácter. UFT-8 es el formato de caracteres que permite representar cualquier carácter
en el estándar Unicode.

Desarrollo Web

17