Scribd
Cargar
15 vistas

Conceptos Básicos de HTML - Manual de HTML y CSS

Este documento explica conceptos básicos de HTML como etiquetas, elementos y atributos. Describe etiquetas comunes como <html>, <head>, <body>, <p>, <img> y cómo crear una página web básica con HTML.

Cargado por

Jorge Araya
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
15 vistas

Conceptos Básicos de HTML - Manual de HTML y CSS

Este documento explica conceptos básicos de HTML como etiquetas, elementos y atributos. Describe etiquetas comunes como <html>, <head>, <body>, <p>, <img> y cómo crear una página web básica con HTML.

Cargado por

Jorge Araya
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 28

 lawebera.es(https://www.lawebera.

es/)  

MANUAL DE HTML Y CSS (HTTPS://WWW.LAWEBERA.ES/XHTML-CSS)

Conceptos básicos de HTML


(42 votos, promedio:
4,07 de 5)

No te pierdas nuestra guía sobre los fundamentos de HTML, aprendiendo


a utilizar las etiquetas y elementos de este lenguaje de creación de pági-
nas web.

Audiolibros en Español
Audible.com

HTML se basa en principalmente en etiquetas, que son como instrucciones para dar formato a las dife-
rentes partes de una página web.

Para toda persona interesada en crear páginas web es importante conocer al menos nociones bási-
cas de este lenguaje, de esta forma podemos comprender como están hechas las web, desarrollar si-
tios con más flexibilidad y mejor construidos.

Por ejemplo, mediante el uso de las etiquetas HTML (https://www.amazon.com/Diego-Gauchat-Juan-


ebook/dp/B07QHBP8T4/ref=as_li_ss_tl?
__mk_es_US=%C3%85M%C3%85%C5%BD%C3%95%C3%91&keywords=El+gran+libro+de+HTML5,+
CSS3+y+JavaScript&qid=1568501419&sr=8-1&linkCode=ll1&tag=lawebe-
20&linkId=df5a31ad97149d90595ee5f5f5857f14&language=es_US) puedes subrayar textos, ponerlos en
negrita, establecer encabezados, estructurar el texto en guiones, en párrafos, añadir imágenes y vínculos
a otras páginas, etc. De ahí que el conocimiento de estas etiquetas sea importante para hacer páginas
web, mejor dicho imprescindible.

Etiquetas básicas de HTML


<html>: indica el comienzo del documento HTML.

<head>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title>) de la
web, una descripción y otras informaciones relacionadas con el contenido de la página.

<body>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el


body van los textos, las imágenes y todos los contenidos de la web.

