¿Cuál es la diferencia entre un elemento y una etiqueta? ¿Cuándo debo usar fuerte y cuándo debo usar negrita? ¿Qué diablos es el DOM? Cuando eres nuevo en el diseño web, uno de los mayores obstáculos a superar es siempre la jerga. Se expresan tantos términos técnicos con ligereza y rara vez se explican de forma directa que es fácil perderse.
Esta serie servirá como una introducción básica a algunos términos que todo nuevo diseñador web debe asegurarse de agregar a su vocabulario. Esta no será una lista de vocabulario exhaustiva, sino más bien una introducción a unos pocos términos que me resultaron difíciles de entender cuando era un principiante. Comenzaremos con HTML hoy y pasaremos a CSS en un futuro cercano.
HTML y HTML5
HTML
HTML significa lenguaje de marcado de hipertexto. Para entender mejor este término, vamos a dividirlo pieza por pieza.
Hipertexto
El hipertexto es simplemente texto que se muestra en un dispositivo digital que utiliza enlaces activos para facilitar la navegación. Por ejemplo, para llegar a esta página es probable que haya hecho clic en un fragmento de texto que redirigió su navegador a la ubicación correcta.
Lenguaje de marcado
Un lenguaje de marcas es una forma de anotar documentos. Con un lenguaje de marcado, podemos convertir texto sin formato en documentos con formato rico mediante el uso de una sintaxis especial que le indica al analizador cómo mostrar la información y los elementos que se le pasan.
¿Ponlo junto?
Teniendo esto en cuenta, HTML es una forma de anotar y posteriormente formatear documentos para su visualización que depende en gran medida de un sistema que habilita enlaces basados en texto. Esta es la base de cómo funciona la web.
HTML5
HTML5 es exactamente lo que suena, la quinta iteración principal de HTML. HTML5 sirve como un reemplazo tanto para HMTL 4.01 como para XHTML 1.1, por lo que cada vez que vea referencias a estos idiomas, simplemente sepa que HTML5 es la sintaxis más nueva.
HTML5 trae un montón de nuevas características, elementos y cambios de sintaxis a HTML, demasiados para enumerarlos aquí. Algunos de los elementos que se pueden ver regularmente son un elemento de lienzo para la representación de gráficos, un nuevo tipo de documento simplificado, la capacidad de incrustar videos sin complementos personalizados como Flash y nuevas API para desarrolladores de aplicaciones web.
Para conocer todo sobre HTML5, navegue y eche un vistazo a los siguientes recursos:
- Rocas HTML5
- Sumérgete en HTML5
- HTML5 doctor
En semantica
HTML semantico
Cuando empecé con el diseño web, escuché esta frase a diario y me volvió loco. Todos parecían estar siempre en brazos sobre lo que era semántico y lo que no lo era. Resulta que la razón de esto es simple: una web semántica es mejor.
Básicamente, el concepto central aquí es que su marca debe transmitir el mayor significado posible. Para lograr esto, debe usar los elementos como se han intentado utilizar y de una manera que se comunique claramente con cualquier persona o cosa que esté observando su código.
Por ejemplo, solía ser el caso que los desarrolladores estructurarían páginas web completas utilizando tablas HTML. El problema con esto es que el elemento de la tabla tiene un propósito muy específico: mostrar una tabla de información (piense en una tabla de precios o un cuadro de comparación de características). Cuando ves el
div
Mientras estamos en el tema del diseño web semántico, también podríamos discutir el elemento más discutido desde la tabla: div. Si alguna vez has echado un vistazo a la fuente de una página HTML, lo más probable es que hayas divs en todas partes. Entonces, ¿qué diablos es un div?
El término? Div? es la abreviatura de "división". Si crees que es un poco vago, tienes razón. De hecho, todo el propósito del elemento div es ser vago. Los Divs son básicamente un contenedor genérico para bloques de contenido que de otro modo no se pueden describir en un nivel semántico.
Por supuesto, esto lleva a la idea de que los divs son criaturas no semánticas, lo que significa que un div en sí mismo no transmite significado. En consecuencia, dados los principios que describimos en las definiciones anteriores, los divs deben usarse lo más dispersamente posible, al menos en teoría. En la práctica, muchos desarrolladores son bastante generosos con ellos.
Ya que son tan versátiles y útiles para crear estructuras que son fácilmente compatibles con CSS, instintivamente usamos toneladas de divs. Sin embargo, siempre que sea posible, siempre debes buscar algo más semántico. Por ejemplo, considere el siguiente bloque de código que era bastante popular antes de HTML5.
Con la identificación, hemos infundido algún significado, pero el div en sí sigue siendo un elemento genérico e indeseable. Con HTML5, podemos deshacernos del div y usar el elemento de encabezado mucho más semántico.
Em vs itálica y fuerte vs negrita
Esto puede ser realmente complicado, especialmente porque HTML5 ofrece un significado semántico ligeramente modificado para estos términos. Vamos a empezar con em vs cursiva.
La especificación para usar el elemento en cursiva indica que ahora se usa para el texto que está compensado de su contenido circundante sin transmitir ningún énfasis o importancia adicional, y para la cual la presentación tipográfica convencional es texto en cursiva.
La clave aquí es que el elemento en cursiva no transmite ningún énfasis adicional, mientras que obviamente la etiqueta em sí lo hace. Piense en ello simplemente como un estado de ánimo diferente o una voz.
Los ejemplos incluyen una designación taxonómica, un término técnico, una frase idiomática de otro idioma, un pensamiento o el nombre de un barco.
Contrasta esto con el elemento em, que se usa para el estrés enfático. Aquí realmente estamos intentando comunicar que hablaría el contenido del elemento de manera diferente al resto de la oración.
Continuando, el elemento en negrita se ha cambiado para que tenga un significado casi idéntico al del elemento en cursiva: "desplazamiento de su contenido circundante sin transmitir ningún énfasis o importancia adicional, y para el cual la presentación tipográfica convencional es texto en negrita".
Una vez más, vemos que la clave aquí es que realmente no estamos agregando énfasis, simplemente siguiendo la convención tipográfica. Por ejemplo, un script puede poner en negrita los nombres de los caracteres.
Alternativamente, debe usar fuerte para transmitir "fuerte importancia". Por ejemplo, los mensajes de advertencia a menudo utilizan esta convención.
Con fuerte, incluso puede utilizar el anidamiento para transmitir más niveles de importancia.
Para obtener más información sobre estos cuatro elementos, consulte HTML5 Doctor, que tiene una explicación bastante extensa de los cambios implementados en HTML5 y cómo debe usar cada uno.
Atributos
Clase vs. ID
Una de las diferencias más importantes que debe comprender como diseñador web de front-end es la diferencia entre una clasificación y una identificación. Considere los siguientes dos fragmentos, ¿entiende cómo son diferentes?
Afortunadamente, la diferencia es realmente fácil de entender: las identificaciones son únicas y las clases son valiosas. Por ejemplo, lo siguiente no es un uso válido de HTML porque he usado la misma ID en dos elementos diferentes.
La solución aquí es cambiar esos identificadores a clases. La misma clase se puede aplicar a tantos elementos como desee. Dirigirse a esa clase en tu CSS te permitirá diseñar varios elementos de una sola vez.
Algunos han llegado tan lejos como para decir que nunca se deben usar identificaciones y, en cambio, siempre hay que mirar las clases porque son más versátiles. El argumento tiene sentido, pero para ser honesto, realmente no lo creo y sigo encontrando usos válidos para las ID todo el tiempo.
Otra jerga
Elementos vs. Etiquetas
Por un lado, esta distinción no parece ser la cosa más crítica del mundo. Después de todo, muchos desarrolladores usan estos términos indistintamente. Sin embargo, una comprensión correcta de la estructura básica de HTML es la base de una educación de desarrollo web sólida. Puede parecer complicado, pero estos dos términos sí significan cosas diferentes.
Para ilustrar, comencemos en el nivel más básico. La siguiente es una etiqueta de inicio? para un elemento de la lista.
Del mismo modo, aquí está la etiqueta final? para un elemento de la lista.
Cada uno de estos es una etiqueta por su cuenta. Sin embargo, no son elementos. Aquí es cómo se ve el elemento del elemento de la lista.
Para poner esto de manera concisa, HTML se compone de elementos y elementos se componen de etiquetas y contenido. Generalmente, un elemento incluye una etiqueta de inicio, contenido y una etiqueta final, pero algunas etiquetas se cierran automáticamente, por lo que esta terminología puede ser un poco complicada.
¡Actualizar!
Cuando Paul Irish dice que estás equivocado, seamos sinceros, probablemente lo estés. No puedo pretender saber una décima parte de las cosas que este tipo puede recitar sobre el desarrollo web mientras duerme, y realmente aprecio que se haya tomado el tiempo para indicarnos la dirección correcta al respecto en los comentarios.
Revisé un montón de fuentes de diferencia para estas definiciones y, finalmente, me arreglé las mías juntas en función de donde parecía haber acuerdo. Sin embargo, en este video, Paul describe lo que realmente es un elemento, que es mucho más de lo que piensas. En última instancia, concluye que no es el mayor negocio en el mundo, pero si bien estamos en el tema, ¡es mejor que nos aseguremos de hacerlo bien!
DOM
Esta es otra cosa que me confundió mucho cuando comencé a escribir HTML. Constantemente escuché a la gente referirse a? El DOM? pero pensé que sonaba como algo demasiado técnico que probablemente no entendería. Sabía que existía un DOM y tal vez la gente estaba por atravesarlo, pero no tenía idea de lo que eso significaba. La respuesta obvia, ¿es el modelo de objeto de documento? no me ha llevado a ninguna parte.
Resulta que el DOM es bastante fácil de entender. En su nivel más básico, simplemente se refiere a la estructura de una página web y nos da una clara convención para visualizar y referirnos a cada pieza.
Dicho de otra manera, el DOM es el árbol genealógico de una página web. En la parte superior tiene el documento, que se extiende hacia abajo hasta el elemento raíz o html y, posteriormente, los elementos de cabeza y cuerpo. Si observamos el elemento del cuerpo a continuación, podemos ver que se ramifica en otros elementos, cada uno de los cuales puede tener su propio contenido y subelementos.
Nos referimos a las relaciones en el árbol DOM como las de un árbol familiar. Si un elemento está dentro de otro, es hijo de un padre. Si dos elementos comparten directamente un padre, son hermanos.
Esta estructura y palabrería nos brinda una interfaz para interactuar con elementos específicos a través de una página web. Por ejemplo, en JavaScript o incluso en HTML, puede utilizar su conocimiento del DOM para apuntar al primer hijo de una lista desordenada, es decir, el primer elemento li dentro del elemento ul.
Yendo más profundo
La definición anterior es realmente una versión simplificada de lo que es el DOM. Una vez que tenga una comprensión sólida de cómo el DOM define la estructura de los documentos HTML, puede pasar a las definiciones más complicadas, que ahora tendrán un poco más de sentido. Echa un vistazo a la definición de W3C para una discusión mucho más profunda.
Aquí verá el DOM denominado API de programación para documentos que define una estructura de objeto. También verá que esta API contiene varios módulos, como CSS y MouseEvents, que se pueden implementar de varias maneras.
Bloquear vs.Elementos en linea
A medida que crea elementos en HTML y define su estilo en CSS, verá que el navegador interpreta diferentes elementos de diferentes maneras desde una perspectiva de diseño.
Cuando crea un elemento de nivel de bloque, como un párrafo o un div, aparece en una nueva línea o fila en el flujo del documento. Por lo tanto, si crea tres párrafos, aparecerán apilados verticalmente en la vista previa activa en lugar de horizontalmente como columnas. Otra distinción importante aquí es que los elementos a nivel de bloque pueden tener un ancho y una altura específicos.
Por otro lado, un elemento en línea se representa? En línea? Con el contenido antes y después. Por ejemplo, si inserta un elemento fuerte dentro de un párrafo, no creará una nueva línea sino que mantendrá el flujo del párrafo. Los elementos en línea tienen una altura y una anchura establecidas automáticamente por su contenido, estos valores no pueden expresarse específicamente.
Cambiando el comportamiento
¿Utilizando la pantalla CSS? propiedad, podemos cambiar el comportamiento de ciertos artículos. Por ejemplo, aquí tomo un ancla, que por defecto es un elemento en línea, y le digo al navegador que lo represente como si fuera un elemento a nivel de bloque. Ahora se le dará su propio conjunto de líneas a un alto y ancho específico.
En realidad, acabamos de analizar este tema en nuestro artículo sobre el uso de? Display: inline-block? Como alternativa a los flotadores. Mira esto aquí.
¿Con qué términos luchas?
Espero que este breve glosario de términos HTML haya arrojado algo de luz sobre algunos temas potencialmente confusos. Cada uno de estos me ha hecho tropezar en un momento u otro, así que no te sientas mal si hay algo que nunca antes habías entendido del todo.
Mientras estamos en el tema, ¿hay otros términos de HTML que actualmente te confunden o te han confundido en el pasado? ¡Avísenos en los comentarios y asegúrese de volver pronto para nuestra actualización de vocabulario CSS!