Introducción al Desarrollo 
Web: HTML y CSS 
Parte I   
HTML: tres errores típicos 
 
Hola,  soy  Sergio  Luján  Mora,  profesor  de  informática  de  la  Universidad  de  Alicante,  y  en  este 
vídeo  que  forma  parte  del  curso  “Introducción  al desarrollo web”, te voy a hablar de tres errores 
típicos que puedes cometer cuando empiezas a aprender HTML. 
 
Antes  de  empezar,  me  gustaría  recordarte  algunos  de  los  sitios  web  en  los  que  puedes 
encontrar  más  información  sobre  mí  y  sobre  mi  trabajo,  y  dos  formas  de  contactar conmigo, a 
través  de  mi  correo  electrónico  sergio.lujan@ua.es  y  a  través  de  mi  cuenta  en  Twitter 
@sergiolujanmora. 
 
En  realidad,  los  tres  errores  de  los  que  te  voy  a  hablar,  más  que  errores  son  confusiones  o 
malas  costumbres,  y  hasta  gente  que  lleva  muchos  años  creando  páginas  web  comete  estos 
errores de vez en cuando. 
 
Así  que  presta  atención  y  evita  cometer  estos  errores  o  malas  prácticas  que  te  voy  a  contar  a 
continuación. 
 
El primer error tiene que ver con los saltos de línea. 
 
En  el  vídeo  HTML:  conceptos  básicos  (segunda  parte)  te  expliqué  que  en  HTML  podemos 
escribir  toda  una  página  web  en  una  sola  línea  porque  los  saltos  de  línea  normales  no  son 
significativos. 
 
Por  ejemplo, yo podría escribir esta pequeña página web así o de esta otra forma y mi página se 
visualizaría  exactamente  igual.  Lo  que  ocurre  es  que  normalmente  el  código  se  separa,  para 
que sea más fácil de leer. Pero no es obligatorio, es simplemente una cuestión de estilo. 
 
Pero entonces, ¿cómo se introduce un salto de línea en un texto? 
 
Para  ello  existe  una  etiqueta  llamada  <br>,  que  es  una  etiqueta  vacía  porque  no  puede  tener 
contenido entre la etiqueta de inicio y de fin. 
 
Como  es  una  etiqueta  vacía,  normalmente  nunca  la  verás  escrita  así  (yo  nunca  la  he  visto, 
aunque  se  puede),  sino  que  según  la  versión  de  HTML  la  verás  escrita  así,  por  ejemplo  en 
HTML4, o de esta otra forma en XHTML. 
 
Por  cierto,  antes  de  que  lo  preguntes,  te  contesto:  en HTML5 puedes emplear cualquiera de las 
dos posibilidades. 
 
Pero yo te aconsejo que utilices la segunda, por compatibilidad con XHTML y XML. 
 
Antes  de  continuar,  te  quiero  hacer  una  pregunta:  cuando  estás  escribiendo  en  un  editor  de 
textos,  ¿cuándo  necesitas  insertar  un  salto  de  línea  en  el  texto?  Venga,  te  dejo  unos  segundos 
para que lo pienses. ¿Ya? ¿Suficiente? 
 
Si  consultamos  la  especificación  oficial  del  lenguaje  HTML5,  y  buscamos  la  etiqueta  <br>, 
podremos leer las siguientes advertencias. 
 
El  elemento  <br> se debe usar únicamente para insertar saltos de línea que son realmente parte 
del contenido, como en un poema o en una dirección. 
 
El  elemento  <br>  no  se  debe  utilizar  para  separar  contenido  en  un  párrafo  que  realmente  es 
independiente.  Por  ejemplo,  esto  está  mal,  y  es  mejor  escribirlo  de  esta  forma,  es  decir, como 
dos párrafos independientes. 
 
Lo  mismo  ocurre  con  este  otro  código,  que  es  un  fragmento  de  un  formulario,  mucha  gente  lo 
escribe  así  (ya  lo  verás,  y  tengo  que  reconocer  que  yo  también  lo  he  hecho  más  de  una  vez), 
separando los controles del formulario de forma artificial con saltos de línea. 
 
Lo  mejor,  otra  vez,  es  escribirlo  de  esta  forma,  es  decir,  como  dos  párrafos  independientes, 
cada control con su etiqueta en su propio párrafo. 
 
Y  por  supuesto,  que  no  se  te  ocurra  hacer  barbaridades  como  esta,  crear  listas  a  mano  con 
saltos  de  línea.  Como  te  vea  hacerlo,  me  enfadaré  mucho.  Una  lista  la  tienes  que  etiquetar 
correctamente con las etiquetas correspondientes de lista. 
 
El  segundo  error  son  los  espacios  en  blanco.  Este  error  es  parecido  al  anterior,  al de los saltos 
de línea. 
 
Al  igual  que  los  saltos  de línea, en HTML los espacios en blanco no son significativos: 1, 2, o 10 
espacios  en  blanco,  al  final  se  visualizan  de  la  misma  forma.  Lo  importante  es  que  al  menos 
haya un espacio en blanco para separar. 
 
Pero  entonces,  ¿cómo  se  introducen  varios  espacios  en  blanco  entre,  por  ejemplo,  dos 
palabras? 
 
En  HTML  existe  una  forma  especial  de  representar  un  espacio  en blanco que es una referencia 
de  carácter.  A  continuación,  en  el  último  error,  veremos  con  detalle  qué  son  las  referencias  de 
caracteres. 
 
