martes, 20 de noviembre de 2012

The elements of the structure in HTML5


The elements of the structure in HTML5

1. The new elements of the structure
With new items arriving HTML5 semantic structure. These new elements have been defined and are assigned a name after a long analysis of the biggest names in the boxes used <div>.

2. The element <header>

The new element <header> to insert a display area for headers. This header can be defined for the entire page or to a particular area: article flyout ...

We consider that this element can be used from two points of view:

page level: is the typical top of the page, which often appears at the top of the screen, with a logo, a slogan, a main navigation menu ...
content level: allows a content insertion site is included below.
This is the definition of the W3C for <header> element: "The header element Represents a group of introductory or navigational aids. A header element is Intended to Contain Usually the section's heading (an h1-h6 element or an element hgroup), but this is not required. The header element can be used to wrap Also a section's table of contents, a search form, or any relevant logos. "

As you can see, the element must appear <header> not necessarily in the structure of the page.

3. The element <footer>

The new element <footer> to insert a display area for the footer. We meet again with the same semantics of headers. You can define a footer for the entire page, or to any other display area or for an article.

This is the definition of the W3C: "The footer element Represents a footer for its nearest ancestor sectioning content or sectioning root element. A Typically footer section contains information about The ITS Such as who wrote it, links to related documents, copyright data, and the like . "

Its use is similar to the <header>, but applied to the footer. Therefore, we must continue to "literally" the literal translation of "footer". It's more of a "foot display area" where the display area can be a page, a section, an article ...

4. The element <nav>

<nav> Element, as the name suggests, is designed for displaying a navigation with hyperlinks. Be careful, not to say that you can only have a navigation on every page, or have to create as many items <nav> shipping areas have on their pages, simply to identify them correctly. <nav> Element is designed especially for navigation of the website, for the insertion of links between the pages of this website.

The W3C definition is quite clear: "The nav element Represents a section of a page links to other pages That or to parts Within the page: a section with Navigation links. Note: Not all groups of links on a page need to be in a nav element - the element is Primarily Intended for sections That Consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, Such as the terms of service, the home page , and a copyright page. The footer element alone is Sufficient for Such cases, while a nav element can be used in Such cases, it is unnecessary Usually. "

5. The element <section>

<section> Element allows grouping elements that have the same theme. Thus we bring together in one content element, with its title and footer.

This is the definition of the W3C: "The section element Represents a generic section of a document or application. A section, In This context, is a thematic grouping of content, Typically with a heading."

6. The element <article>

The element to insert <article> autonomous content, which can be reused elsewhere in the website, without thereby annul its meaning.

This is the definition of the W3C: "The article element Represents a self-contained composition in a document, page, application, or site and That is, in principle, or distributable Independently reusable, eg in syndication. This Could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. "

Of course, an article might have a header (<header>), footer (<footer>) and several titles (<hx>).

7. The element <aside>

<aside> Element to display a content related to the content to which it is linked. It may be sidebars (sidebars), widget areas, on articles of supplements, etc..

8. The element <figure>

<figure> Element to group all the elements necessary for the insertion of an image: the image itself (<img> element), or a photo, a video, an animation ... and legend, with the new element <figcaption>.

Here's an example:

Sarracenia <p> Picture of my garden. <p/>
<figure>
  <img src="sarracenia.jpg" />
  Sarracenia purpurea <figcaption> </ figcaption>
</ Figure>
That would be displayed as:

images/chap04-002.png
9. The boxes <div>

And finally, I want to clarify that although use HTML5 does not have to eradicate the use of <div> boxes. We can still continue to use them and their usefulness! Ca.

No hay comentarios:

Publicar un comentario