<h1>, <h2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la
página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto.
Son importantes en el posicionamiento en buscadores
(https://www.lawebera.es/posicionamiento/importancia-del-titulo-en-el-posicionamiento-web.php).

<a>: define los enlaces.

<table>: es una tabla, y dentro de esta tenemos filas <tr> y celdas <td>.

<p>: el texto dentro de esta etiqueta forma un párrafo.

<img>: imágenes.

<ul>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <li> definimos
cada guión dentro de la lista, y usando <ol> en lugar de <ul> tendremos listas ordenadas.

<b> y <strong>: se utilizan para resaltar el texto.

<u>: texto subrayado.

<i> y <em>: texto en cursiva.


Ejemplo de página básica

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Título de la página</title>
</head>

<body>
<h1>Encabezado de la página</h1>
<h2>Encabezado de menor tamaño</h2>

<p>Este es el texto de un párrafo.</p>


<p>Este es el texto de otro párrafo. Dentro de este párrafo,
pueden ir palabras <strong>en negrita</strong>, <em>en cursiva</em> o
lo
que quieras.</p>

<p>También podemos poner listas como la siguiente:</p>


<ul>
<li>Guión número uno.</li>
<li>Guión número dos.</li>
<li>Guión número tres.</li>
</ul>
</body>

</html>

Y para que lo entiendas mejor, una página básica con su correspondiente código HTML
(https://www.amazon.com/RUBIALES/dp/8441539391/ref=as_li_ss_tl?
__mk_es_US=%C3%85M%C3%85%C5%BD%C3%95%C3%91&keywords=Curso+de+Desarrollo+Web:
+HTML,+CSS+y+JavaScript&qid=1568501466&sr=8-1&linkCode=ll1&tag=lawebe-
20&linkId=a976d09039173ffc8c36e967e411bf73&language=es_US):
En la parte superior del código siempre debemos tener una declaración para definir el tipo de documento
que estamos por desplegar, el doctype.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Es muy común olvidar dar un Doctype a nuestros sitios, ya que al ser un factor técnico es fácil de omitir,
además sin un Doctype definido nuestra web sigue funcionando.

Entonces, ¿por qué ponerlo? porque si no lo haces el navegador no va a saber qué lenguaje estás utili-
zado y es muy probable que interprete mal algunos usos, lo que va a provocar errores en tu página y que
no se visualice de manera correcta.

Aquí mostramos ciertos tipos de Doctype:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”


“http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Después de definir el tipo de documento empieza la codificación del contenido.

En primer lugar utilizamos el elemento “html (https://www.amazon.com/Diego-Gauchat-Juan-


ebook/dp/B07QHBP8T4/ref=as_li_ss_tl?
__mk_es_US=%C3%85M%C3%85%C5%BD%C3%95%C3%91&keywords=El+gran+libro+de+HTML5,+
CSS3+y+JavaScript&qid=1568501419&sr=8-1&linkCode=ll1&tag=lawebe-
20&linkId=df5a31ad97149d90595ee5f5f5857f14&language=es_US)” para indicar el inicio de nuestra pá-
gina web. Es considerado el elemento raíz.

Es necesario especificar el idioma principal en el que escribiremos. Para eso usamos el atributo
“xml:lang” en elemento “html”. Su valor estará representado por la abreviación del idioma que escogimos,
si por ejemplo el idioma principal de nuestra página es el Español, entonces el valor que recibirá el atri-
buto será “es”, mientras que si es el inglés utilizaremos “en”.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">


...
</html>

Después, dentro del elemento “html”, habrá otros dos que llevarán por nombre “head” y “body”.

El primer elemento contenido dentro de la etiqueta “html” es la llamada cabecera, identificada por la
etiqueta “head” y que se encarga de contener información relativa al documento, tal es el caso de la
etiqueta “title” que se coloca dentro de la cabecera para mostrar el título de la página que se mostrará
en la barra superior de la ventana del navegador.

Después de tener bien definida la estructura de “head”, pasamos a declarar al elemento “body” el cual
tendrá como función mostrar todo el contenido que es visible por el usuario. Por ello dentro de él se
pueden usar la mayoría de las etiquetas con las que cuenta XHTML.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">


<head>
...
</head>
<body>
<!-- Contenido -->
</body>
</html>
Normas elementales en HTML
Siempre que sea posible, incluye las etiquetas de cierre, incluso si no son obligatorias, ya que esto hace
que sea más fácil seguir tu propio marcado y que sea más rápido de leer. Además, en XHTML
(https://www.lawebera.es/como-hacer/ejemplos-html-xhml) todas las etiquetas deben cerrarse, por lo que
te será más fácil si cambias de uno a otro.

Ejemplo:

<html>
...
</html>

Con frecuencia verás diseños HTML


(https://www.amazon.com/RUBIALES/dp/8441539391/ref=as_li_ss_tl?
__mk_es_US=%C3%85M%C3%85%C5%BD%C3%95%C3%91&keywords=Curso+de+Desarrollo+Web:
+HTML,+CSS+y+JavaScript&qid=1568501466&sr=8-1&linkCode=ll1&tag=lawebe-
20&linkId=a976d09039173ffc8c36e967e411bf73&language=es_US) con código indentado como el que
se muestra a continuación, es decir, código tabulado con sangrías, de forma que los bloque de texto se
mueven hacia la derecha insertando espacios para separarlos del texto adyacente que forme otras es-
tructuras diferentes.

Esto hace que sea más fácil leerlo y comprobar qué etiquetas de cierre se refieren a qué etiquetas. Por
ejemplo, esto es claramente erróneo:

<p>
<strong>
texto en negrita
<em>texto en negrita y cursiva
texto sólo en cursiva
</em>
</p>

Sin embargo, esto es válido:


<p>
<strong>
texto en negrita
<em>
texto en negrita y cursiva
</em>
</strong>
<em>
texto solo en cursiva
</em>
</p>

Etiquetas, elementos y atributos HTML


Ya hemos visto lo que es una etiqueta en HTML (https://www.amazon.com/Diego-Gauchat-Juan-
ebook/dp/B07QHBP8T4/ref=as_li_ss_tl?
__mk_es_US=%C3%85M%C3%85%C5%BD%C3%95%C3%91&keywords=El+gran+libro+de+HTML5,+
CSS3+y+JavaScript&qid=1568501419&sr=8-1&linkCode=ll1&tag=lawebe-
20&linkId=df5a31ad97149d90595ee5f5f5857f14&language=es_US), y que hay etiquetas de apertura y
(en la mayoría de los casos) etiquetas de cierre. El navegador lee estas etiquetas y crea una represen-
tación interna de lo que leyó.

Esta representación interna se conoce como un elemento. Entonces, el navegador “decide” cómo mos-
trar el elemento en la pantalla. Además, no todos los elementos se muestran en pantalla (como el
HEAD),y por el contrario algunos elementos siempre existen, incluso si no los creaste en tu código fuente
(como el HTML, HEAD o BODY).

Algunos elementos aceptan parámetros adicionales. Por ejemplo, el elemento A puede aceptar el pará-
metro HREF, que lo convierte en un enlace. Estos parámetros son conocidos como atributos, y se crean
así:
<a href="nombre-de-archivo.html">Texto del enlace</a>

Ten en cuenta que en HTML, las etiquetas y nombres de atributos se puede escribir en cualquier
circunstancia.

Algunos diseñadores web (https://www.lawebera.es/diseno-web-freelance) tienden a utilizar mayúsculas


para destacarlos en el código fuente (https://www.lawebera.es/como-hacer), otros escriben todo en mi-
núsculas para hacerlos más fáciles de traducir a XHTML más tarde si es necesario.

Mi consejo es que adoptes esta segunda opción, lo lógico es con el tiempo acabar creando páginas en
XHTML. De todas maneras, cualquiera de las dos formas es correcta en HTML
(https://www.amazon.com/RUBIALES/dp/8441539391/ref=as_li_ss_tl?
__mk_es_US=%C3%85M%C3%85%C5%BD%C3%95%C3%91&keywords=Curso+de+Desarrollo+Web:
+HTML,+CSS+y+JavaScript&qid=1568501466&sr=8-1&linkCode=ll1&tag=lawebe-
20&linkId=a976d09039173ffc8c36e967e411bf73&language=es_US).

Sintaxis de XHTML
HTML tiene una sintaxis muy sencilla y fácil de comprender, el contenido está estructurado en elemen-
tos, los cuales son declarados mediante el uso de etiquetas que proporcionan información adicional atra-
vés de atributos.

Por su parte XHTML es una versión mejorada de HTML, por lo que busca tener una sintaxis más es-
tricta que las versiones anteriores de este lenguaje de marcado y tiene menos tolerancia ante errores de
mal uso de etiquetas.

Si seguimos una correcta codificación no tendremos ningún problema y obtendremos todos los benefi-
cios del lenguaje.
La regla básica para la estructuración de xHTML es saber utilizar de manera correcta cada parte de un
elemento, tener conocimiento de la función que cumple cada pedazo de código y qué clase de contenido
albergará.

Tomemos la siguiente línea para explicar esto:

<a href="https://www.lawebera.es">La Webera</a>

Lo que tenemos aquí es un elemento de anclaje que se encarga de definir un enlace hacia una dirección.
Esta línea de código está compuesta por varias partes, una etiqueta de apertura definida por:

<a href="https://www.lawebera.es">

La cual tiene la función de iniciar el elemento, una etiqueta de clausura:

</a>

Cuya función es terminar dicho elemento, un atributo “href” que se encarga de establecer una propie-
dad que en este caso es un link hacia la dirección que especificamos con la cadena
“https://www.lawebera.es”, que se convierte en el valor del atributo, y finalmente tenemos “La Webera”
que es a lo que llamaremos el contenido del elemento.

Reglas para manejar etiquetas


Existen reglas simples de seguir diseñadas para tener un manejo correcto de etiquetas con XHTML.

Debemos recordar que xHTML no es muy distinto a su predecesor, por lo que no tenemos que olvi-
darnos de lo que ya sabemos, simplemente tenemos que omitir las malas prácticas a las que el
HTML no estricto nos acostumbró.

En primer lugar tenemos que definir que XHTML requiere que todas las etiquetas y atributos sean
escritos en minúsculas, por ejemplo si queremos declarar un elemento de tipo párrafo tenemos que es-
cribir su etiqueta de la siguiente manera:

<p>
Ya que si escribimos:

<P>

No cumple con esta regla y por lo tanto no puede ser considerado un correcto código XHTML.

El segundo aspecto a considerar es que todas las etiquetas deben cerrarse, es decir deben tener una
contraparte compuesta por una diagonal antepuesta al nombre de la etiqueta, siguiendo con el ejemplo
del párrafo, una vez que introducimos el contenido debemos cerrar la etiqueta de la siguiente manera:

</p>

Existen excepciones donde un elemento no tiene contenido, tal es el caso de los saltos de línea “br” o al-
gunos elementos de formulario como los “input”.

En estas situaciones no hay que incluir una etiqueta de cierra explícita, pero si se debe de agregar la dia-
gonal al final de la etiqueta de apertura de la siguiente manera:

<br />

La tercera regla nos indica que todos los atributos que agreguemos a un elemento deben de tener
siempre un valor y estos deben de ir entre comillas, por lo que quedaría una línea como esta:

<a href="https://www.lawebera.es">La Webera</a>

En cuarto lugar tenemos que los elementos deben estar correctamente anidados, es decir que los
elementos incluidos dentro de otros se cierren correctamente antes de cerrar el elemento padre. Pode-
mos tener líneas como esta:

<p><a href="https://www.lawebera.es">La webera es un sitio genial</a></p>

En este caso tenemos que cerrar primero el anclaje y después el párrafo pues de esta manera respeta-
mos la anidación y la jerarquía de elementos.
Atributos XHTML de uso común
Existe un grupo de atributos que se pueden utilizar en la gran mayoría de las etiquetas, éstos son catalo-
gados como de uso común y se pueden especificar aún más en base a su función, por lo que encontra-
remos atributos básicos, de internacionalización y de eventos.

Atributos XHTML básicos


Los atributos básicos son aquellos que usamos prácticamente en todos lados para rastrear y reconocer
elementos, nos referimos a “class”, “id” y “title”, incluso “style” puede caer dentro de esta categoría
aunque preferimos mantener al margen dicho atributo ya que las hojas de estilo cumplen mejor con esa
función.

Los identificadores están relacionados con el atributo “id” y se utilizan para dar una asociación única
al elemento, lo que permitirá manipularlo ya sea con JavaScript o CSS (https://www.lawebera.es/xhtml-
css/selectores-css-guia-completa.php).

Como ya se dijo, es único, por lo que no se debe repetir en otro elemento, en caso de que queramos
agrupar distintos elementos con una misma asociación entonces tendremos que usar una clase.

Aquí tenemos un ejemplo de como utilizar identificadores para cada elemento de una lista:

<ul id="ciudades">
<li id="vlc">Valencia</li>
<li id="gdl">Guadalajara</li>
<li id="blb">Bilbao</li>
</ul>

Gracias a estos identificadores podemos en un futuro localizar cada elemento de la lista sin necesidad de
recorrerla.

Las clases por su parte están relacionadas con el atributo “class”, y nos sirven para cuando hay más
de un elemento que necesita una asociación.

Si usamos el ejemplo de la lista, podemos agregar una clase que sirva para asociar todos los elementos
a los que les agregamos un identificador.
<ul id="ciudades">
<li class="spain" id="vlc">Valencia</li>
<li class="spain" id="gdl">Guadalajara</li>
<li class="spain" id="blb">Bilbao</li>
</ul>

Lo que hicimos en el ejemplo es abarcar todos los componentes de la lista con una sola clase a la que
llamamos “spain”, ya que todas las ciudades listadas pertenecen a este país.

Por su parte, “title” se encarga de añadir un título a un elemento, es quizás menos utilizado que los
dos anteriores atributos pero aún así es importante ya que nos da una idea muy general de lo que con-
tiene el elemento.

Este atributo tiene la ventaja de ser identificado por los lectores de pantalla y motores de búsqueda por lo
que ayuda a mejorar la accesibilidad a la información (https://www.lawebera.es/diseno-web/accesibilidad-
y-como-evaluar.php).

Atributos XHTML de internacionalización


También existen atributos que son utilizados para atender asuntos de internacionalización, es decir el
lenguaje que estamos utilizando en la página y la manera en que se encuentra el contenido.

Dentro de esta categoría encontramos a “dir” que se encarga de decirnos la dirección que tendrá el
contenido, es decir de izquierda a derecha para textos occidentales o de derecha a izquierda para escri-
tura árabe.

También encontramos a “xml:lang” que especifica el idioma del contenido, los valores que puede to-
mar son la abreviación del idioma, como por ejemplo “es” para español o “en” para inglés.

Atributos XHTML de eventos


Existe una clase de atributos utilizados para invocar funciones de JavaScript
(https://www.amazon.com/Diego-Gauchat-Juan-ebook/dp/B07QHBP8T4/ref=as_li_ss_tl?
__mk_es_US=%C3%85M%C3%85%C5%BD%C3%95%C3%91&keywords=El+gran+libro+de+HTML5,+
CSS3+y+JavaScript&qid=1568501419&sr=8-1&linkCode=ll1&tag=lawebe-
20&linkId=df5a31ad97149d90595ee5f5f5857f14&language=es_US) mediante el manejo de eventos, du-
rante mucho tiempo fueron la mejor alternativa para llevar a cabo esto, pero actualmente su uso no se
recomienda pues no cumplen con los estándares.

Entre dichos atributos encontramos a onclick, ondblclick, onmousedown, onmouseup, onmouseover, on-
mousemove, onmouseout, etc.
El mal uso de etiquetas HTML
Al ver el código fuente de varias páginas podemos apreciar a menudo los mismos errores que aparecen
una y otra vez, estos errores suelen ser producidos por los hábitos que arrastramos denuestros prime-
ros días en el mundo de la maquetación web, o por desconocimiento sobre la verdadera función de cada
etiqueta.

Vamos a ver las etiquetas que comúnmente son utilizadas de manera incorrecta, tratando de especificar
en que fallamos y de que manera podemos usarlas correctamente.

Etiqueta “br”
Hasta la aparición de CSS, utilizar br era una de las alternativas para todo lo referente a espacios entre
dos bloques de elementos.

Esta etiqueta no se debe de utilizar para crear espacios vacíos en tus documentos o contenido, su
función es únicamente dar un salto de línea en una oración.

Si lo que deseas es tener espacio entre un elemento y otro entonces es recomendable añadir esos
espacios mediante CSS, lo que nos permitirá determinar la distancia entre los elementos.

Etiqueta “div”
Esta etiqueta se ha convertido en una de las más utilizadas en los últimos años.

La etiqueta “div” vino a cambiar la manera en que diseñábamos la estructura de nuestras páginas
(https://www.lawebera.es/diseno-web/estructura-de-una-pagina-web-estructura-del-diseno.php), permi-
tiendo establecer capas y niveles (https://www.lawebera.es/maquetacion-web/xhtml-css/posicion-capas-
css.php) con los cuales, mediante el apoyo de CSS, podíamos adaptar nuestro sitio.

Pero su implementación se fue haciendo más común y para situaciones donde realmente no debería de
usarse.

Hay sitios que basan prácticamente toda su estructura de elementos en “divs”, incluso para mostrar
elementos de texto o imagen, esto está totalmente mal.

No tenemos que rodear todos los elementos de un sitio con un “div”, ni mucho menos utilizarlos en lugar
de etiquetas cuya función especifica es la que estamos haciendo, como mostrar una imagen.
Es perfectamente aceptable utilizar la etiqueta “div” para definir la estructura de la página
(https://www.lawebera.es/como-hacer/ejemplos-html-xhml/html-y-css-ejemplos-de-layouts.php), pero
siempre tratando de hacer uso de etiquetas más adecuadas y especializadas para los elementos de tu
página, etiquetas como el párrafo y las listas pueden ser una opción mucho más semánticamente
correcta.

Etiqueta “title”
Una etiqueta fundamental en cualquier estructura de código HTML (https://www.lawebera.es/xhtml-
css/estructura-documento-xhtml.php) es “title”, su función es básica para el sitio ya que sin ella nuestra
página no tendría un título que indique de que trata el contenido que estamos por ver.

El problema es que su uso se ha venido degradando para convertirla en una etiqueta más de “meta-
data” y hoy en día el título se usa para mejorar el SEO
(https://www.lawebera.es/posicionamiento/importancia-del-titulo-en-el-posicionamiento-web.php). Esto no
es un problema, el problema es abusar.

Es común caer en extremos al momento de utilizar esta etiqueta, o simplemente no ponemos nada
importante en ella o la llenamos de información que realmente no tiene cabida.

Debemos evitar estos dos extremos y utilizar las etiquetas “meta description” para esta clase de infor-
mación más extensa.

Etiqueta “img”
No uses imágenes para casos donde realmente no se requiera, no tienes que convertir todo en
imágenes.

Recuerda que esto es malo para que la página pueda ser analizada por motores de búsqueda
(https://www.lawebera.es/posicionamiento/intro.php), todo lo que sea contenido de texto, no debe ir en
una imagen.

A veces incluso se cometen errores al utilizar algunos de sus atributos, como el caso de “alt”, cuya fun-
ción es contener una descripción precisa de la imagen, sin embargo la mayor parte del tiempo tiene texto
irrelevante.
Consejos útiles para realizar un mejor código

Simplificar
Cuando se trata de diseñar una página web, debemos tener muy en cuenta al usuario de la misma
(https://www.lawebera.es/diseno-web/usabilidad.php). Una página web debería tener solo aquello que es
necesario.

Puede verse en muchas ocasiones, que los diseñadores terminan generando códigos extremadamente
confusos y largos, para diseños que pueden conseguirse de forma más sencilla.

Un elemento clave para la generación de un código ordenado es la planificación del diseño.

Todo diseño debe ser elaborado de afuera hacia adentro, es decir, de los elementos contenedores princi-
pales hacia los menores.

Esto quiere decir que cuando se inicia una página web, los primeros elementos que deben ser determi-
nados mediante el uso de HTML son los contenedores, como “body”.

A partir de allí, se debe generar las capas de cada sección de la estructura de la página (cabecera, co-
lumnas, pie) para luego seguir con los detalles necesarios dentro de cada una de ellas.

Tratar de no utilizar “hacks”


Los hacks (https://www.lawebera.es/como-hacer/ejemplos-css/solucionar-problemas-visualizar-web-inter-
net-explorer.php)son trucos mediante los cuales se pueden sortear algunos de los problemas generados
por las diferencias existentes en la interpretación del código por parte de los navegadores
(https://www.lawebera.es/maquetacion-web/compatibilidad-web-navegadores.php).

En la mayoría de los casos no son necesarios. Si aprendemos a aceptar las diferencias normales entre
navegadores, en lugar de exigir que tu diseño se vea exactamente igual en todos, produciremos un có-
digo más limpio y fácil de mantener.

Evitar el abuso de los posicionamientos absolutos


Una tendencia natural en los diseñadores recién iniciados, es al abuso de los elementos posicionados de
forma absoluta (https://www.lawebera.es/xhtml-css/posicion-capas-css.php) (position: absolute), debido
a que con ello se suele tener un mayor control de donde se pintan los elementos.

Las páginas generadas en forma exclusiva o casi exclusiva con posicionamiento absoluto, tienen entre
otros inconvenientes, la rigidez e inflexibilidad.
Esto hace prácticamente imposible pensar en una página con contenidos dinámicos, como un
blog, ya que la extensión de los contenidos será variable y originará diferentes errores, como desbor-
damientos de capas y superposición de contenidos.

Evitar el abuso de los ‘div’


Otro de los errores frecuentes entre principiantes es el pretender resolver todo mediante la utilización de
capas (https://www.lawebera.es/maquetacion-web/xhtml-css/posicion-capas-css.php).

No siempre es necesaria la utilización de capas para generar elementos, ya que en muchos casos exis-
ten los elementos semánticamente correctos dentro de HTML (https://www.lawebera.es/xhtml-css/).

Muchos div’s pueden ser reemplazados por la utilización correcta de listas, párrafos, títulos, etc.

Diseño flexible
En los últimos años se ha producido una explosión en la variedad de resoluciones de pantalla existentes
y dispositivos.

También se ha producido un incremento enorme en el acceso a internet con otros tipos de dispositivos
diferentes a los clásicos ordenadores.

Todo esto hace necesario que los diseños sean cada vez más flexibles, lo que se llama responsive, de
forma que puedan visualizarse de forma correcta independientemente del dispositivo que se utilice para
acceder a las páginas web.

Tenemos un artículo concreto que habla de esto, no dejes de leer como hacer un diseño respon-
sive (https://www.lawebera.es/diseno-web/hacer-diseno-web-adaptable-responsive-
design.php).
Comprobaciones en diferentes navegadores

Las conocidas diferencias existentes entre navegadores hace necesario que se utilice alguna forma de
comprobar la visualización de las páginas que se están diseñando en ellos.

Consulta nuestra guía para saber comprobar la compatibilidad de tu web con distintos navegado-
res (https://www.lawebera.es/maquetacion-web/compatibilidad-web-navegadores.php).

Escribir las etiquetas en minúsculas


A pesar de que en HTML se pueden escribir las etiquetas tanto en minúsculas como en mayúsculas, de-
bemos tener en cuenta que en XHTML esto no es correcto al igual que en XML, por lo que si quieres evi-
tar problemas futuros, es recomendable escribir siempre las etiquetas con minúsculas.

Esto estaría mal:

<DIV><P>Hola Mundo</P></DIV>

Y esto bien:

<div><p>Hola Mundo</p></div>
No olvidar el cierre de las etiquetas
Algo que ya hemos explicado más arriba y representa un error, es olvidar el cierre de las etiquetas.

Cuando se trata de etiquetas que pueden contener elementos del mismo tipo anidados, los navegadores
simplemente entienden que dicha etiqueta continúa abierta.

Además de producir dificultades y errores en la maquetación de la página, se trata de errores en el uso


del lenguaje, por lo que el código no pasará la validación.

Separar el código CSS del código HTML


La utilización de etiquetas como <font> o <u>, son cosa del pasado. En la actualidad está casi deste-
rrada la inclusión de etiquetas HTML
(https://www.amazon.com/RUBIALES/dp/8441539391/ref=as_li_ss_tl?
__mk_es_US=%C3%85M%C3%85%C5%BD%C3%95%C3%91&keywords=Curso+de+Desarrollo+Web:
+HTML,+CSS+y+JavaScript&qid=1568501466&sr=8-1&linkCode=ll1&tag=lawebe-
20&linkId=a976d09039173ffc8c36e967e411bf73&language=es_US) pertenecientes a la presentación
dentro del código.

Se recomienda manejar los estilos CSS


(https://www.amazon.com/RUBIALES/dp/8441539391/ref=as_li_ss_tl?
__mk_es_US=%C3%85M%C3%85%C5%BD%C3%95%C3%91&keywords=Curso+de+Desarrollo
+Web:+HTML,+CSS+y+JavaScript&qid=1568501466&sr=8-1&linkCode=ll1&tag=lawebe-
20&linkId=a976d09039173ffc8c36e967e411bf73&language=es_US) en un archivo por separado
para mantener una mejor organización del sitio. Usar archivos únicos y exclusivos para las hojas de
estilo (https://www.lawebera.es/xhtml-css/conceptos-css-guia-principiantes.php) hace que se
facilite su edición y administración.

Entre los principales beneficios de utilizar un archivo externo para guardar nuestro código CSS
(https://www.amazon.com/RUBIALES/dp/8441539391/ref=as_li_ss_tl?
__mk_es_US=%C3%85M%C3%85%C5%BD%C3%95%C3%91&keywords=Curso+de+Desarrollo+Web:
+HTML,+CSS+y+JavaScript&qid=1568501466&sr=8-1&linkCode=ll1&tag=lawebe-
20&linkId=a976d09039173ffc8c36e967e411bf73&language=es_US), se encuentra el hecho de que este
archivo se puede utilizar para varios sitios y páginas de manera simultánea, sin necesidad de repetir
el código de un lado a otro.

De igual manera, el manejar un archivo CSS


(https://www.amazon.com/RUBIALES/dp/8441539391/ref=as_li_ss_tl?
__mk_es_US=%C3%85M%C3%85%C5%BD%C3%95%C3%91&keywords=Curso+de+Desarrollo+Web:
+HTML,+CSS+y+JavaScript&qid=1568501466&sr=8-1&linkCode=ll1&tag=lawebe-
20&linkId=a976d09039173ffc8c36e967e411bf73&language=es_US) representa un ahorro de tiempo al
momento de la ejecución y despliegue de las páginas HTML. Al utilizar únicamente un archivo para todo
el sitio, este se guarda en el caché del navegador lo que conlleva a un tiempo menor de respuesta y
una carga más rápida.

Es importante recalcar el hecho de que las hojas de estilo deben incluirse dentro de las etiquetas “head”,
de la siguiente forma:

<head>
...
<link rel="stylesheet" type="text/css" href="mi_estilo.css" />
</head>

Coloca los scripts al final del HTML


Antes se acostumbraba cargar los archivos relacionado a JavaScript (https://www.lawebera.es/manual-
de-jquery) entre las etiquetas “head” del código.

Esto provocaba una demora en el tiempo de respuesta del sitio, ya que el navegador debe cargar pri-
mero todos los scripts con sus funciones antes de empezar a pintar los elementos en pantalla.

Es por esta razón que en la actualidad se recomienda agregar los scripts al final de nuestro código
HTML, justo antes del cierre de la etiqueta “body”:

<body>
...
<script type="text/javascript" src="mi_script.js" />
</body>

Con esto lograremos que la página se cargue más rápido ya que el navegador no tiene que esperar a
cargar los scripts y puede ir pintando elementos en pantalla, lo cual hace que el usuario obtenga una res-
puesta casi inmediata.
Por Verónica Milán

Coautor del artículo: Daniel Hernesto Navarro Herrera y Andrés Fernández. Licencia: Contenido exclusivo
de LaWebera.es. Prohibida su copia.

Actualizado el 8 febrero, 2019

Relacionados

Compatibilidad de tu web con distintos navegadores


(https://www.lawebera.es/xhtml-css/compatibilidad-web-navegadores.php)
Podremos estar satisfechos si conseguimos que se vea igual de bien en los más importantes, como Explorer,
Firefox, Opera, Safari y Mozilla.
¿Cómo darle un uso apropiado a CSS3? (https://www.lawebera.es/xhtml-
css/darle-uso-apropiado-css3.php)
CSS3 nos ha brindado muchas nuevas herramientas que nos permiten crear grandes efectos, pero es muy pro-
bable que les estemos dando un enfoque inadecuado, en este artículo tratamos de definir un uso correcto.

Estilo y estructura de enlaces con XHTML y CSS


(https://www.lawebera.es/xhtml-css/estilo-estructura-enlaces.php)
En este artículo nos enfocamos en el estudio del Hipertexto (enlaces de texto), definiendo como estructurarlos y
darles un diseño estético.

16 respuestas

anonimo dice:
6 abril, 2020 a las 14:47 (https://www.lawebera.es/xhtml-css/conceptos-basicos-
html.php#comment-48076)

Muchas gracias, aclaró varias dudas y dio inicio a otras nuevas, mil gracias.

RESPONDER

Verónica Milán dice:


7 abril, 2020 a las 17:11 (https://www.lawebera.es/xhtml-css/conceptos-basicos-
html.php#comment-48077)

Gracias a ti!! :)

RESPONDER
lucas dice:
8 abril, 2014 a las 20:08 (https://www.lawebera.es/xhtml-css/conceptos-basicos-
html.php#comment-7640)

Hay almenos dos errores de sintaxis y semantica en el ejemplo

Abre un h1 y cierra un h2
Encabezado de la página

Suponiendo que la etiqueta es h1, por semantica debe existir un h2 antes del h3, esta MAL usar un
h3 si no aparecio antes su h2.

RESPONDER

Verónica Milán dice:


12 abril, 2014 a las 15:11 (https://www.lawebera.es/xhtml-css/conceptos-basicos-
html.php#comment-47236)

Toda la razón. Corregido, gracias por avisar :)

RESPONDER

juandemata.jimé[email protected] dice:
30 enero, 2014 a las 23:48 (https://www.lawebera.es/xhtml-css/conceptos-basicos-
html.php#comment-7561)

Gracias, Verónica por todo el aporte brindado en su página web. Son un ratoncito muy nuevo en
esto de la web. Seguiré aprendiendo con sus enseñanzas. Otra vez, ¡gracias!

RESPONDER

federico dice:
17 enero, 2013 a las 20:30 (https://www.lawebera.es/xhtml-css/conceptos-basicos-
html.php#comment-4400)

Muy buena la pagina, yo ahora estoy en todo este tema de la informática y de html.
En mi pagina tengo un formulario para comentar pero no me funciona muy bien, ¿podrías decirme
como haces para que cuando comentan se modifique el html y aparezca el comentario?, si me lo di-
ces me ayudarías un montón, por que quisiera que cuando los usuarios entren a mi web puedan co-
mentar la pagina y que aparezca en la pagina el comentario, y tambien me gustó eso de que a te
llegue el correo electrónico pero que no aparezca.

Ojalá puedas responder a mis preguntas, gracias.

RESPONDER

Daniel Ernesto Navarro Herrera dice:


18 enero, 2013 a las 18:09 (https://www.lawebera.es/xhtml-css/conceptos-basicos-
html.php#comment-4405)

Hola federico, para esto que pides necesitas hacer uso de un lenguaje de lado servidor
como PHP, JSP, ASP.NET, etc.

Los comentarios que el usuario escriba necesitan ser almacenados en algún lugar, común-
mente se utiliza una tabla de base de datos para ello, el formulario debe apuntar a una pa-
gina, función o controlador donde tú establezcas la funcionalidad para guardar esa informa-
ción en la base de datos.

Una vez teniendo la información en la base de datos, deberás hacer una consulta a esta
para desplegar los comentarios en tu página.

Saludos

RESPONDER

Jofre dice:
10 junio, 2010 a las 20:41 (https://www.lawebera.es/xhtml-css/conceptos-basicos-
html.php#comment-579)

Yo aconsejo CMS Joomla, para aquellos que no seais programadores ni diseñadores. Es un CMS
muy potente que se aprende en tan solo unas horas. Su versatilidad y la gran comunidad que hay
detrás nos permite crear excelentes páginas en poco tiempo, Además aplicar SEO en el desarrollo
es fácil gracias a la multitud de extensiones para ello y la implementación de etiquetas para todas
las urls.

RESPONDER
cloud dice:
27 octubre, 2009 a las 1:58 (https://www.lawebera.es/xhtml-css/conceptos-basicos-
html.php#comment-1171)

sus comentarios son muy buenos y he hecho muchas tareas grasias a esta pagina

RESPONDER

lilian dice:
2 junio, 2009 a las 20:30 (https://www.lawebera.es/xhtml-css/conceptos-basicos-
html.php#comment-1169)

yo lo uso el htlm s genial

RESPONDER

juan dice:
8 enero, 2009 a las 10:08 (https://www.lawebera.es/xhtml-css/conceptos-basicos-
html.php#comment-1168)

hola no se exactamente donde puedo postear esto pero me gustaria saber si por medio de un codio
HTML podria resolver mi problema que es el siguiente: yo he creado una pagina con dreamweaver y
la e subido a un servidor gratuito, la cuestion es que yo me meto en mi pagina por medio de internet
y se me ve perfecta, entro desde cualquier otro pc y las letras no se ven en color y algunas cosas
de estilo que tiene la pagina tampoco se ven como por ejemplo el orden en los textos. agradeceria
mucho vuestra ayuda

RESPONDER

nicolas dice:
1 mayo, 2008 a las 1:32 (https://www.lawebera.es/xhtml-css/conceptos-basicos-
html.php#comment-571)

gracias por contestarme


intentare estudiar algo sobre los CMS,conosco paginas que usan wordpress y son muy buenas,
(aunque no se mucho como se intala o usa el CMS de forma detallada o experiencia propia),igual
creo que resultara;pero no quiero adelantarme mucho,apenas empiezo y veo de a poco lo que hay
que hacer;creo q esto me servira enormemente,te lo agradesco mucho.

RESPONDER

Verónica Milán dice:


29 abril, 2008 a las 15:21 (https://www.lawebera.es/xhtml-css/conceptos-basicos-
html.php#comment-570)

Hola Nicolás. Saber HTML es necesario si quieres hacer páginas web, es como lo básico así que mi
consejo es que no dejes de estudiar este lenguaje.

En cuanto a lo que dije de aprender lenguajes dinámicos si tu página tiene un ritmo de actualización
muy alto lo dije porque actualizar webs hechas en HTML puro es más costoso, por el tema de tener
que estar tocando código fuente continuamente.

Para webs muy actualizadas puedes optar por utilizar un cms (si no sabes lo que es mira aquí
http://es.wikipedia.org/wiki/CMS (http://es.wikipedia.org/wiki/CMS)) que te facilitan todo el trabajo de
actualización enormemente y no requieren que domines PHP, ASP o similares, aunque tener un co-
nocimiento básico sobre ellos no te venga mal.

Algunos CMS interesantes son wordpress o joomla.

Un saludo.

RESPONDER

nicolas dice:
29 abril, 2008 a las 3:55 (https://www.lawebera.es/xhtml-css/conceptos-basicos-
html.php#comment-569)

tengo un objetibo para mi web,principalmente queria crear un fansite de TV con distintos videos de
series que tengo y colocarlos en linea en lo que podria ser mi futura web;el articulo tenia como refe-
rencia que para paginas muy actualizadas y con contenido dinamico nesesitaria aprender “PHP” o
“ASP” antes que HTML que es lo que estudio aqui por el momento,aun no se subir videos o
imagenes,mi nivel de aprendizaje es casi inicial y recien leo esta leccion;¿tendria que estudiar PHP
o ASP como podria ser otro tipo de sistemas para crear el tipo de webs que quiero tener o nesesito
estudiar todo esto en forma completa?,es decir q seria como aprender HTML,CSS,ASP o PHP y etc.
de forma total en lugar de solo estudiar alguno de ellos
RESPONDER

Verónica Milán dice:


11 abril, 2008 a las 13:50 (https://www.lawebera.es/xhtml-css/conceptos-basicos-
html.php#comment-568)

Raquel prueba con alguno de estos manuales:

El HTML hecho realmente facil: http://www.jmarshall.com/easy/html/spanish/


(http://www.jmarshall.com/easy/html/spanish/)
HTML con clase: http://html.conclase.net/tutorial/html/ (http://html.conclase.net/tutorial/html/)
HTML correcto: http://www.danielclemente.com/html/ (http://www.danielclemente.com/html/)
Manual práctico de HTML: http://www.etsit.upm.es/~alvaro/manual/manual.html
(http://www.etsit.upm.es/~alvaro/manual/manual.html)

Todos son de buena calidad y de fácil comprensión, espero que te ayuden.

Un saludo.

RESPONDER

Raquel dice:
11 abril, 2008 a las 0:34 (https://www.lawebera.es/xhtml-css/conceptos-basicos-
html.php#comment-567)

Disculpe pero el manual de HTML no logro entenderlo, tengo menos de 20 años y es bastante bá-
sico mi conocimiento sobre el tema.
¿Alguna sugerencia de un manual que empieze de cero?
personalmente HTML me resulta enormemente complicado

RESPONDER

Deja una respuesta


Escribe sin faltas de ortografía y usa puntos y comas para que se entienda lo que quieres de-
cir. Sino, hay que editar cada comentario y se tarda mucho más. Si escribes con cuidado antes
obtendrás una respuesta.
El correo electrónico no se publica. Todos los campos obligatorios.

Comentario *

Nombre *

Correo electrónico *

Publicar el comentario

Consulta la información básica sobre protección de datos aquí 

Exprime WordPress para ganar dinero


Suscríbete y te enviaré un ebook gratis con los mejores métodos para ganar dinero con tu web.

Quiero el ebook gratis (https://www.lawebera.es/boletin-novedades)

LaWebera.es © 2024. Todos los derechos reservados


 (https://www.facebook.com/lawebera)  (https://twitter.com/lawebera)

LaWebera.es participa en el Programa de Afiliados de Amazon EU, un programa de publicidad para afiliados diseñado para ofrecer
a sitios web un modo de obtener comisiones por publicidad, publicitando e incluyendo enlaces a Amazon.com y Amazon.es. Es de-
cir, si compras un producto a través de nuestros enlaces de afiliado, a tí no te cuesta nada pero Amazon nos da una comisión que
nos ayuda a financiar que LaWebera.es siga existiendo.

También podría gustarte