HTML5-Intro

HTML5 has long since become the standard markup language for web development, and it’s the foundation nearly every modern site is still built on today. Despite that, plenty of developers never fully learn its properties beyond the basics — this article covers the key features worth knowing to build a solid foundation.

Several elements introduced in this language are now supported natively across every major browser — Chrome, Firefox, Safari, and Edge — with no plugins or workarounds required.

HTML 5 and multimedia content

HTML5 have introduced two new labels here whose names are ’audio’ and ‘video’ , its function is to allow us to add audio and video to a web page without using long codes ’embed’ , as is commonly done today to include flash videos or preloaded on a server.

• The label ’video’ brings several attributes, among which are

1. ‘control’
2. ‘autoplay’
3. ‘src’
4. ‘height’
5. ‘width’
6. ‘loop’
7. ‘preload’
8. ‘audio’

which gives us the opportunity to modify the player at will without resorting to CSS or Javascript . Besides this, ‘video’ allows the addition of text between the opening and closing tag.

For its part, the label ‘audio’ works similarly to sound content and has five attributes on their own, ‘autoplay’, ‘controls’, ‘loop’, ‘preload’ and ‘src’.

Site structure with HTML 5

With new labels like HTML5 provides new levels of structuring. These labels are responsible for defining the different sections of a website, and many of them come with their own position in the defined page.

1. ‘section’
2. ‘footer’
3. ‘header’
4. ‘nav’
5. ‘article’
6. ‘aside’
7. ‘figure’

Forms with HTML 5

As regards forms, labeled ‘input’ remains the basis of everything, but with the difference that now has new ways to declare its type, which adds flexibility and facilitates the validation.

A total of twenty-three types of ‘input’ that can be used in a form, among which we find the types ’date’, ‘datetime’, ‘datetimelocal’, ‘time’, ‘month’, ‘week’, ‘url‘, ‘range‘, number and email ‘ that were included with this release. With this there is no need to declare an input type ’text’ , condition characters it receives with Javascript and then validate the server side the value we are really hoping, just carefully define the type and the browser will process correctly data.

Inline elements

The labels ’meter’, ‘time’, ‘mark’ and ‘progress’ were included to be used in representations of figures, dates, time, lists or progress bars, and so achieve better semantic structure. Generally used to wrap similar content, and as its name says each has a related content.

Charts

Perhaps one of the best projects presented is HTML5 tag ’canvas’ , considered by far the baby darling of this new standard because of its potential and great usability.

The label ’canvas’ allows us to display graphics by plane code to just giving us the opportunity to define a height and width for the area of stroke, allows the use of HTML5 events and when combined with Javascript you can create pure magic .

Your accede to this tag through the stroke of Javascript functions, serves as a 2D drawing surface for presentation graphics, games, animations and image compositions.

Interactive Elements

Labels for this function are presented as ’datagrid’ , which can be used to provide an interactive data set. We also have the label ’details’ allows us to provide advice and other useful information.

The label ’menu’ , which had previously been declared obsolete, returns with a new functionality. It has two attributes, which are ’label’ and ‘type’ , and is used to define menu lists with controls.

Charset and HTML5 DOCTYPE

The charset of the site is defined with a fairly easy label to remember, meta charset = ‘UTF-8’ , while the new DOCTYPE is defined in a simpler way, simply stating that our website is HTML type! doctype html.

Changes to attributes of existing elements in HMTL 5

HTML5 added some new attributes to elements that existed in the previous version of the language. For example, anchor type elements as ’a’ and elements of type ’area’ have received a new attribute that is called ’media’ , the item ’base’ now has an attribute ’target’ and the element ’meta ‘ has a ’charset’ as an attribute.

Moreover there are certain attributes that deprecator, such is the case the attribute ’language’ label ‘script’, ‘border’ label ‘inc’, ‘name’ of the anchor type ‘a’ and ‘type’ as an attribute of ‘style’ and ‘script’

Elements deprecated in HTML 5

There are several elements that quedaro out of this new version, traditional labels like ‘font’ became better life, acompletan labels list

1. ’acronym’
2. ‘applet’
3. ‘basefont’
4. ‘big’
5. ‘center’
6. ‘dir’
7. ‘font’
8. ‘frame’
9. ‘frameset’
10. ‘isindex’
11. ‘noframes’
12. ‘noscript’
13. ‘s’
14. ‘strike’
15. ‘tt’
16. ‘u’