HTML5: Details element, html5details Element

HTML5: Details element, html5details Element

 

Tutorial details • Overview: HTML5 Details labels • Difficulty: elementary • Supported browsers: Chrome 12 or later versions My favorite HTML5 new tag is the details element, which has just been integrated into Chrome's latest version 12. I will show you how to use it in today's Quick Start. ________________________________________ What can the Details tag do? It essentially allows us to display and hide content when clicking a tag. You must be quite familiar with this effect, but until now, it is always implemented using Javascript. Imagine an arrow behind the header. When you click it, the additional information below will be displayed. Click the arrow again to disappear. This function is often used on the FAQ page. The Details element allows us to leave Javascript alone. In other words, it will do this because browser support is still poor. ________________________________________ Example Now let's dive into and learn how to use this new tag. We start by creating a new details element. Then, we need to put the contents of summary. Who Goes to College? <P> Your mom. </Details> well, let's start with some more practical examples. I want to use the details element to display different Nettuts + articles. We first create a tag for each article. <Summary> Dig Into Dojo <H3> Dig into Dojo: DOM Basics <P> Maybe you saw that tweet: "jQuery is a gateway drug. it leads to full-on JavaScript usage. "Part of that addiction, I contend, is learning other JavaScript frameworks. and that's what this four-part series on the incredible Dojo Toolkit is all about: taking you to the next level of your JavaScript addiction. </P> </Div> </Details>

Http://html5.662p.com/thread-12-1-1.html

What are the new tags in html5?

<Article> define article.
<Aside> defines content beyond the page content.
<Audio> define the sound content.
<Command> define command button.
<Datalist> defines the drop-down list.
<Details> defines the details of an element.
<Embed> defines external interaction content or plug-ins.
<Figcaption> define the title of the figure element.
<Figure> defines media content groups and their headers.
<Footer> define the footer of a section or page.
<Header> define the header of a section or page.
<Hgroup> defines section information in the document.
<Keygen> define the generation key.
<Mark> defines the text with a mark.
<Meter> defines measurements within a predefined range.
<Nav> define the navigation link.
<Output> defines some types of output.
<Progress> defines the progress of any type of task.
<Rp> define content that is not displayed by ruby elements in the browser.
<Rt> define the explanation of ruby annotations.
<Ruby> define ruby annotations.
<Section> define a section.
<Source> define media sources.
<Summary> defines the title of the details element.
<Time> defines the date/time.
<Video> define a video.
 
What are the new HTML5 tags?

Newly Added tag in HTML 5

◆ <Article> mark and define an article
◆ <Aside> mark and define the sidebar of the page content
◆ <Audio> mark and define audio content
◆ <Canvas> mark and define an image
◆ <Command> mark and define a command button
◆ <Datalist> mark to define a drop-down list
◆ <Details> mark and define the details of an element
◆ <Dialog> mark and define a dialog box (Session box)
◆ <Embed> mark and define External Interactive Content or plug-ins
◆ <Figure> mark and define a set of media content and their titles
◆ <Footer> mark to define the bottom of a page or area
◆ <Header> mark the header of a page or area
◆ <Hgroup> mark the information about a block in the definition file
◆ <Keygen> mark a generated key value in the definition form
◆ <Mark> mark defines the marked text
◆ <Meter> mark and define measurement within

Predefined range

◆ <Nav> mark and define the navigation link
◆ <Output> mark to define some output types
◆ <Progress> mark the process of defining a task
◆ <Rp> the tag is used in Ruby annotations to tell browsers that do not support Ruby elements how to display
◆ <Rt> tag definition for ruby

Annotations

◆ <Ruby> mark and define ruby annotations.
◆ <Section> mark a region
◆ <Source> mark and define media resources
◆ <Time> mark to define a date/time
◆ <Video> mark to define a video