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.



¿Vulnera este post tus derechos? Pincha aquí.
Creado:
Etiquetas: HTML: Nivel A1

Relacionado

Estructura básicaAunque gran parte de la atención que se tiene sobreHTML5gira 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 mejoras ...

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 ...

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 exp ...

Plantilla Web CSS, HTML y PHP. Las lecturas previas para desarrollar esta plantilla son las siguientes: Guía de CSS para Principiantes Ejemplo de Plantilla CSS (Ejemplo1) Ejemplo de Plantilla CSS (Ejemplo2) ¿Cómo Abrir una Página HTML Dentro de un DIV? Después de revisar los ejemplos, Se propone la práctica de CSS, HTML y PHP por medio del desarrollo de una plantilla web que

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 s ...

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 co ...

Después de mucho pedírmelo.... ¡¡¡el curso de html y css está aquí!!Siento haber tardado tanto en lanzarlo, pero preparar un curso de html no es como preparar un curso sobre promocionar un blog.Al fin y al cabo, todo aquello que os enseño en cómo promocionar o en otros de mis cursos, no deja de estar en vuestro idioma. El html es un lenguaje nuevo. Ya no vale copiar y pegar como hacíamos en los cu ...

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 - ©DigiclackEsto 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 pa ...

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 creandonuestra primera plantillay 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 bien cómo y por ...

Selectores CSS: FundamentosHoy 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 Kovacsde quien les compartiré más información al final de esta traducción.Vam ...