html - significado - ¿Es correcto colocar un div dentro de un ancla?
posicionar div html (13)
Con la especificación HTML5 ... Ahora es posible colocar un elemento de nivel de bloque dentro de un elemento en línea. Así que ahora es perfectamente apropiado poner un ''div'' o ''h1'' dentro de un elemento ''a''.
He oído que poner un elemento de bloque dentro de un elemento en línea es un pecado HTML:
<a href="http://www.mydomain.com"><div>
What we have here is a problem.
You see, an anchor element is an inline element,
and the div element is a block level element.
</div></a>
Pero, ¿qué sucede si diseña el ancla exterior como display:block en la hoja de estilos? ¿Sigue mal? La especificación HTML 4.01 en los elementos de nivel de bloque y en línea parece pensar que sí:
Las hojas de estilo proporcionan los medios para especificar la representación de elementos arbitrarios, incluso si un elemento se representa como bloque o en línea. En algunos casos, como un estilo en línea para los elementos de la lista, esto puede ser apropiado, pero en términos generales, se desaconseja a los autores el anular la interpretación convencional de los elementos HTML de esta manera.
¿Alguien tiene más consejos sobre este tema?
Creo que la mayoría de las veces cuando las personas hacen esta pregunta, han creado un sitio con solo divs, y ahora uno de los div debe ser un enlace.
Vi a alguien usar una imagen vacía transparente, PNG, dentro de una etiqueta de anclaje solo para hacer un enlace dentro de un div, y la imagen era del mismo tamaño que el div.
Bastante triste en realidad ... pero funciona ...
Dependiendo de la versión de HTML que estés atendiendo:
El HTML 5 indica que el elemento
<a>"puede incluir párrafos enteros, listas, tablas, etc., incluso secciones completas, siempre que no haya contenido interactivo dentro (por ejemplo, botones u otros enlaces)".HTML 4.01 especifica que los elementos
<a>solo pueden contener elementos en línea . Un<div>es un elemento de bloque , por lo que puede no aparecer dentro de un<a>.Por supuesto, usted está en libertad de diseñar un elemento en línea de tal manera que parezca ser un bloque, o incluso diseñar un bloque para que se muestre en línea. El uso de los términos en
inlineyblocken HTML se refiere a la relación de los elementos con la estructura semántica del documento, mientras que los mismos términos en CSS se relacionan más con el estilo visual de los elementos. Si haces que los elementos en línea se muestren de manera en bloque, está bien.Sin embargo, debe asegurarse de que la estructura del documento aún tenga sentido cuando CSS no está presente, por ejemplo, cuando se accede a través de una tecnología de asistencia como un lector de pantalla, o incluso cuando es examinado por el poderoso Googlebot.
El documento W3C no usa conceptos como el mal y el pecado , pero sí utiliza los que proveen los medios , pueden ser apropiados y desalentados .
En realidad, en el segundo párrafo de la sección 4 , la especificación 4.01 detalla sus palabras de la siguiente manera:
Las palabras clave "DEBE", "NO DEBE", "REQUERIDO", "DEBE", "NO DEBE", "DEBE", "NO DEBE", "RECOMENDADO", "PUEDE" y "OPCIONAL" en este documento son para ser interpretado como se describe en [RFC2119]. Sin embargo, para facilitar la lectura, estas palabras no aparecen en todas las letras mayúsculas en esta especificación.
Con eso en mente, creo que la declaración definitiva se encuentra en 7.5.3 Elementos de nivel de bloque y en línea , donde dice
Generalmente, los elementos en línea pueden contener solo datos y otros elementos en línea.
La condición "en general" parece presentar suficiente ambigüedad para decir que HTML 4.01 permite que los elementos en línea contengan elementos de bloque.
Ciertamente, CSS2 tiene un valor de propiedad de visualización, en inline-block , que parece ser adecuado para el propósito que usted describe. No estoy seguro si alguna vez fue ampliamente apoyado, pero parece que alguien anticipó la necesidad de ese tipo de comportamiento.
La DTD parece ser menos tolerante aquí, pero el w3.org/TR/REC-html40/sgml/dtd.html difiere a la especificación:
La especificación HTML 4.01 incluye restricciones sintácticas adicionales que no pueden expresarse dentro de las DTD.
En otro comentario, sugieres que quieres activar un bloque envolviéndolo en un ancla. No creo que HTML lo prohíba, y CSS lo permite claramente. Entonces, para responder a la pregunta del título sobre si alguna vez es correcta, digo que sí. Por los estándares, a veces es correcto.
Está incorrecto. Usa un span .
Hay una DTD para HTML 4 en w3.org/TR/REC-html40/sgml/dtd.html . Esta DTD es la forma procesable por máquina de la especificación, con la limitación de que una DTD gobierna XML y HTML 4, especialmente el sabor "transitorio", permite muchas cosas que no son XML "legales". Aún así, considero que está cerca de codificar la intención de los especificadores.
<!ELEMENT A - - (%inline;)* -(A) -- anchor -->
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">
<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >
<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">
<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">
Interpretaría que las etiquetas enumeradas en esta jerarquía son el total de etiquetas permitidas.
Si bien la especificación puede decir "elementos en línea", estoy bastante seguro de que no se pretende que pueda sortear la intención declarando que el tipo de visualización de un elemento de bloque está en línea. Las etiquetas en línea tienen diferentes semánticas, sin importar cómo las abuses.
Por otro lado, me parece intrigante que la inclusión de elementos special parezca permitir el anidado de elementos A Probablemente haya una redacción sólida en la especificación que no lo permite, incluso si es XML-sintácticamente correcta, pero no continuaré con esto ya que no es el tema de la pregunta.
Justo como un FYI.
Si su objetivo es hacer que se pueda hacer clic en su div, puede usar jQuery / Java Script.
Define tu div así:
<div class="clickableDiv" style="cursor:pointer">
This is my div. Try clicking it!
</div>
Tu jQuery se implementaría así:
<script type="text/javascript">
$(document).ready(function () {
$("div.clickableDiv").click(function () {
alert("Peekaboo");
});
});
</script>
Esto también funcionaría para múltiples divs, según el comentario de Tom en este hilo
Los elementos de nivel de bloque como <div> se pueden envolver con etiquetas <a> en HTML5. Aunque un <div> se considera un contenedor / contenedor para el contenido de flujo y los de <a> se consideran contenido de flujo de acuerdo con MDN . Semánticamente, puede ser mejor crear elementos en línea que actúen como elementos de nivel de bloque.
No puede poner <div> dentro de <a> , no es válido (X) HTML.
A pesar de que diseña un espacio con pantalla: bloque, aún no puede poner elementos de nivel de bloque dentro de él: el HTML (X) todavía tiene que obedecer el DTD HTML (X) (el que use), sin importar cómo esté el CSS. Altera las cosas.
El navegador probablemente lo mostrará como quieras, pero eso no lo hace correcto.
No, no se validará, pero sí, por lo general, funcionará en los navegadores modernos. Dicho esto, use un lapso dentro de su ancla y configure la display: block en él también, eso definitivamente funcionará en todas partes y se validará.
Si desea evitar el problema semántico de colocar divs dentro de las etiquetas de anclaje, simplemente coloque la etiqueta de anclaje en el mismo nivel que los divs, envuélvalos todos con un contenedor con posición: relativo, haga su posición de etiqueta de anclaje: absoluta y expándalo a llenar el recipiente. Además, si no está al final del flujo de contenido, asegúrese de lanzar un índice z allí para colocarlo por encima del contenido.
Como sugerí, he añadido un código de marcado:
<div class="div__container>
<div class="div__one>
</div>
<div class="div__two">
</div>
<a href="#"></a>
</div>
Y el css
.div__container {
position: relative;
}
.div__container a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
}
Si lo cambia a un elemento de estilo de bloque, entonces no, ya no es "incorrecto", pero probablemente no se validará. Pero no tiene mucho sentido hacer lo que estás haciendo. Debe mantener la etiqueta de anclaje como un elemento de nivel de bloque sin div interno, o colocar el div en el exterior.
Si vas a hacer el esfuerzo de hacer <a> bloque, ¿por qué no poner <a> dentro del div, siendo un elemento de bloque te dará el mismo efecto?