HTML5 new tags, effects and behaviors
HTML5 is also a marketing term for grouping new technologies and standards of Web application development: HTML5, CSS3 and Javascript.
How to know if it's HTML5:
Do you work with IE?
Do not?
Then it is HTML5
"HTML5 is the present of the Web and if you are not assimilating what is happening you are already part of the old generation of developers." That would have to have you worried."
To understand HTML5 is to understand that today we connect from mobile phones, tablets, eBooks, netbooks, computers and another range of devices.
It is to understand that the webmasters are finished and today we talk about multidisciplinary teams of technology companies that have frontends, backends, sysadmins, mobile devs, community managers and information architects in projects that are reinventing markets and generating traffic and revenue.
We can talk about all the giant companies on the web, we can list Microsoft, Google, Apple, Adobe, Facebook, Yahoo, Mozilla and thousands of technological projects that regardless of their goals today breathe HTML5, support it and have proposals that make them compete in code in the browser closest to your screen.
HTML5 is the HTML update, the language in which the web is created.
HTML5 is also a marketing term for grouping new web application development technologies: HTML5, CSS3 and new Javascript capabilities.
The previous and most used version of HTML, HTML4, lacks the necessary features for the creation of modern applications based on a browser.
The strong use of Javascript has helped to improve this, thanks to frameworks such as jQuery, 1 jQuery UI2, Sproutcore3, among others.
Special Flash has been used to replace HTML to develop web apps that exceed the abilities of a browser:
- Audio
- Video
- Webcams
- Microphones
- Binary data
- Vector animations
- Complex interface components
- Among many other things
Now HTML5 is able to do this without the need of plugins and with a great compatibility between browsers.
New Tags HTML5
HTML4 and HTML5 tags ARE 100% COMPATIBLE BETWEEN YES
All the code you have in normal HTML will continue to work without problems in HTML5.
To start using HTML5 all you have to do is place this DOCTYPE before the <html>: tag
<!DOCTYPE html>
It is a DOCTYPE much more simplified than XHTML (whose rules are still used) and allows you to use all the skills of HTML5 without anything that you already have programmed stop working.
The major new HTML5 tags do not have a special representation on the screen. They all behave like a <div> or a <span>. But each one has a semantic meaning superior to a simple div or span.
<header>
<header> is designed to replace the need to create divs without semantic meaning.
<hgroup>
Many headers need multiple titles, like a blog that has a title and a tagline explaining the blog. <hgroup> allows to place a h1, h2 and h3 inside the header without affecting the SEO, allowing to use another h1 on the site.
In the current HTML, you can only use h1 once per site or the h1 loses SEO priority.
<nav>
Same as <header>, <nav> is designed to place the main navigation keypad there. You can place any label inside, although it is recommended to use lists.
<section>
Defines a unique content area within the site. In a blog, it would be the area where all the posts are. In a YouTube video, there would be a section for the video, one for the video data, another for the comments area.
<article>
Defines unique zones of independent content. In the home of a blog, each post would be an article. In a blog post, the post and each of your comments would be an <article>.
<aside>
Any content that is not related to the primary objective of the page goes in a aside. In a blog, obviously the aside is the information sidebar. In the home of a newspaper, it may be the 10 area of economic indicators.
<footer>
This one is obvious. It is the footnote and everything that composes it.
Atention <div> is nor dead:
These new labels do not mean that <div> is no longer used.
Div should always be used when you need a box with graphic design objectives or anything that has no semantic meaning.
Only use HTML5 semantic tags where necessary.
The important new tags of HTML5
Semantic tags, despite being key to search engine positioning and good web development, are not the reason why everyone talks about HTML5. Video, audio and vector animation are on the list of priorities and in the mouths of all the people who evangelize its use.
Specifically the new tags are:
<video>
Insert video without the need for plugins.
It is very easy to use, but each browser supports different video codecs, which makes it necessary to recode a video in multiple codecs.
<video controls src="video.ogv" type="video/ogv" poster=""></video>
<audio>
Same as video, but without video. You can use multiple formats, especially mp3, but it also depends on the browser
<audio src="musica.mp3" type="audio/mp3; codecs=MP3" controls></audio>
<input *>
Input already existed as the label to insert text boxes and buttons.
Now it is more powerful, with the ability to insert "email" boxes that self-validate, "date" type calendars, sliders, numbers, among others.
Buscador:
<input type="search” placeholder="Buscar aquí..." autofocus>
Seleccionar color favorito:
<input type="color" name="favcolor">
Calendario:
<input type="date" name="dia">
<meta>
<meta charset="UTF8">
<canvas>
A vector drawing area and bitmaps with Javascript.
Is an entire drawing API for Javascript
<svg>
A tag, just like <img>, to insert drawings and vector animations in the style of Flash, all based on the open standard SVG (Scalable Vector Graphics), derived from XML
ChatGPT Free
Ask questions on any topic
CITE ARTICLE
For homework, research, thesis, books, magazines, blogs or academic articles
APA Format Reference:
Delgado, Hugo. (2019).
HTML5 new tags, effects and behaviors.
Retrieved Dec 13, 2024, from
https://disenowebakus.net/en/html5
Participates!
Share it with your friends in Social Networks!CONTINUE LEARNING
IT ALSO DESERVES TO PAY TO VISIT:
CodeLobster IDE is a smart free cross-platform IDE primarily intended for creating and editing PHP,...
HTML uses the anchor element (Label a) to create a link. When a visitor clicks on it, the browser...
The table tag allows you to create a table in HTML. The tag tr is used to define the rows, while the...
A form is an interactive area of our website, where we provide the user with controls and fields to...
