As explained in an earlier article DesarrolloWeb.com, " The future of web development: HTML 5 "explained why it was important HTML5, but it should explain what is HTML5.
HTML5 is called to be the replacement of the current (X) HTML, one of the legs of the web since its inception. Precisely at a time when the web is mature enough, this standard learn from mistakes and try to solve most problems that are a web developer. Like many of its innovations are interesting and directly affect the future website from AnexoM we'll comment on several items the most important changes, starting with this article where we discuss the new elements.
Before proceeding should be made clear that HTML5 is still in draft form and will remain for some years. The general approach has changed considerably over previous versions of HTML, adding implicit semantics and accessibility, specifying every detail and removing any ambiguity. It also takes into account that many Web sites today are dynamic, more like applications than documents. Something basic is that HTML5 is defined based on the DOM (the internal representation of a web browser that works), leaving aside the representation "real", defining both a standard HTML and XHTML.
Best structure
Today is abused quite the div element that allows us to structure a website in blocks. In HTML5 there are several factors used to better structure a website, establishing what each section, and often replacing a div. With this extra semantics, will be much more coherent and easily understood by others. And more importantly, it will be trivial to understand for a machine, giving more importance to some sections and can play with that data automatically. Specifically, the task of a search engine will be much easier, but any application that "read" websites will benefit. These are the elements:
- section represents a 'general' section within a document or application, as a chapter in a book. It may contain subsections and if you accompany it with h1-h6 can better structure the page.
- article represents an independent content in a document, the clearest case are the entries in a blog or news of an online newspaper. Thus, within the cover we have several items semantically demarcated, so that a tool can easily extract them.
- aside represents a very little content that is related to the rest of the page, as a sidebar. Crucial for determining the content "important" content "support", making it the first case the second.
- header represents the header of a section, and presumably to be given more importance than the rest, especially if the section is an item.
- footer represents the foot of a section with information about the page / section that has little to do with the content of the page, as the author, copyright or year.
- nav represents a section between the site navigation, as the typical top bar of the newspapers.
In the above picture shows an example of how to change a normal HTML document written in HTML5 with these items.
Better forms
The input element has been extended and now allows these types of data:
- datetime, datetime-local, date, month, week, time, to indicate a date / time.
- number for the user to specify a number.
- range to indicate a range between two numbers.
- email to indicate an email.
- url to indicate a web address.
- search to indicate a search.
- color to indicate a color.
The interesting thing about this is that browsers can implement specific interfaces for each type of data, such as a date or a color may indicate a direct and intuitive. Another example is the iPhone keyboard, which shows some symbols or other depending on whether it is normal text, an email (add @ and the dot) or a url (adds the bar and the dot-com), and therefore makes a lot this standard.
Other important elements
- Audio and video are used to embed a media sound or video, respectively. Without doubt one of the most interesting additions as you play / control video and audio without plugins like Flash. Are treated fully native as any other element, for example, can include links or images in a video. Although current implementations are somewhat inefficient, it is expected that in the near future are optimized. Video portals like YouTube or Dailymotion are already beginning to show that a future without Flash is possible (and necessary!).
- used to embed embedded content but not native, but implemented by plugins such as Flash. Although embed is supported by almost all browsers for some time is the time you enter part of the standard and avoid hell / fight between object and embed.
- canvas is a complex element that generates graphics, drawing elements within it. Although you've never heard of him, surely you've ever used, eg Google Maps. It is a very potent enough to give talk in the future, and that is responsible spectacular web application.
More Items
- arises to write dialog conversations, for example chat transcripts.
- figure is raised to associate a media (photo, video, etc.) to a caption.
- represents a highlighted text mark, for example to highlight a search.
- get a measure, as the number of KB. It makes more sense if you join with ...
- progress represents the state of a task, and can be used for example to upload a document or heavy multitasking. This will allow custom toolbars and powerful.
- time represents a date or time.
- command represents a command that the user can run in your browser.
- output represents a departure from a program, probably run directly in the browser, such as a calculator.
- datagrid represents an interactive data and to work dynamically with information and change the page for that information. It will be useful especially if you work with applications that require a lot of data at a time in the client side.
If you are interested and want to know more about this language you can follow the article in AnexoM .
Then I put a link to 10 games created with HTML5 ... we have the advantage of playing them on computers with low yields, which before was impossible with Flash.
Source: AnexoM
based on 1 rating
