HTML 5- This a new version the most popular markup language.

For more than 10 years, hypertext markup language HTML practically did not change, which was very strange, given the enormous speed of development of Web technologies, and now, finally, the change happened and appeared HTML 5.

IN HTML 5 several new elements and attributes have been added, and several old ones have been removed (for example, font And center).

The following elements have been added:

1) header.

2) footer.

4) section.

5) article.

6) aside.

7) figure.

8) dialogue.

9) m (mark).

10) time.

11) meter.

12) progress.

13) video.

14) audio.

15) details.

16) datagrid.

17) menu.

18) command.

Everything else remains unchanged. That is, there will be no problems with it, provided that you are familiar with the standard one. Actually, everything remains the same, only new features have been added.

Thanks to innovations HTML 5 You can significantly ease the work of Webmasters by simplifying the same markup.

Surely, you are wondering: “Will it work? HTML 5 with older browsers?" The answer is: "Of course, yes, but the new elements, of course, will not be displayed." Or in other words, everyone will see the new pages, but those with modern browser versions will see a little more and differently.

I'm sure that in the near future HTML 5 will be able to see the same percentage of users as they currently see HTML 4, which is already more than 10 years old.

And about using new opportunities HTML 5 we will talk to you in the following articles.

Introduction

HTML 4 has been with us for about 10 years. During this time there were no serious steps to improve it. Of course, XHTML came along, however, it simply tightened the rules and forced us to write better and higher quality code. At the same time, you are completely concerned about compliance with the standard. HTML 5 is designed to do more. It adds a series of very important innovations.

Work on HTML5 began back in 2004, but only now (2009) is it beginning to attract serious interest. Browser support is increasing, and the element I like best (CANVAS) is supported by 4 of the 5 most common browsers. At the same time, it is not entirely realistic, although possible, to use HTML 5, since new standard not supported in MSIE.

So what's new in HTML 5?

is a field for drawing two-dimensional graphics, controlled from using JavaScript. You can use it to create graphs and other dynamic images.

Tag

Tag

Context menus

HTML5 also provides a method for easily adding context menus to a web page. Perhaps such menus are not very useful for ordinary sites. But for applications in which many functions would like to be grouped and displayed contextually, this opportunity is just right.

New structural elements

Since HTML 4 is poorly structured, new elements were added to version 5 of the specification to correct this shortcoming:

• - section or paragraph.
• - page header (not to be confused with )
• - this tag can include, for example, a blog article.

• - can be used, for example, to create diagrams.

New inline elements

The HTML5 standard introduces new elements that allow you to specially highlight text fragments containing times and numbers:

• - marks a piece of text. You can, for example, mark the terms found in the list of search results.
• - you can use this tag to display the time or date in a text block.
• - to represent numbers in a certain range. It can have various attributes: value, min, max, low, high and optimum.
• Can be used to display a process status indicator. It has a couple of attributes: value and max.

New types of input fields

HTML5 adds a number of new types for data entry fields:

• datetime
• datetime-local
• month
• number
• range
• email

Some of them are widely used in desktop application user interfaces. And, most likely, they will already be familiar to all your users.

Deprecated elements

The following HTML elements are deprecated:

• acronym
• applet
• basefont
• center
• frame
• frameset
• isindex
• noframes
• noscript
• strike

Syntax for setting encoding

The syntax for setting a document's encoding in HTML5 is now very simple:

Interactive innovations

Several innovations that will make creating websites and web applications easier and more enjoyable:

• - additional information about something. For example, this tag can be used in browsers to implement a tooltip. A tag may have an open attribute, which indicates whether the content of the tag will initially be shown to the user or not.
• - Unlike traditional tables (which are intended to be static), this tag can be used to represent an interactive set of data. For example, for a table with selecting rows or columns, inline data editing, sorting, etc.
• - previously deprecated tag returned to the HTML5 standard in a new guise. Now it can contain, for example, elements , which call the corresponding commands. This element can be used to present a toolbar or context menu (see above). A tag can have label and icon attributes. They can be added to create multi-level menus.

