que - span html significado
La diferencia esencial entre las etiquetas HTML? (9)
(X) HTML es un sistema basado en reglas, por lo tanto, debe seguir las reglas ... elementos de nivel de bloque como <div> y <p> no pueden entrar elementos en línea como <span> es simplemente una regla de (válido ) idioma.
Además, HTML es totalmente independiente de CSS, por lo que la capacidad de cambiar el comportamiento de visualización de un elemento no tiene, y no debería tener, ningún efecto sobre cómo esa etiqueta se puede usar de manera válida en el propio HTML.
La etiqueta <b> hace que los textos sean negritas, pero si se le asigna CSS " font-weight:normal; " entonces es absolutamente como una etiqueta normal. Por otro lado, la etiqueta <i> se puede diseñar para mostrar el texto dentro como una etiqueta <b> :
<i style="font-style:normal; font-weight:bold;">
Sí, estoy hablando de la intercambiabilidad de las etiquetas HTML, por lo que podemos tener menos etiquetas.
Y 2 de las etiquetas más famosas resultan ser "div" y "span", que se tratan en esta SO. Pregunta: ¿Cuál es la diferencia entre las etiquetas HTML DIV y SPAN?
Quiero saber cuál es la esencia de la etiqueta <div> que hace una etiqueta span así:
<span style="display:block;"></span>
no puede ser un reemplazo para div? Por otro motivo, ¿cuál es la razón profunda detrás de hacer que estos códigos se conviertan en HTML "inválido" (X)?
<span style="display: block"><p>Still wrong</p></span>
¡Gracias!
Para el escenario, estoy construyendo un llamado "HTML-CSS-Generator", que requiere un profundo conocimiento de las etiquetas HTML. Quiero filtrar los conjuntos de todas las etiquetas HTML válidas para crear un conjunto de "etiquetas principales". Entonces estoy pidiendo la intercambiabilidad de las etiquetas.
Actualización (el objetivo final de esta pregunta)
Me pregunto si la diferencia es que la etiqueta es nativamente "a nivel de bloque" (como div, p) o "en línea" (como span)?
¿Hay algún otro tipo de "propiedad nativa" (que CSS o JS no pueden cambiar) como "bloque / nivel en línea" para las etiquetas HTML?
De la especificación de HTML 4.01
Modelo de contenido Generalmente, los elementos de nivel de bloque pueden contener elementos en línea y otros elementos de nivel de bloque. En general, los elementos en línea pueden contener solo datos y otros elementos en línea. Inherente a esta distinción estructural está la idea de que los elementos de bloque crean estructuras "más grandes" que los elementos en línea.
El elemento P es un elemento de nivel de bloque y el elemento SPAN uno en línea.
Desde la página wikipedia para HTML:
Los elementos HTML representan semántica o significado. Por ejemplo, el elemento title representa el título del documento.
Diferentes etiquetas tienen diferentes significados. Por ejemplo, li representa un artículo en una lista. Se le permite hacer este aspecto de todos modos que desee a través de CSS, pero todavía está destinado a indicar un elemento en una lista.
Para el navegador promedio, un li puede parecer un div dependiendo de qué CSS aplique. Pero considera a alguien que no puede ver. Un programa que lee una página para ellos puede hacer una distinción entre los elementos en una lista y div s.
Considera la forma versus la función . El DOM es una estructura. Es un modelo de objeto. <div> s son elementos de nivel de bloque y tienen reglas aplicadas. <span> s son elementos de nivel en línea y tienen reglas diferentes aplicadas a ellos.
Los elementos estilísticos como <u> , <b> , <small> , <i> , <em> etc., se están eliminando gradualmente en HTML5 de todos modos en un esfuerzo por abstraer la forma de la función, por lo que debes confiar en CSS para estilo <span> elementos para usted en su lugar.
CSS tiene una responsabilidad, que es el estilo de la página de renderizado para el usuario. Puede decirle al navegador que trate elementos de nivel de bloque como elementos de nivel en línea y viceversa para fines de visualización .
Si recuerdo correctamente, la especificación de CSS contiene una hoja de estilo predeterminada, o "agente de usuario", para HTML. Puede confirmarlo abriendo Google Chrome (que tiene herramientas de desarrollador integradas), abriendo el siguiente documento HTML:
<html>
<head></head>
<body>
<div></div>
<span></span>
<b></b>
<i></i>
</body></html>
luego haciendo clic en la llave, luego Herramientas, Herramientas de desarrollo, luego Elementos.
Seleccione body , div , span , b e i a su vez. Tenga en cuenta que el navegador aplica una hoja de estilo de "agente de usuario" a cada elemento. Por ejemplo, la hoja de estilo del agente de usuario para el body es:
body {
display: block;
margin: 8px;
}
y la hoja de estilo del agente de usuario para b es:
strong, b {
font-weight: bolder;
}
Tenga en cuenta que span no tiene hoja de estilo de agente de usuario; esto es así porque, al menos para Google Chrome, el valor predeterminado para la display es en inline o en inline-block (no estoy seguro).
Si un span se usa como un div , puede dar como resultado un HTML no válido, pero esa es prácticamente la única desventaja.
Todo esto tiene que ver con la semántica. Básicamente, si encierra algo en las etiquetas " <b> ", debe "significar" negrita no simplemente "ser" negrita. Si bien es cierto que puedes aplicar estilos a la mayoría de las etiquetas como prefieras, la vida es más fácil para todos los implicados si usas etiquetas como deberían.
En la diferencia entre "tramos" y "divisiones", los tramos están en el nivel en línea mientras que los segmentos están bloqueados. Esto significa que los elementos que son "tramos" no deberían causar un salto de línea. Un uso común sería diseñar una pequeña cantidad de texto en un párrafo.
Por otro lado, las divisiones, al ser elementos de nivel de bloque, deberían provocar un salto de línea e implicar la separación semántica del contenido circundante.
Teniendo esto en cuenta, no debería usar etiquetas "b" o "i" para afectar visualmente la forma en que se muestra el contenido. Usa tramos en su lugar ...
Uso un cuando quiero cambios de representación en línea, o necesito cambiar el texto de javascript. Una etiqueta span, de forma predeterminada, no introducirá saltos de línea y tal, mientras que una etiqueta div lo hará. Entonces, si, por ejemplo, necesito
<div>Welcome to my site, <span id=''name''>Matt</span></div>
ser modificable a través de Javascript.
$(''#name'').html(''vantrung'');
También uso una etiqueta span si quiero agregar bordes u otros resaltados alrededor de algunas palabras, o cambiar la fuente, o algunas veces alterar el posicionamiento superior. Pero siempre es para cambios de texto en línea. He tenido instancias en las que tenía una imagen y un texto en línea, pero necesitaba mover el texto un poco. Yo uso un lapso para eso:
<p><img src=''some.png'' /><span style=''position:relative; top:-3px''> Some</span></p>
la pregunta ya está respondida, pero solo quería agregar:
Para las personas que usaron versiones tempranas de HTML, podría ser confuso al principio, porque podrían pensar y tener un significado, pero eso era solo un estilo directo y codificado "en línea" en el documento HTML en los tiempos previos a la existencia de CSS. .
CSS se inventó para separar el estilo de la estructura del documento.
Ahora que tenemos el estilo separado en el CSS, depende del desarrollador cómo diseñan sus etiquetas HTML, completamente independiente de la estructura del documento y mucho más flexible.
El HTML define la estructura del documento, el CSS define su estilo.
No investigue cómo se comportan las cosas o cómo se ven (aunque esto es parte de la especificación HTML). HTML tiene que ver con el significado.
¿Qué significan las etiquetas <u> , <i> , <b> ? Correcto, ¡no significan nada! Solo definen cómo se ven las cosas. Esa es exactamente la razón por la que fueron eliminados de la especificación en HTML5 (o realmente en desuso).
Por supuesto, puede darle un estilo a <div> como <span> , infierno, podría darle un estilo a <div> como <input type="text"> . Pero de eso no se trata, se trata de significado.
De acuerdo con las especificaciones de HTML, un <div> es un divisor. Divide ciertas partes de un sitio web, ciertas secciones como un encabezado o un cuadro de contenido van dentro de un <div> .
Un <span> se usa para especificar algo que está en línea. Me gusta el siguiente
<div class="Location">
Currently I''m living in <span class="Country">The Netherlands</span>
</div>
No compare etiquetas HTML según cómo se procesen. Además, siempre elija la etiqueta HTML que se asemeje más a los datos que se muestran, incluso si se ve completamente diferente de lo que desea.
La diferencia no se trata de si son de bloque o en línea (incluso si eso es un efecto de ello). La diferencia es la información que representan.