Errores HTML de principiantes.

Si sigues por aquí es porque todavía tengo oportunidad de hacer que te guste el mundo del diseño web, por ello hoy vamos a dedicar la entrada a ver los errores de principiante en HTML5, el idioma que pone la estructura de nuestra web.

El lenguaje HTML fue creado por Tim Berners Lee, el padre de la web. Este lenguaje permite que los archivos que dan estructura a una web estén formados únicamente de texto, llamando a las imágenes, videos, etc. de la web a través de este, para ello se utilizan las etiquetas HTML como <img>, <video>… Que le dicen al navegador que ahí hay una imagen o un video y el traduce el código en el formato multimedia que le corresponde.

Errores HTML básicos de principiantes


A su vez el navegador tiene que hacer otra cosa: actualizarse, ya que cada x tiempo aparece una versión nueva de HTML, en la que además de eliminarse etiquetas se añaden otras, y los desarrolladores deben encargarse de que el navegador pueda traducir estas  etiquetas correctamente.

Con esta introducción al HTML podemos continuar viendo los errores básicos que podemos cometer al hablar este idioma sin que nadie se pierda.

Corrige tu escritura: al igual que en español una frase se debe comenzar con la primera en minúscula y el final marcarlo con un punto, en HTML se deben abrir y cerrar casi todas las etiquetas, a excepción de algunas como video o img, si no todo te sale en rojo.

Respeta el orden de las cosas: si abres una etiqueta, por ejemplo un <div>(contenedor), y dentro de ella anidas varias etiquetas, como una <p>(párrafo) y un <h1>(encabezado), asegúrate de cerrar la primera cosa que abres al final, de forma que el código quede así.
<div>

<h1> Encabezado</h1>

<p>Párrafo</p>

</div>

Olvida la correcta ortografía:si has leído mi guía de CSS o sabes algo del lenguaje, habrás visto que a las etiquetas HTML se las puede dar una clase o id para únicamente dar estilo exclusivo a un elemento o a unos pocos, muchas veces las clases de estos elementos las ponemos en español y no está mal, lo que está mal es ser correctos y poner las tildes a cada palabra, ya que es algo que a la larga puede traernos problemas. Además de escribir las clases/id Sin tilde, también te recomiendo hacerlo todo en minúsculas, nada de la primera en mayúsculas y las siguientes en minúsculas, más que nada porque al final se nos olvida como la escribimos y si no la escribimos tal cual está en el archivo HTML en el CSS esté no te va a mostrar los estilos que le has dado a esa clase o id y en ese momento toca remover cielo y tierra a ver como la escribimos. Por último, para terminar con el apartado clases e ids no les nombres con cosas tontas, insultos, adjetivos despectivos, frases raras Porque es como cuando estás haciendo el tonto por el  pasillo del centro comercial, miras arriba y llegó el momento cámara, ese momento en tu web es cuando el usuario le da a F12, o botón derecho del ratón > Inspeccionar, y ven todo tu archivo HTML de la página en la que se encuentran con sus respectivas clases, id’s…

Comillas y puntos y comas: Como en español y en cualquier idioma cuando se cita algo la frase va entrecomillada, es decir, tiene comillas delante de ella y al final, si no la cita se quedaría coja, lo mismo pasa en este lenguaje, si al poner <p style=color: #333> o <p class=ejemplo> ninguna de las dos cosas va a funcionar, al igual que si ponemos una imagen <img src=ejemplo> o un enlace <a href=ejemplo.com>, por lo que acuérdate de revisar bien si todo, tanto etiquetas si es necesario como comillas, está bien cerrado. Otra cosa en la que se parece nuestro idioma con este lenguaje es que nosotros también utilizamos puntos y comas para separar elementos en una oración (la casa, que está en construcción; el parque, donde los niños juegan), sin embargo en el entorno web cambia un poquitín la cosa. Si quisiéramos darle varios estilos a un párrafo, como un fondo negro y unas letras blancas, la casa se convertiría en background-color, la , en cambio serían : y el que está en  construcción sería #333, mientras que el punto y coma  se quedaría como está para separar las dos declaraciones. El código final entonces sería:
<p style=background-color: #333; color: #fff>

La verdad es que no hay nada peor que los sudores que te dan cuando ves que elementos de la web no tiran y no encuentras el error, por eso espero haberte ayudado con esta agrupación de los errores de principiante que incluso cuando dejas de serlo sigues cometiéndolos.

Fuente: este post proviene de Con un portátil bajo el brazo, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Etiquetas: HTML: Nivel A1

Recomendamos

Relacionado

general desarrollo web html5 ...

