Los documentos HTML constan de elementos que se caracterizan por las llamadas etiquetas. Las etiquetas se reconocen por los corchetes angulares. Casi todos los elementos HTML se caracterizan por una etiqueta de introducción y otra de cierre. Lo que hay entre ellas se denomina ámbito.
Un ejemplo:
<h1>PSD-Tutorials.de - su portal de gráficos, web y aprendizaje</h1>
Esta sintaxis se utiliza para escribir un encabezado de primer orden en el documento. La etiqueta introductoria < ;h1> informa al navegador de que se trata de un encabezamiento de este tipo. La etiqueta de cierre < /h1> finaliza el encabezamiento. Las etiquetas de cierre se reconocen por un corchete angular de apertura seguido de una barra </.
Se plantea una cuestión sobre la ortografía de los nombres de los elementos: ¿Qué aspecto tienen las mayúsculas y las minúsculas? Como ya se ha dicho, esta serie se centra en HTML5. Aquí sí se puede elegir entre mayúsculas y minúsculas. Personalmente, sin embargo, estoy a favor de un uso coherente de las minúsculas y seguiré haciéndolo en esta serie. En principio, lo siguiente sería correcto según HTML5:
<h1>PSD-Tutorials.de - tu portal de gráficos, web y aprendizaje</h1> <H1>PSD-Tutorials.de - tu portal de gráficos, web y aprendizaje</H1>
Los elementos que abras también deben volver a cerrarse. Así que si pones un <h1>, también debes cerrarlo de nuevo después del final de la definición del encabezado </h1>. Hay excepciones a esto en HTML5, como las entradas de lista y los párrafos, pero hablaremos de esto más adelante.
En HTML también existen las llamadas etiquetas independientes. Consisten en una sola etiqueta, sin principio ni final. Un ejemplo típico de esto es <br />.
Esta es una línea.<br /> Esta es otra línea.
Esto <br /> ; define un salto de línea.
Estas etiquetas vacías suelen cerrarse con una barra, aunque no sea absolutamente necesario en HTML5. Lo siguiente también funcionaría aquí:
<br>
A lo largo de esta serie conocerás más etiquetas independientes.
Anidamiento de elementos
Los elementos HTML también pueden anidarse. Imagina que quieres poner en cursiva un pasaje dentro de un título. El elemento i se utiliza para la cursiva.
<h1>PSD-Tutorials.de - <i>tu portal gráfico, web y de aprendizaje</i></h1>
Presta atención al orden correcto al anidar. El último elemento que se cierra es el que se abrió primero. En este caso, se trata del elemento h1.
Utilizar atributos
Los denominados atributos pueden definirse dentro de etiquetas de apertura o etiquetas independientes. Estos atributos pueden asignar propiedades adicionales a los elementos. En los primeros tiempos de HTML, se asignaba un número comparativamente elevado de atributos a los elementos. Esto se debía simplemente a la confusión entre estructura y diseño. Por ejemplo, las definiciones de color se transferían directamente al elemento HTML a través de un atributo correspondiente. En la actualidad es posible separar estrictamente diseño y estructura -también gracias a CSS, por supuesto- y esto debe respetarse. En consecuencia, hay relativamente pocos atributos que se sigan utilizando.
Un atributo importante es id. Este atributo puede utilizarse para asignar un nombre único a un elemento HTML, que luego puede utilizarse para dirigirlo a través de CSS o JavaScript, por ejemplo.
<h1 id="head">PSD-Tutorials.de - tu portal gráfico, web y de aprendizaje</h1>
Para asignar un atributo, inserte un espacio después del h1. A continuación aparece el nombre del atributo, que suele escribirse en minúsculas. El nombre del atributo va seguido del signo igual. El valor del atributo se escribe entre comillas.
Por cierto, también se pueden asignar varios atributos a un elemento. Por ejemplo, es bastante común definir una llamada clase y un ID para un elemento. He aquí otro ejemplo: El encabezamiento se identifica unívocamente mediante id. La clase, por su parte, se utiliza para categorizar el encabezamiento. De este modo, puede especificar que todos los elementos a los que se asigne la clase azul se muestren en color azul. (Más adelante, por supuesto, hablaremos de CSS y el color).
<h1 id="head" class="blue">PSD-Tutorials.de - tu portal gráfico, web y de aprendizaje</h1>
En este caso, los atributos están separados por un espacio.
Validar el código
Ya has aprendido algunas reglas básicas de sintaxis. Es importante respetarlas, sobre todo cuando aprendes HTML por primera vez. Una vez que se adquiere un hábito erróneo, es difícil quitárselo de la cabeza. Por lo tanto, comprueba siempre que tu código HTML es correcto o haz que lo validen. Por supuesto, no hace falta que lo hagas tú mismo. Existen herramientas en línea adecuadas para ello. Por ejemplo, en http://validator.w3.org/ encontrará un validador.
Lo mejor es pasar directamente a la pestaña Validar por entrada directa. Aquí puede copiar y pegar directamente el código HTML que desea comprobar. Asegúrese de insertar el código completo del archivo, incluida la especificación DOCTYPE.
Para probar el validador, pegue lo siguiente en el campo de texto y haga clic en el botón Validar.
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutoriales.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de - your graphics, web & learning portal</h1> </body> </html>
El resultado debería ser así:
Aquí todo está bien. (No tiene que preocuparse por las dos advertencias en este caso). Si aparece el mensaje ¡Este documento se ha comprobado correctamente como HTML5! es que todo va bien. Pero, ¿qué ocurre si se produce un error? Puedes simplemente insertar un error en la sintaxis a propósito.
<h1 id=head">PSD-Tutorials.de - tu portal gráfico, web y de aprendizaje</h1>
Aquí se olvidó la coma invertida introductoria para head. Si ahora se vuelve a validar la sintaxis, se reconoce el error.
El validador emite entonces el mensaje correspondiente. En la parte inferior de la ventana puede ver exactamente qué ha fallado.
Aquí también se describe claramente el error.
Línea 8, columna 12: " en un valor de atributo no entrecomillado. Causas probables: Atributos que se corren juntos o una cadena de consulta URL en un valor de atributo no entrecomillado.
<h1 id=head" >PSD-Tutorials.de</h1>
Por lo tanto, puede ver directamente en qué línea se ha realizado una entrada incorrecta y puede corregirla. Por lo tanto, el validador le ayuda a crear un código HTML limpio. Siempre debería validar su código. Esto se debe a que los navegadores suelen mostrar correctamente el código HTML aunque la sintaxis sea incorrecta. Sin embargo, en otros navegadores, en los que no se comprueban las páginas, el aspecto puede ser completamente distinto.
