The link pseudo-class

The link pseudo-class
1. Functionality

To create links within a page, use a syntax like this:

<a href="#intro"> Go to introduction </ a>
With the new pseudo-class: target, you can highlight the links that visitors have already used.

2. Application

Consider a simple example: you have a very long document, which has been inserted in an index at the beginning of it, with links that point to different places in different parts of the page.

This would be the structure below:

<p> <a href="#intro"> Introduction </ a> | <a
href = "# results"> Results </ a> | <a
href = "# conclusion"> Conclusion </ a> </ p>
<h3> <a id="intro"> Introduction </ a> </ h3>
<p> Maecenas sed ... </ p>
...
<h3> <a id="resultados"> Results </ a> </ h3>
<p> sagittis Vivamus lacus ... </ p>
...
<h3> <a id="conclusion"> Conclusion </ a> </ h3>
<p> Donec ullamcorper nulla ... </ p>
...
And these are the CSS styles: when using a link in the index, you apply a background color to the element that golden point.

to {
     text-decoration: none;
}
a: target {
     background-color: gold;
}
3. Result

This page is displayed when the user has not taken any action:

The new CSS3 selectors

The new CSS3 selectors

CSS3 specifications introduce new selectors. The selectors module is finished, so the W3C has proposed Recommendation dated September 29, 2011. This is the URL: http://www.w3.org/TR/css3-selectors/

The general switch adjacent elements

The CSS2 we proposed the adjacent selector, allowing the selection element located below sibling of another element. Example Syntax: h1 + h2 {...}. Thus it was only possible to apply a specific style to follow the first h2 h1.

With CSS3, the adjacent element need not be necessarily immediately after the first element, there may be other elements between them, and the style will apply to the following items have been specified.

This is the syntax: h1 ~ h2 {...}.

Example selector:

h1 ~ h2 {font-style: italic};

Code sample:

<h1> Tag Level 1 </ h1>

<p> My main text between p tags ... </ p>

Label <h2> level 2 </ h2>

Another label <h2> Level 2 </ h2>

And the result:

As we can see, the emphasis has been applied to the text of the two elements that are <h2> the <h1> then, even if we have an element in the middle <p>.

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:


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.

The elements of the structure in HTML 4

The elements of the structure in HTML 4

1. The boxes <div>

In HTML 4, the main element to structure web pages is the famous "<div> box". With <div> is possible to create areas of a rectangular display. Each of these areas <div> those boxes, can be uniquely identified by an identification code, and so we can format it with CSS. This unique identification code is established with the id attribute.

Example:

<div id="bannerSuperior">
 ...
</ Div>
We may also use the classes, when this format is repeated on the page and it is not, therefore, a unique format.

Example:

<div class="comentarios">
 ...
</ Div>
Then, once you have determined the structure, apply the design with CSS, selectors by identifying corresponding to the identification code or the class in question.

Example:

# BannerSuperior {
 ...
}
. {Comments
 ...
}
In the following example we can see the structure of a blog page with boxes <div> type:



2. The "divitis"

With HTML 4 and CSS 2.1, page structure, when it is relatively complex, it may require a lot of boxes <div>. We get to create pages with dozens of <div>. If you fall into this excess, have contracted the disease called "divitis", ie overuse <div> boxes.

3. A no semantic content

All those boxes <div> present another problem: the semantics of containers. Each box <div> differs from others with its unique identification code, that the web designer will be assigned based on their "humor" or its "win" at the time.

For that reason, boxes <div> not semantic: the expected content is not defined by any parameter. A box <div> identified with id = "left" does not give us any information about its content. It could be a navigation bar, legal information or any other content.

However, the evolution of HTML is directed toward greater use of semantics.

The display of elements

The display of elements

1. In HTML 4

The HTML 4 "ordered" items based on the type of display in browsers (http://www.w3.org/TR/html4/struct/global.html # h-7.5.3). The block type element are displayed below each other. This is the case of paragraphs <p>, <hx> titles, <div> boxes ...

The inline type element shown alongside each other in the text line. This is the case of ties <a> <span> divisions, styles <strong>, <em> ...

We also have display: inline-block, list-item, table, table-row ...

Overlapping rules state that:

single inline element may contain other data and inline element, ie text.
block element can contain other block element and inline elements.
However, with display can switch seamlessly display type. So with display: block, you can display a link <a> like a block and thus present all the characteristics of the blocks.

2. in HTML5

In HTML5 this "classification" is obsolete. Moreover, no longer considered as a type of classification. This means that you, the author of the website, which should indicate how the different elements to be displayed. Otherwise, apply the default style sheet for each browser.

You can insert an element smoothly <a> <h2> containing a title, a picture and a paragraph <p> <img>, provided they specify the display mode in each style sheets with display property.

This structure would be correct in HTML5:

<a>
   <h2> My title </ h2>
   <img src = "..." alt = "..." />
   <p> blah blah ... </ p>
</ a> cough.

Obsolete elements

Obsolete elements

1. What is an obsolete element?

The HTML5 specification, certain items are considered "obsolete". An obsolete element is an element that has not been declared in the HTML5 specification. However, as the HTML5 should be compatible with older versions, outdated HTML elements will remain interpreted correctly by browsers.

A web page using HTML elements display correctly obsolete, although validation engines regard it as "non-compliant".

This is the URL of the web site obsolete items W3C http://www.w3.org/TR/html5/obsolete.html

2. For better accessibility

The frames, design element of ancient sites have been declared obsolete, to the delight of the accessibility of web sites and search engine positioning.

<frame> HTML elements, and <noframes> <frameset> not be used.

3. Elements disused or misused

The elements <applet> <dir> <ISINDEX> and have been deprecated.

The syntax of the elements

The syntax of the elements

1. Objectives

The objectives of the syntax of HTML elements are simplicity (once again!) And permissiveness. The HTML5 language is an evolution of XHTML, HTML5 has nothing to do with XML. For this reason we do not have strict rules of XHTML syntax.

2. The quotes

The quotation marks are optional for attribute values. For example, for the coding of characters can use the three following syntax:

<meta charset=UTF-8>
<meta charset="utf-8">
<meta charset='UTF-8'>
With single quotes, double quotes or without quotes, in all three cases the syntax is valid.

However, if an attribute has multiple values, will need to use double quotes:

<div class="estilo1 estilo2">
3. Items with a single opening tag

Some HTML elements have a single opening tag and no closing tag: img, br, etc.. In these cases it will be necessary to indicate the end of the element in the opening tag using /.

Examples:

<br />
<img src="imagen.png" />
HTML5 is not obligatory to indicate the closure of those labels.

Examples:

<br>
<img src="imagen.png">
4. The elements with optional end tag

In HTML 4 is not mandatory to include the closing tag of certain elements. Among them: <p>, <dl>, <td> ... In XHTML, every time you open a close tag is mandatory. HTML5 takes permissive syntax of HTML 4. Thus, the following example is valid in HTML5: <p> My paragraph without closing tag.

5. The case-sensitive

HTML5 seamlessly accepts uppercase and lowercase syntax elements and attributes. The following examples are fully valid HTML5:

<SCRIPT Src="miScript.js"> </ script>
<script SRC="MIscript.JS"> </ SCRIPT>
<script SrC="MiScript.js"> </ script>
True, well seen, these examples wanna run! We shall see that, despite everything, it is preferable to use certain rules and practices.

6. Boolean attributes

Some attributes only support boolean values ​​when applying this value.

This would be an example of a selected checkbox from opening the website. It is the use of the value for the attribute checked checked.

<input type="checkbox" checked="checked" name="checkedbox">
Indicate both parameters is redundant. In HTML5, the mere presence of the attribute is sufficient:

<input type="checkbox" checked name="checkedbox">
Again, priority has been given to the conciseness of syntax.

7. Elements HTML, HEAD and BODY

For conciseness are concerned, HTML5 has made a great effort, even colossal: the elements html, head and body are now optional.

This would be a completely valid HTML document which would be displayed correctly:

<! DOCTYPE HTML>
<meta charset="UTF-8" />
<title> My first HTML5 document </ title>
<h1> This is HTML5 </ h1>
<p> My content </ p>
They look like this:


If you examine the source code, you can see that the browsers themselves add HTML elements missing.


As you can see, the elements <thead>, and <tbody> <tfoot> are also optional.

8. The recommended syntax



We have just seen that the HTML5 is very permissive. We can write our code as we prefer, we could almost say that in any way! The advantage of this is that it offers flexibility, with very few restrictions. The main disadvantage is that well written pages will not look like anything we know, so that every web designer should look for "some time" HTML pages of a project "poorly written" you must work, before realizing what he has at hand. Being too permissive, we risk losing the common language we all know and use.

For this reason I recommend that respects the syntax of XHTML. This is a syntax that we all know, has been adopted by all web site creators, is the same for everyone and is part of the "best practices" for web designers.

Respect the rules of use and XHTML syntax:

use only lowercase
always use the quotes,
close to / labels are self-closing,
close the elements for which the end tag is optional,
indent the code to increase readability.