New Document Type Definition (DTD)

HTML5 makes it much easier to declare DTDs:The DTD declaration has become more attractive and, I believe, easier to remember. This is most likely a result of HTML no longer being linked to SGML.

Optional href in links

The href attribute is now optional because links can be used in conjunction with scripts. This will probably be useful in web applications.

async attribute

The attribute gives the browser a hint that the script block can be executed asynchronously, instead of waiting until the page has fully loaded.

Conclusion

Naturally, not all browsers will support the entire standard (I think the reader just remembered his “favorite” MSIE). But support will come over time. And the new HTML 5 elements have been designed keeping the current situation in mind. On the other hand, most browsers already partially support the specification. So, for example, the tag supported in Firefox, Opera, Chrome and Safari. Plus, as far as I know, Firefox 3.5 will support tags

So, we are looking forward to it.

For those interested, the HTML 5 specification can be found at the following link -

February 1, 2008 at 11:51 pm

What's new in HTML 5.0? Part 1

• Website development

• Translation

Web technologies are constantly evolving. Every day new sites are created that expand the capabilities of HTML. HTML 4 has been around for almost a decade, but publishers are looking for new ways to extend the format's functionality. However, the variety of languages ​​and browsers limits some of its capabilities.

To give developers a more flexible, interoperable product that makes projects more interactive and interesting, HTML 5 introduces and expands a range of features including forms controls, APIs, multimedia, structure, and semantics.

Work on HTML 5 began in 2004. Developments are currently being carried out as part of a joint effort between the W3C HTML WG and WHATWG. Many well-known companies are involved in development, including: Apple, Mozilla, Opera, and Microsoft, and a number of other organizations and individuals with varying interests and backgrounds.

Note that the specification is still under development and is far from complete. Therefore, it is possible that any features mentioned in this article may change in the future. This article is intended to describe the new features of the HTML version 5 format.

Structure

HTML 5 introduces a whole host of new elements that make page structure much simpler. Most HTML4 pages contain a number of common structures, such as headers and footers, and columns, and today it is becoming a tradition to highlight them using div elements, assigning a class or id to it.


The illustration shows a typical 2-column layout using div elements, assigning them a class or id. The structure contains a page header, a footer, a navigation menu and content divided into 2 columns -

The use of div elements is preferential because the current version of HTML 4 lacks the semantics to describe these parts more specifically. HTML 5 solves this problem by introducing new elements, each of which has its own separate name.

The document code looks like this:

...
...
...

...
...

There are several benefits to using these elements. When used in combination with element headings (h1 - h6), this makes it possible to introduce a subsection with a heading into each level, in contrast to the possible 6 levels in the previous version of HTML. The specification includes a detailed algorithm for generating boundaries. These elements can be used as authoring and browser tools to generate a table of contents and help users navigate the document.

For example, the following structure is divided into levels with nested h1 elements:

Level 1

Level 2

Level 3

Note that for maximum compatibility with different browsers, you can use different heading levels like h2, h3, etc.

By defining the purpose of sections on a page using specific section elements, this technology can help the user navigate the page more easily. For example, a user can easily navigate to a menu section or quickly move from one article to the next without the developer having to create such a jump link. Developers can also rejoice because by replacing the div elements with the appropriate elements, source it will be simpler and “cleaner”.

Header element represents the page title. This section can contain not only the title itself, but also any subheadings that will help the user understand more about the content of the page.

A Preview of HTML 5

By Lachlan Hunt

Example Blog

Insert tag line here.

Footer element represents the “footer” of the page. This part of the page usually contains a link to the author's rights, counters, etc.

"nav" element- defines the site navigation section:

"aside" element defines a section indirectly related to the content of the page, most often used as an application.

From the author: release HTML standard 5 2 years ago made a splash in the developer community. Not only because there were many new properties in the specification, but also because it was the first major update to HTML since HTML 4.01, which came out in 1999. You can still find sites online boasting that they use "modern" HTML5 standard.