“nbsp”  significa  “no-break  space”,  es  decir,  espacio  en  blanco  que  no  se  puede romper, y no se 
debe  emplear  para  introducir  espacios  en  blanco  simplemente  por  una  cuestión  de 
presentación visual. 
 
Si  se  quieren  separar  las  palabras  en  un  texto,  por  ejemplo,  en  un  título,  introducir  espacios en 
blanco  artificiales  es  una  muy  mala  solución.  Esto  es  una  cuestión  de  presentación,  no  de 
contenido, y por tanto se debe emplear CSS. 
 
Lo  último  que  te  quiero  comentar  son  las  referencias  de  caracteres,  también  llamadas  por 
algunos autores entidades de caracteres. 
 
Las  referencias  de  caracteres  es  un  mecanismo  que  ofrece  HTML  para  incluir  en  un  texto 
caracteres  que, de otra forma, no se podrían incluir, por ejemplo por usar un juego de caracteres 
que no admite ciertos caracteres. 
 
Los  caracteres  que  no  se  pueden  incluir  se  tienen  que  escribir  de  una  forma  especial.  A  este 
proceso  en  informática  se  le  suele  llamar  ”Escapar”  los  caracteres,  palabra  horrible  que 
supongo que imaginarás que no existe en el diccionario español. 
 
HTML  permite  tres  tipos  de  referencias  de  caracteres,  y  todas  ellas  deben  empezar  con  el 
carácter “ampersand” y deben terminar con el punto y coma. 
 
Las  primeras,  las  referencias  de  caracteres  con  nombre,  emplean  unos  nombres  que  se  han 
definido para los caracteres especiales. 
 
En  la  especificación de HTML existe un apartado con las referencias de caracteres con nombre, 
que son unas miles. 
 
Aquí  podemos  ver  un  fragmento  de  esta  tabla.  En  la  primera  columna  aparece  el  nombre de la 
referencia  de  carácter,  en  la  segunda  columna  el  código  Unicode  y  en  la  tercera  columna  el 
glifo, la representación visual del carácter. 
 
Las  referencias  de  caracteres  son  necesarias  para  representar  algunos  caracteres  especiales, 
como  por  ejemplo  el  ampersand,  las  comillas  dobles  y  simples,  el  menor  que  y  el  mayor  que, 
que realizan una función especial en HTML. 
 
En  las  referencias  de  caracteres  numéricas  decimales  se  emplea  un  número  en  base  10  para 
representar el carácter. Este número es el código Unicode del carácter. 
 
La sintaxis es &# y a continuación el número, que puede estar formado por uno o varios dígitos. 
 
Por  último,  en  las  referencias  de  caracteres  numéricas  hexadecimales  se  emplea  un  número 
hexadecimal,  es  decir,  en  base  16  para  representar  el  carácter.  Otra  vez,  este  número  es  el 
código Unicode del carácter. 
 
La  sintaxis  es  &#x  (en  minúsculas  o  mayúsculas)  y  a  continuación  el  número  hexadecimal,  es 
decir,  los  dígitos  del  0  al  9  y  las  letras  de  la  A  a  la  F,  en  minúsculas  o  mayúsculas,  que  puede 
estar formado por uno o varios dígitos hexadecimales. 
 
¿Qué problema hay, entonces, con las referencias de caracteres? 
 
En  realidad,  como  he  dicho  antes,  esto  no  es  un  error,  sino algo que se podría hacer mejor. Por 
ejemplo,  en  esta  tabla  podemos  ver  que  la  “A”  mayúscula  acentuada  se  puede  representar 
como  “Aacute”  y  la  a  minúscula  como  “aacute”. Esto mismo ocurre con el resto de vocales, por 
lo  que  también  tenemos  estas  formas  de  escribir  las  vocales  acentuadas  en  el  español.  El 
problema  es  que  en  muchos  sitios  pone,  y  mucha  gente  cree,  que  esta  es  la  única  forma  de 
escribir  las  vocales  acentuadas  en  una  página  web,  por  lo  que  se  acaba  con código HTML que 
es  muy  difícil  de  leer  a  veces.  ¿Este  código  está  mal?  No,  no  está  mal,  pero  si  se  emplea  el 
juego  de  caracteres  adecuado,  como  ISO-8859-1,  también  llamado  Latin1,  o  UTF-8,  escribir  el 
texto así es totalmente inútil porque no es necesario. 
 
Para  terminar  este  vídeo,  te  recuerdo  que  para  aprender  HTML  y otras tecnologías web existen 
cientos  de  sitios  en  la  Web.  Yo  te  recomiendo  el  sitio  web  W3Schools.  En  este  sitio  puedes 
encontrar un apartado de tutoriales. 
 
Muchas gracias por tu atención. 
 
AVISO IMPORTANTE 
Este  documento,  su  texto  y  gráficos  e  imágenes,  puede  ser  utilizado  bajo  una  licencia  Creative  Commons  de  tipo 
Atribución,  No-Comercial.  En  caso  de  utilizarse  este  material  o  de  la  creación  de  un  derivado,  la  atribución  se  debe 
respetar  citando  la  fuente  como  “Actívate,  Google  España”  y  expresamente, si es posible, mediante un enlace activo 
​ ttp://google.es/activate​.  
a​ h