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:
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