Dia #3 – Estructura básica de html5

Estructura básica Aunque gran parte de la atención que se tiene sobre HTML5 gira en torno a las nuevas API, y sus 30 nuevos elementos con la nueva semántica que se puede utilizar en tradicionales páginas estáticas, también en las franja de controles de formularios. Vamos a tocar un poco el tema de lo básico como veníamos tratando hasta ahora, Vamos a ver un poco la estructura básica y algunas mejo ...

general html5 programación ...

Día #7 Hablemos de los Microdatos en Html5 (Microdata)

Existe una nueva forma de marcar una frontera semántica en HTML5, se trata de las nuevas posibilidades que tenemos de definir una estructura semántica más fuerte y más personalizada utilizando los microdatos (microdata) que nos van a permitir desarrollar mejor las estructura web dándole una gran prioridad al trabajo del SEO y la indexación a los diferentes buscadores. Los microdatos van a permiten ...

general seo

Cómo debe ser la estructura de un Blog para un correcto posicionamiento: SEO ON PAGE.

La estructura de un Blog es la base sobre la que se construye y distribuye todo su contenido. En ella existen dos partes fundamentales: una visible compuesta por los componentes que conforman su presentación y otra invisible que sirve para que los sistemas que acceden al mismo sean capaces de analizar y extraer correctamente su información. La correcta estructura de un Blog asegura una correcta ex ...

Tutoriales Blogging Estilos

Como poner una biografía debajo de las entradas.

Feliz miércoles ! Se siente bien estar de regreso después de varios días de tener completamente abandonado el blog. Mi familia y yo estuvimos de paseo y pudimos conocer algunos lugares que nos encantaron y nos dejaron con deseos de quedarnos más días, pero nimodo, teníamos que regresar. Me muero de ganas de compartir con ustedes todas las imágenes que tome por donde andaba. Pero hoy vengo a otra c ...

general propuestas

Cómo añadir suscripción por correo electrónico en Blogger

Los componentes de suscripción por correo electrónico, sirven para que los usuarios que visitan un sitio web, puedan suscribirse a sus actualizaciones recibiéndolas por correo electrónico. Se trata de una herramienta fundamental para cualquier blog o sitio web, pues crea un vínculo directo entre sus visitantes y su autor. Cuando el creador de la página web publica un contenido, éste llega a todos ...

general

Curso Blogger: aprende a utilizar las hojas de estilo

En anteriores entregas aprendimos un poco de HTML básico que nos sirviera de base para luego comprender mejor la plantilla Blogger. Después pasamos a la acción creando nuestra primera plantilla y por último los contenedores de la cabecera, el cuerpo, una barra lateral y el pie del Blog. La idea es no copiar y pegar el código que "nos dan hecho", esta vez se trata de conseguir entender ...

Sin categoría

¿Qué necesitas aprender para programar en WordPress?

Como ya hemos comentado otras veces, si eres capaz de programar en WordPress y en la web en general, accedes a otra dimensión de posibilidades para tu proyecto online. Imagen de Fotolia - ©Digiclack Esto es así porque saber programar fulmina todas las barreras que te puedas encontrar en el desarrollo de tu proyecto online, ya no dependerás del plugin X para hacer tal cosa o de encontrar el tema Y ...

general css css3 ...

Fundamentos de CSS: Selectores

Selectores CSS: Fundamentos Hoy inicio una nueva temática en el Blog, traduciendo al español interesantes articulos de una colega desarrolladora front-end freelance que se llama Maria Kovacs. Les comparto un este post muy interesante y bien explicado sobre Selectores CSS:Fundamentos. Todos los creditos del post son de Maria Kovacs de quien les compartiré más información al final de esta traducci ...

Blog diseñador web diseño web ...

¿Cómo emplear un buen diseño web?

Para crear un buen diseño web, hay que saber varios aspectos, estos permiten que no solo sea un limpio y atractivo layout sino que, ayuda también para la optimización del sitio web. Un diseño de esta índole esta caracterizado por una estructura que esta construida mediante un lenguaje de etiquetas (HTML) que permite edificar la arquitectura del mismo. Por lo general cuando se maqueta una web, se u ...

internet

Cómo hacer que tu site sea compatible en todos los ordenadores.

A veces ocurre que debido a la configuración de nuestra plantilla en Blogger, nuestro blog o sitio web se puede ver en algunos navegadores y en otros no. Sucedió hace algunas semanas que uno de nuestros sitios web, se podía ver en todos los navegadores excepto en Firefox. Al intentar cargar la página en dicho navegador, cargaba y luego la página se quedaba en blanco. Buscando información pudimos ...