Luckily for us, this time we didn't have to wait as long for the next generation of HTML. In October 2015, the W3C began developing a draft of HTML 5.1, which was supposed to solve a number of problems that remained open in HTML5. After a long time, the specification reached the “Candidate Recommendation” status in June 2016, the “Proposed Recommendation” status in September 2016, and finally the W3C Recommendation status in November 2016. Those who followed the development may have noticed that the path was thorny. Many primary HTML 5.1 features were rejected due to poor design and lack of browser support.

HTML 5.1 is still in development, and the W3C has begun work on a draft of HTML 5.2, which is expected to be released at the end of 2017. In this article, we will look at a couple of interesting new features and improvements in version 5.1. Support for these properties is still poor, but we will tell you in which browsers you can at least try the examples.

Context menu using menu and menuitems tags

The 5.1 draft introduces two types of menu elements: context and toolbar. The first is used to extend the native context menu, which is usually displayed by clicking on right button mouse over the page. The second defines simple menu components. During the development process, the toolbar was abandoned; the context tag is still present.

Using the menu tag, you can create a menu with one or more menuitems tags, and then assign these tags to any elements using the contextmenu attribute. The menuitem tag can be one of three types:

checkbox – allows you to select or deselect;

command – allows you to perform an action on click;

radio – allows you to select one option from a group.

Basic use case, works in Firefox 49, no support in Chrome 54.

In browsers that support context menu should look like this:

details and summary elements

The details and summary tags allow you to show and hide blocks with additional information on click. This is usually done in JS, but now it can be done using the details and summary tags. Clicking on the summary tag opens the content from the details tag.

The example below was tested in Firefox and Chrome.

In supported browsers the demo looks like this:

Additional input field types are month, week and datetime-local

The input field arsenal has been expanded with three new types: month, week and datetime-local.

The first two types allow you to select week and month. In Chrome, both of these types are shown as drop-down calendars where you can select a month or a week. When accessed from JS, the string will look something like this: "2016-W43" for week and "2016-10" for month.

Initially, draft 5.1 introduced two date-time inputs: datetime and datetime-local. The difference between them is that datetime-local always selects the time in the user's time zone, while datetime allows you to change the time zone. During development, the datetime type was discarded, leaving only datetime-local. A field of type datetime-local consists of two parts: a date, which can be selected in the same way as in fields of type week and month, and a time, which can be specified separately.

The CodePen demo below shows examples of all types. Works in Chrome, no support in Firefox yet:

In browsers that support the demo it will look like this:

Responsive Images

HTML 5.1 introduces several new features for working with adaptive images without CSS connections. Each function has its own examples of use.

Image attribute srcset

The srcset image attribute allows you to register several additional images with different densities pixels. This way, the browser can load images of the required quality for the user's device (based on the pixel density on the device, zoom level and network speed). For example, for users with small phones or slow networks, you can show low-resolution images.

The srcset attribute accepts a comma-separated list of image URLs with an X modifier. Modifiers describe the pixel ratio (the number of physical pixels per CSS pixel) that is appropriate for each image. Simple example:

< img src = "images/low-res.jpg" srcset = " Images/low-res.jpg 1x, Images/high-res.jpg 2x, Images/ultra-high-res.jpg 3x"

If the pixel ratio is 1, a low-res image will be shown, for 2 it will be shown high-res, for 3 - ultra-high-res. You can show images of different sizes instead of pixel ratio. To do this you need to use the w modifier:

< img src = "images/low-res.jpg" srcset = " Images/low-res.jpg 600w, Images/high-res.jpg 1000w, Images/ultra-high-res.jpg 1400w"

In this case, an image with a width of 600px is set for low-res, 1000px for high-res, and 1400px for ultra-high-res.

Image attribute sizes

You may want to display images in different ways depending on your screen size. For example, you can display images in two columns on wide screens, but in one column for narrow screens. The sizes attribute will help you with this. The attribute allows you to translate the screen width into the space allocated for the image, after which the appropriate image is selected using the srcset attribute. Example:

