HTML5 Semantic Elements. Quick Tip: The Awesome Details Element. One of my favorite new HTML5 tags, which has only recently been integrated into Chrome (as of version 12), is the details element. I'll show you to use it in today's quick tip. What Does the details Tag Do? It essentially allows us to show and hide content with the click of a button. You're surely familiar with this type of effect, but, up until now, it had always been achieved with JavaScript. Imagine a heading with an arrow next to it, and when you click on it, additional information below becomes visible. Clicking the arrow again hides the content. This sort of functionality is very common in FAQ pages. Here's a two minute example of this sort of effect. The details element allows us to omit the JavaScript entirely. An Example So let's dive in and learn how to use this new tag. Next, we need to give it a title, or summary of the content within.
By default, in browsers that understand the details element, everything within it -- other than the summary tag -- will be hidden. Conclusion. The details and summary elements. How often have you had to write some JavaScript to create an interactive widget that shows and hides some content? You might’ve even downloaded a whole JavaScript library to achieve such an effect. Well, it’s time writing service to rejoice! HTML5 provides a way to create this toggle feature with just a few lines of HTML and no JavaScript in sight (depending on the browser, of course, but we’ll come to that later). And so we introduce to you the <details> element.
Here is what the spec has to say about <details>: The details element represents a disclosure widget from which the user can obtain additional information or controls. Essentially, we can use <details> to create an accordion-like widget that the user can toggle open and closed. Browser support Before we go any further, you should know that currently, only Chrome supports the <details> element.
Using <details> There are two relevant elements here: <details> and, optionally, <summary>. You can see this in action over at jsbin. Your Questions #17. The clinic is packed this week with your HTML5 ailments! Today, we’ll discuss an HTML5 syntax dilemma, using sections within sections, <link> semantics, describing the contents of a figure, and marking up web app toolbars. HTML5 syntax dilemma Manuel asked: In theory, HTML5 syntax is very lazy but, in fact, when you write a HTML5 page you follow some conventions that originate in the XHTML era: lowercase code, double-quoted attribute values, properly closed elements, proper element nesting.
While this practice is rational and admirable, some people take a further step towards a XHTML-style syntax: they don’t use attribute minimization and do terminate empty elements. I disagree. Furthermore, “legacy XHTML” code does not represent the bulk of the Web; 61% of the Web is HTML4 according to the Opera MAMA study in 2008. But it doesn’t matter. Cheers, Bruce Sections within sections Corey asked: Don’t know if this has been asked before or not, as I couldn’t find anything to tell me otherwise.
Bruce. The Best HTML5 Page Structure. 3inShare This is the basic HTML5 page structure that you can use as a base while developing a HTML5 website layout. 03. <html> 05. <head> 06. 07. 08. 10. 12. 13. 14. 15. 16. 17. 18. 19. 21. 23. 24. 25. 26. 27. 28. 29. 31. 32. 33. 34. 35. 36. 37. 39. 41. 42. 43. 44. 46. 47. 48. 50. 52. Atributos data-* en HTML5 « De Dudosa Procedencia. Muchas veces me ha pasado que necesito guardar ciertos datos asociados a un determinado elemento HTML cuando estoy programando.
Estos datos me eran necesarios, sobre todo, cuando tenía que hacer un uso medio extremo de AJAX y otras yerbas asíncronas. La solución, al menos en mí caso, era agregar controles ocultos (hidden) para ir guardando y actualizando los datos dentro del elemento HTML en cuestión. Lo mejor hubiese sido poder guardar en un atributo del elemento mismo los datos asociados. Algo así como lo que se hace con un documento XML bien formado en donde cada nodo puede tener todos los atributos que se quieran. Leyendo un blog me enteré de algo bastante interesante que se ha agregado en el estándar de HTML5. Ahora tenemos la posibilidad de agregar atributos personalizados que comiencen con la palabra data-, los cuales no serán visualizados en por el usuario. Para extraer los datos, jQuery viene con el método data integrado para poder recuperarlos. Fuentes Me gusta: