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.

The HTML document

The HTML document

1. The syntax in XHTML 1.0

<html> Element indicates, on a web page, the beginning of the HTML page content. This would be the complete syntax in XHTML 1.0 strict:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Again, brevity is not the priority here.

2. The syntax in HTML5

In HTML5 what prevails is simplicity, only the essential remains. This would be the syntax in HTML5:

<html lang="en">
Sufficient to specify the language of the page. That's it.

The character encoding

1. The syntax in HTML 4 and XHTML 1.0

It usually indicates which character encoding has been used in a web page. Before indicated twice: in a meta element in the HTTP header, and content, with the charset attribute.

In HTML 4.01 Transitional:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
In XHTML 1.0 strict:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
2. The syntax in HTML5

Again, in HTML5 has been given priority to simplicity:

<meta charset="UTF-8" />
Well have what is necessary for proper management by web browsers.

scripts

The declaration of the scripts also lost importance and syntax is now more concise. It has gone from:

src="miScript.js" <script type="text/javascript"> </ script>
to:

<script src="miScript.js"> </ script>
This simplification is that now assumes that the scripts are written in JavaScript. On the other hand, what other language could be used, if not?
Always starting from the same principle: simplification and unification of language in the statement of CSS styles, it has gone from:

href="miHoja.css" <link rel="stylesheet" type="text/css" />
to:

href="miHoja.css" <link rel="stylesheet" />

The doctype

The doctype

1. The syntax in HTML 4 and XHTML 1.0

The first line of every HTML document corresponding to the document type declaration, the doctype. This DTD (Document Type Declaration) serves to indicate what version of HTML is used in the document.

This would be a DTD HTML 4.01 Transitional document:

<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd">

And this would be a DTD XHTML 1.0 Strict document:

<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This statement indicates the name of the DTD and facilitates the URL in the browsers that can access the original source of the statement. Its syntax is not always understood by everyone, grasp it requires time and effort. Also, let's face it, all of us, and I am the first, we have always limited to copy and paste this line one project to another.

2. The syntax in HTML5

The DTD declaration in HTML5 not be simpler:

<! DOCTYPE html>

The most surprising addition to the brevity of this syntax is the absence of the version number. Now, we might ask: "How will the browser which version of HTML we used in our paper?".

We must not forget that one of the goals of HTML5 is to support previous versions and also to future versions of the language. Precisely for that reason, specify a version number is obsolete, including it would have absolutely no use.

Unsupported elements in HTML5

The following items are no longer supported in HTML5: <acronym>, <applet> <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <S>, <strike>, <tt>, <u> and <xmp>

new tags

Major new tags in HTML5, just looking to add a semantic meaning than what was previously meant a div or span.

These tags can be used in conjunction with standard labels HTML4.

<header> and <footer>
<header> Elements and replace <footer> <div id="header"> and <div id="footer"> and usually contain the section of the header and footer of the design, but also can be used as header and / or footer of a special section. These tags can be used multiple times in a single design.

<hgroup>
This element is used to group multiple header tags (<h1> <h2> <h3> <h4> <h5> <h6>) when they go to use titles, subtitles, etc to avoid cutting the flow of the document outline.

<nav>
This tag is designed for you to put navigation menus either the home page or to a particular item.

<section>
This label indicates a generic section of the site: The label <section> is a thematic grouping of content, typically with a header.

<article>
This label represents a section of independent content. This label is used for answers in a forum, articles on a blog or an article comments.

<aside>

Basic Structure HTML5

The basic structure is unchanged HTML5 traumatic as compared to its predecessor HTML4 let's look changes so fast:

HTML4.01 <! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5 <! DOCTYPE html>

<meta Http-equiv="Content-Type" content="text/html; HTML4.01 charset=utf-8" />

<meta HTML5 charset="utf-8">

Other basic tags as: <head> <body> <title> still fulfill the functions that were playing in the previous version.

Now look at the new structural tags

<nav> <header> <section> <aside> <article> <footer>, these labels are more semantic and allow us to generate a more consistent content therewith.

What is HTML5?

HTML5 is the new version of the markup language known as HTML

which is nothing more and nothing less than a hypertext markup language

ie it is conceived as a language where you can create a website from a label set.

It is important to note that this language has had through the years various changes have become more versatile when it comes to creating a website

and has incorporated new HTML5 tags that allow you to create dynamic content and look more absequibles which these changes have been.

HTML5 provides a number of new elements and attributes that reflect typical usage on modern websites. Some of them are technically similar to the <div> and <span>, but have semantic meaning, such as <nav> (navigation block the website) and <footer>.

Other elements provide new functionality through a standardized interface, as <audio> and <video> elements.

Improvements <canvas> element, capable of rendering in major browsers (Mozilla, Chrome, Opera, Safari and IE) 3D elements.

Some elements in HTML 4.01 are obsolete, including purely presentation elements, as <center> <font> and whose effects are handled by the CSS.