< img src = "images/low-res.jpg" sizes = "(max-width: 40em) 100vw, 50vw" srcset = "images/low-res.jpg 600w, Images/high-res.jpg 1000w, Images/ultra-high-res.jpg 1400w"

When the browser window width is greater than 40em, the sizes attribute specifies the image width as 50% of the window width. When the window width is less than or equal to 40em, the image width is 100%.

Picture tag

It's not enough to simply resize images to fit different screens. You need a way to show completely different images. The picture tag will help you with this. This tag allows you to register multiple images for different screens. To do this, you need to wrap the img tag in a picture and specify additional source tags. Source tags contain links to images.

< picture > < source media = "(max-width: 20em)" srcset = " Images/small/low-res.jpg 1x, > < / picture >

Form Validation using form.reportValidity()

HTML5 contains the form.checkValidity() method, which can be used to check form fields against validators. The result is a Boolean value. New method reportValidity() works in a similar way. With its help, you can validate the form and return the result. Additionally this method shows errors to the user directly in the browser. The CodePen demo below shows the result (tested in Firefox and Chrome):

The First name field must be highlighted and must not be empty. Typically it works like this:

allowfullscreen attribute for frames

The new Boolean attribute for frames, allowfullscreen, allows you to change how content is displayed using the requestFullscreen() method. With it, you can expand content to full screen.

Spell checking using element.forceSpellCheck()

The new element.forceSpellCheck() method allows you to enable spell checking of text elements. This is also the first feature that is not yet supported in any browser. Purely theoretically, this method can be used to check the spelling of non-editable elements.

Features that were not implemented

Some of the features written in early drafts of the specification were eventually removed, largely due to a lack of interest from browser developers. Here are some of interesting features:

inert attribute

The inert attribute was supposed to disable user interaction for all child elements. The same as adding the disabled attribute to all elements manually.

Tag dialog

Using the dialog tag it was possible to create popup windows. A convenient form of integration was even thought out. The method attribute of the dialog tag prevented the form from being submitted to the server; instead, the tag returned a value to the dialog creator.

The tag is still supported in Firefox, an example of how it works:

Additional links

This is by no means a complete list of changes in HTML 5.1. The specification contains many small features and changes that were adopted in the Living Standard, as well as many features that were removed. The full list of changes can be found in the Changes section of the specification. In the meantime, let's hope browser developers quickly pick up the new features!

What did you like most about HTML 5.1? Write in the comments!

Editorial: Pavels Jelisejevs

Translation: Vlad Merzhevich

1. It's not one big thing.

You may ask, "How can I use HTML5 if older browsers don't support it?" Actually this question is wrong. HTML5 isn't one big thing, it's a collection of different features. You can't write "HTML5 supported" because it's counterintuitive, but you can specify support for some HTML 5 technologies, such as drawing, video, and geolocation.

You can think of HTML as tags and angle brackets. This is of course an important part, but not the whole thing. The HTML5 specification also specifies how these angle brackets interact with JavaScript through the Document Object Model (DOM). HTML5 doesn't just define a tag

2. You don’t have to throw away what you have

Whether you like it or not, you cannot deny that HTML4 is the most successful markup format. HTML5 builds on this luck, so you don't have to throw away existing markup and relearn. If your web application runs in HTML4 today, it will also run in HTML5, period.

Here's a concrete example: HTML5 supports all the form elements that HTML4 does, and also includes new elements. Some of them, like sliders and date selection, have been a long time coming, others are not so obvious. For example, a field for entering an address Email This is an ordinary text field, but modern browsers for this field make it easier to type the address. Older browsers do not support input type="email" , so they will show a regular text field and the forms will work with it without any additional tricks. This allows you to improve your forms today, even if some users are still stuck with IE6.

3. Easy to get started

“Upgrading” to HTML5 can be done by simply changing the doctype. Elementshould always be located in the first line of code of any web page. previous version HTML defined several doctype options and choosing the right one was not easy. There is only one doctype in HTML5:

Changing the doctype does not destroy the existing layout, because all tags defined in HTML4 are also supported in HTML5. On top of that, you can use, and correctly, new semantic elements like

,

,

And