The article briefly discusses the differences between html5 and html 4.
Syntax, character encoding, new elements, new attributes, API. We'll also look at retired attributes and a number of significant changes.

HTML 5 is still in development, but a lot of interesting things are already known about it. At first glance, the innovations seem contradictory; time will tell how things will turn out in reality.

Syntax

HTML 5 will have two syntaxes - "custom" HTML and XML. HTML syntax defines detailed parsing rules (including "error handling"). User agents will follow these rules for documents that have a MIME type of text/html. Here is an example of the HTML syntax: The XML syntax is compatible with XHTML1 documents and its implementations. To use this syntax, the MIME type must be declared as an XML type, and the elements must be constructed according to the XML specification. Below is an example that follows XML syntax:

03 < head >

04 < title >Example document

06 < body >

07 < p >Example paragraph

Character encoding

For HTML syntax, developers can use three ways to set the encoding: - at the transport level. When using the Content-Type HTTP header, for example. - using the Unicode Byte Order Mark (BOM) character at the beginning of the file. This character provides a signature of the encoding used. - using a meta tag with a charset attribute, which must be defined as the first child element of head. Please note that the encoding is determined using

For XML syntax, developers must follow the rules of the XML specifications.

New elements

section represents part of a document or section
article represents an independent piece of content for inclusion in an article document
aside represents a piece of content that is only partially related to the rest of the page
header represents the title section
footer- footer, may contain information about the author, copyright and so on
nav represents a section of a document intended for navigation
dialogue can be used to highlight dialogs:
01 < dialog >

02 < dt >Costello

03 < dd >Look, you gotta first baseman?

04 < dt >Abbott

05 < dd >Certainly.

06 < dt >Costello

07 < dd >Who's playing first?

08 < dt >Abbott

09 < dd >That's right.

10 < dt >Costello

11 < dd >When you pay off the first baseman every month, who gets the money?

12 < dt >Abbott

13 < dd >Every dollar of it.

figure can be used to link a title to media content:
audio And video for multimedia. Both provide the corresponding API. This allows developers to script their own user interface, but also provides a way to call the standard user agent API. Can be used together with these elements source, if it is possible to organize parallel threads.
embed used for plugin content.
meter- to represent units of measurement.
time- date and/or time.
canvas used for dynamic graphics rendering.
command represents a command that the user can invoke.
datagrid- interactive presentation of a tree-type list or tabular data.
details represents additional information that the user can obtain upon request.
datalist along with a new attribute list used to make a combobox:
1 < input list = browsers >

2 < datalist id = browsers >

3 < option value = "Safari" >

4 < option value = "Internet Explorer" >

5 < option value = "Opera" >

6 < option value = "Firefox" >

7
datatemplate, rule, And nest provide a templating mechanism for HTML.
event-source used to intercept events sent by the server.
output represents a specific type of output, for example from calculations made through a script.
progress represents the progress of a task, such as a download.
Attribute type element input now has the following new meanings:
- datetime
- datetime-local
- date
- month
- week
- time
- number
- range
- email
The idea behind these new types is that the user agent can provide an interface to objects such as a calendar (date picker), address book integration, and provide the server with data in a specific format. This has certain benefits for both users and developers, since user input is validated before being sent to the server by the browser. This means that developers do not need to waste resources on validating entered data, which in turn leads to shorter response times.

New attributes

HTML 5 introduces several new attributes for elements that were already included in HTML 4:

elements a And area received a new ping flag, which defines a list of URI addresses that should be pinged when following a hyperlink. The principle of operation is not yet completely clear.
element area now has hreflang and rel attributes
base got the target attribute
attribute value For li and attribute start for element ol no longer deprecated
meta received attribute charset
new attribute autofocus can be determined by input(except in cases where type attribute - hidden), select, textarea And button. This provides a way to transfer control to the form while the page is loading
attribute form For input, output, select, textarea, button And fieldset allows you to associate an element with more than one form
input, button And form got the attribute replace, which determines what happens to the element after the form is submitted
form, select And datalist have an attribute data, which takes into account automatic pre-filling in case of filling with data from the server
new attribute required applies to input(except in cases where type attribute - hidden, image or button) and textarea. It indicates required fields
input And textarea have a new attribute inputmode which gives a hint user interface regarding what data is expected to be entered
now you can disable(disable) whole at once fieldset what was not possible before
element input has several new attributes for defining constraints: autocomplete, min, max, pattern And step, and also list, which can be used together with elements select And datalist
input And button also got a new attribute template, which can be used for repetition patterns
element menu has three new attributes: type, label And autosubmit
script has a new attribute async, which affects the loading and execution of the script
element html has a new attribute manifest, which points to an application cache used in conjunction with the API for standalone Web applications

Several attributes from HTML 4 apply to all elements, which is why they are called global attributes: class, dir, id, lang, tabindex And title.

There are also several new global attributes:

attribute contenteditable indicates that the element is editable
contextmenu can be used to point to a context menu created by the author
draggable can be used in conjunction with the new drag&drop API
irrelevant indicates that the element is not yet or no longer relevant

Attributes for the repetition model:

repeat
repeat-start
repeat-min
repeat-max

Canceled Items

The following elements are not included in HTML 5 because their effect is achieved using CSS: basefont

center

strike

The following elements were not included in HTML 5 because their use had a negative impact on usability and accessibility: frame

frameset

noframes

The following items are not included because they were rarely used or they may have been replaced by other items:

acronym
applet replaced object
isindex
dir replaced ul

Finally noscript remained only in HTML syntax, since its use involves parsing with using HTML parser.

Canceled Attributes

accesskey For a, area, button, input, label, legend And textarea
rev And charset For link And a
shape And coords For a
longdesc For img And iframe
target For link
nohref For area
profile For head
version For map, img, object, form, iframe, a
scheme For meta
archive, classid, codebase, codetype, declare And standby For object
valuetype And type For param
charset And language For script
summary For table
headers, axis And abbr For td And th
scope For td

Additionally, HTML 5 does not have the following attributes because they are handled better by CSS:

align For caption, iframe, img, input, object, legend, table, hr, div, h1-h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr And body
alink, link, text And vlink For body
background For body
bgcolor For table, tr, td, th And body
border For table, img And object
cellpadding And cellspacing For table
char And charoff For col, colgroup, tbody, td, tfoot, th, thead And tr
clear For br
compact For menu, ol And ul
frame on table
frameborder attributed to iframe
height For iframe, td And th
hspace And vspace For img And object
marginheight, marginwidth And scrolling For iframe
noshade For hr
nowrap For td And th
rules For table
size For hr, input And select
style for all elements
type For li, ol And ul
valign For col, colgroup, tbody, td, tfoot, th, thead And tr
width For hr, table, td, th, col, colgroup, iframe And pre

API

HTML 5 introduces many APIs that should help you create Web applications. They can be used together with new elements.

2D drawing API that can be used with the new element canvas
Video and audio playback API that can be used with new elements video And audio
allocated memory area (Persistent storage) with data support in the form of key/value and SQL data
API that allows autonomous operation web applications
An API that allows web applications to register themselves for specific protocols or MIME types
Editing API combined with the new global contenteditable attribute
Drag&drop API in combination with attribute draggable
Network API
An API that builds a browsing history to prevent the back button from breaking (This API has the necessary security restrictions)
Cross-document messaging
Server-sent events combined with a new element event-source

HTMLDocument extension

HTML 5 extended the HTMLDocument interface. The interface is now implemented on all Document interface objects. His new methods:

getElementsByClassName()
activeElement And hasFocus
getSelection()
designMode And execCommand(), which are used primarily for document editing

Extension to HTMLElement

The HTMLElement interface also received several extensions:

getElementsByClassName()
innerHTML
classList introduced for ease of access to className. The returned object has methods has(), add(), remove() And toggle() to manipulate element classes

Based on

HTML5 has attracted a lot of attention from web developers. And so the differences between HTML5 and its predecessors.

The new features of this standard are intended for creating interactive web applications with maximum use multimedia content, working with software interfaces and document structuring. language interactive web application

The structural capabilities of HTML5 make the structure of a web document simpler and clearer, and the code is much cleaner. Instead of the div containers used in HTML 4.01, you can use tags such as header, nav, section, article, aside, and footer.

New elements allow you to better describe headers, footers, site blocks, text, and other parts of a website. These innovations are used to generate a table of contents and organize more efficient and easy navigation on a web page, without cluttering the code with other unimportant tags. Here are some examples:

Example 1: Instead of the cumbersome HTML4.01 notation:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,

in HTML5 it will look much shorter:

.Example 2: In HTML4, the following code is needed to create a header:

My title

text

HTML5 uses the element

instead of

Heading

Your text

As you can see, the code becomes simpler and clearer.

Multimedia capabilities in HTML5 eliminate the use Adobe Flash and others third party programs. To add music and video files, you can use any browser that supports HTML5, when HTML 4.0 and HTML 4.01 require additional programs.

Entering data in HTML5 forms has become much safer, the correctness of the data is controlled directly during entry, whereas in HTML 4 the correctness of the entered data is checked after the document is sent, which does not create certain inconveniences for users.

Text and images become one in HTML5, which significantly increases the number of possibilities and allows you to create very impressive, colorful websites without third-party scripts.

Animations and graphics. Here, developers can take advantage of the Canvas function, which can replace Adobe Flash and similar additional programs. It becomes possible to place animation, graphic elements and even small games on your website directly on the website.

Benefits for the end user. There have been a number of useful changes here:

No need to install numerous third-party programs.

HTML5 compatibility, unlike its predecessors, has been improved. It is compatible not only personal computers and laptops, but also with tablets, smartphones, modern models DVD players, TVs, consoles that provide access to Internet resources.

In HTML5 single standard display content, regardless of browser type.

Submitting your good work to the knowledge base is easy. Use the form below

Students, graduate students, young scientists who use the knowledge base in their studies and work will be very grateful to you.

HTML Basics

The HTML code tells the browser how to render the content. The markup is basic structure pages. For decades, HTML has been considered a cornerstone technology on the Internet, along with CSS and JS. HTML and CSS standards are governed by the World Wide Web Consortium.

As the name suggests, HTML cannot be called a programming language. It is a markup language used to organize data on the Internet. HTML documents consist of HTML elements, presented in the form of tags. Tags are written in angle brackets and divide content into categories. A simple example HTML structure with a "Hello World" message looks like this:

Hello World

< html >

< body >

< p >Hello World< / p >

< / body >

< / html >

HTML documents are downloaded from servers and tell the browser how to display text, links, images, and interactive forms.

History of HTML

New versions of HTML focused on making Internet technologies more accessible, rather than rendering older versions. For example, in addition to new options for creating layouts, HTML4 has improved the placement of elements for visually impaired users.

The last major update since the 1990s was aimed at internationalizing the language, as well as making it easier for programmers around the world to improve HTML. As part of this effort, the Universal Coded Character Set was adopted as the official HTML encoding. This move has improved the display of the many characters and accents found in human languages and dialects.

As a result, archival indexing has improved, leading to improved search accuracy. In addition, very high-quality typography appeared. HTML4 also gave web designers additional control over the speed and order in which content was rendered.

HTML or HTML5: The Evolution of Web Development

The Internet is very different now than it was in 1999, when the last major update to HTML 4.01 was released. There are technologies now that we could not imagine at the turn of the century. Smartphones, tablets and other mobile devices present new challenges for engineers and software developers. Accelerating globalization has made the standardization of Internet technologies a priority for everyone with a stake in the global economy. Global Internet consumption is growing year after year, and the technologies used are predicted to develop faster and faster.

Therefore, HTML5 was implemented to solve these problems and provide a smoother and more consistent experience for users and developers.

HTML is a joint effort between the World Wide Web Consortium, or W3C, and the Web Hypertext Application Technology Working Group, or WHATWG. In 2006, the organizations teamed up to reduce dependency on plugins, improve error handling, and replace scripts with markup. As a result, HTML5 has greatly simplified the process of creating web applications.

Thanks to HTML5, web pages have learned to store data locally in users' browsers, which makes it possible to abandon HTTP cookies. Content is delivered faster and more securely. HTML5 has also made cross-browser compatibility easier. Typically, browsers used various plugins to play multimedia files. Built-in audio and video support eliminates compatibility issues. New attributes include control buttons such as play, pause and volume.

Gradual implementation

HTML4 has been a standard for 15 years, which is why many developers still use it. Browsers will continue to support this standard for a long time to come. Older browsers may "ignore" new HTML5 code when rendering content. In fact, everything modern browsers Well support the HTML5 specification: Chrome, Firefox, Opera and Safari. HTML5 is constantly evolving, so browsers add support for new features in new versions. Fortunately for us, all major browsers simultaneously add support for new features as soon as they are released.

You can test your browser for HTML5 support using HTML5test.

Most developers won't have to fix their old sites. However, if you connect your future with creating websites, you should learn about the advantages of HTML5 over HTML.

HTML or HTML5: what's new?

If HTML worked for everyone for over a decade, why did it need to be updated in 2014? The most significant difference between older versions of HTML and HTML5 is the integration of video and audio into the language specifications. Additionally, HTML5 includes the following updates:

Deprecated elements such as center, font and strike have been removed;

improved parsing rules made it more flexible and compatible;

new elements video, time, nav, section, progress, meter, aside and canvas have appeared;

new attributes for inputs, including email, URL, dates and times;

new attributes, including charset, async and ping;

new APIs with offline caching and drag-and-drop support, etc.;

support vector graphics without third-party programs such as Silverlight or Flash;

MathML support has improved the display of mathematical notations;

thanks to the JS Web worker API, JS can now run in background;

global attributes like tabindex, repeat and id can now be applied to all elements.

The image below shows the main HTML5 properties broken down by category.

What are the user benefits of HTML5 over HTML?

We have dealt with the technical side of the issue, but what advantages does HTML5 bring to ordinary users? Below I have compiled a list of these innovations that you may or may not have noticed:

Some data can be stored on the user's device, i.e. applications can work without an Internet connection;

Web pages can display more fonts with a wider range of colors, shading, and other effects;

objects on the page can move with the cursor;

interactive media such as games can be launched directly in browsers without connecting additional software or plugins. Audio and video now also don't require plugins;

browsers can display interactive 3D graphics using GPU computer.

By eliminating the need for third-party plugins, HTML5 speeds up the delivery of more dynamic content.

What advantages does HTML5 have over HTML for web developers?

The main focus of HTML5 was to give developers more flexibility, which in turn would lead to a more immersive user experience. HTML5 was conceived for several purposes:

1. Same error handling

All browsers have parsers to handle syntax and structural errors in HTML code. Until recently, standards for this process were not prescribed anywhere.

Therefore, browser developers had to test HTML documents with errors in other browsers to reverse engineer the error handling process.

In HTML life, mistakes are inevitable. According to Rebuildingtheweb, 90% of pages contain coding errors. An error handler is simply necessary for the correct display of sites. As a result, coded error handling saves browser developers a lot of time and money. The benefits of a clearly defined parsing algorithm cannot be understated.

2. Improved property support for web applications

Another goal of HTML5 was to make browsers act like application platforms. Websites have become much more complex, so developers have learned to work around browser extensions and other server-side technologies. HTML5 allows you to control the performance of the site. Many Flash and JS hacks used in HTML4 were included in the new language specification. These changes provide a smoother and faster user experience.

3. Improved element semantics

The semantic roles of some existing elements have been improved, making the code more intuitive. The new section, header, article and nav elements can replace most of the div tags that make it harder to find errors.

4. Maximum support for mobile devices

Mobile devices– a complete headache for web developers. Their proliferation over the past ten years has forced improvements in HTML standards. Users want to access web applications from anywhere, at any time, on any device. Developers were forced to submit to market demands. HTML5 simplifies mobile support as it is tailored for smartphones and tablets.

Other notable improvements

Several years have passed since the launch of HTML5, and several large companies have migrated their sites to the new standard. Lots of developers share their opinions about HTML and HTML5. Most mentioned features:

1. Support for custom data attributes

Before HTML5, adding custom attributes to tags was risky. In HTML4, custom attributes did not interfere with the full rendering of pages, but documents with them were not validated, resulting in rendering in compatibility mode. The data-* attribute solved this problem.

The data-* attribute can be used in many ways, but its main purpose is to store additional information about elements. The data is stored as a simple string. User data allowed developers to create more engaging pages without the need for Ajax and server-side technologies.

2. No more cookies

It's been said before, but support for local data storage has truly revolutionized development. Before HTML5, the only way to reliably store state information was through the use of cookies. Cookies can store a limited amount of data, and some users disable them by default. The HTML5 localStorage object allows you to cheat the stateless nature of the HTTP protocol.

The localStorage object belongs to the global window namespace, meaning it is accessible from anywhere in the script. You can only put strings into local storage, but using the JSON.stringify() and JSON.parse() methods you can easily push all new data there. There is another sessionStorage object that allows you to store data until the user closes the browser window.

3. Autofocus on form fields

The autofocus attribute allows developers to specify a field that will receive focus after the page loads. In one document, you can specify the autofocus attribute for only one element; the user can override the value by selecting a different field. For example, if you add the autofocus attribute to the Last Name field, as shown in the screenshot below, then after the page loads, the Last Name field is automatically highlighted.

4. You no longer need to specify the type attribute in script and link tags

HTML5 assumes that script and link tags refer to scripts and styles, meaning there is no need to use the type attribute.

The Future of HTML and HTML5

A new generation of developers will no doubt find new benefits in HTML5, and social media will help language development. The W3C announced that future updates to HTML5 will prioritize application fundamentals such as privacy tools. The main emphasis in HTML5 was on defining reliable compatible properties, so unreliable ones will go into HTML 5.1. One of the more controversial proposals was the inclusion of digital rights management tools.

At the beginning of 2017, web developers can still get by with a good knowledge of the old HTML specifications. However, if you want to continue your career and don't want to learn HTML5, you'll only make things worse for yourself. Just look at the built-in support for video and audio compared to 4.1.

In the last year, or maybe two, there has been a significant increase in interest in the HTML 5 specification currently being developed. This applies to both browser manufacturers and website creators. However, I have not yet found a holistic view of the differences between the new specification and the old one, so I decided to outline the essence of the official document of the HTML5 working group about the differences between this specification and its previous version.

This article is not complete; it describes only the first two of the four main sections of the document on the differences between HTML4 and HTML5. It will be expanded and completed soon, and updates are possible as the original W3C document changes.

1. Introduction

HTML has continuously evolved since it was introduced to the Internet in the early 1990s. Some features have been included in the specifications and used in different versions software. In some ways, the authors' implementations and techniques were consistent with each other and the specifications, but on the other hand, they continued to drift apart.

HTML4 became a W3C Recommendation in 1997. While it continued to be, for many, a rough guide to the basic functionality of HTML, it also did not provide enough information to build implementations that interact with other implementations, and more importantly with the critical amount of HTML content generated. This applied to XHTML1 and DOM Level 2 HTML as well. HTML5 will replace these documents.

The HTML5 working draft began in 2004 as an attempt to study modern HTML implementations and the HTML documents created with them. Working draft:

Describes a separate language called HTML5, which can use HTML or XML syntax.
Defines detailed processing models for developing interoperable implementations.
Improves markup for HTML documents.
Introduces markup and APIs to generate idioms such as Web applications.

1.1. Unsolved problems

HTML5 is still an unfinished specification. The content of HTML5, as well as the content of this document ("HTML5 differences from HTML4"), which directly depends on HTML5, is still being discussed in the HTML and WHATWG Working Group. Unresolved issues include (the list is not exhaustive):

Semantic definition of some elements previously intended only for decoration.
Information about the availability, replacement, and accompanying alternative content of media data, such as alt and summary attributes.

1.2. Backward Compatibility

HTML5 is defined in such a way that it is backwards compatible with the way user agents handle linked content. To keep the language relatively simple for authors, some elements and attributes are not included elsewhere in this document, such as design elements that are better described in the CSS specification.

User agents, however, will always need to support legacy elements and attributes, which is why the specification completely separates the requirements for authors and user agents. This means that authors cannot use isindex or plaintext elements, but user agents need to support them for compatibility with generated HTML content.

1.3. Model under development

The HTML5 specification will not be considered complete until at least two complete implementations of the specification exist. This approach differs from previous versions of HTML. Its purpose is to ensure that the specification is fully usable for designers and developers.

1.4. Impact on web architecture

The following areas/features defined in HTML5 are expected to impact web architecture:

Using the DOM as a basis for describing a language.
Browser environment concept.
Separation of requirements for user agents and authors of HTML documents.
Using mandatory definitions instead of abstract definitions, requiring the equivalent of a "black box" in implementation.
New content model concept (replacing the concept of lowercase and block elements in HTML4).
Consider accessibility as an integral concept to create new features (such as the hidden attribute, progress element, etc.) instead of any extensions (such as the alt attribute).
Detailed definition of semantics (for example, the outline algorithm, instead of its fuzzy semantics in HTML4).
The menu and command elements.
Fundamental ideas.
Offline cache of web applications.
Definition of the browser context "navigation" algorithm and related session history traversal algorithms.
Control of content types and encodings.
A very strict and unambiguous description of the parser.
ContentEditable and UndoManager capabilities.
Drag&Drop and Copy&Past architecture.
New sandbox capabilities for iframes.

2. Syntax

HTML5 uses HTML syntax, which is compatible with HTML4 and XHTML1 documents published on the Internet, but is not compatible with HTML4's fuzzy SGML features, such as processing instructions and shorthand markup. Documents using HTML syntax almost always have the media type text/html .

HTML5 also describes detailed parsing rules (including error handling) that are largely compatible with existing popular parser implementations. User agents should use these rules for documents that have a media type of text/html . Below is an example of a document that follows the HTML syntax of the HTML5 language:

Example document

Example paragraph

HTML5 also defines the text/html-sandboxed media type for documents that use HTML syntax and contain untested (development) content.

Another syntax that can be used for HTML5 is XML. This syntax is compatible with XHTML1 implementations and documents. Documents using this syntax must have an XML media type, and the elements must be placed in the http://www.w3.org/1999/xhtml namespace according to the rules further established by the XML specifications.

Below is an example of a document that follows the XML syntax of the HTML5 language. Note that XML documents must have an XML media type, such as application/xhtml+xml or application/xml .

Example document

Example paragraph

2.1. Character encoding

At the transport layer, you can use the HTTP Content-Type header.
Use a Unicode byte order marker (BOM) character at the beginning of the file. This character provides a signature for using the required encoding.
Using a meta element with a charset attribute. For example, can be used to set the UTF-8 encoding. This post replaces a longer one , which is also valid in HTML syntax.

To set the encoding in the case of XML syntax, authors must use the rules that are established in the XML specifications.

2.2. DOCTYPE

HTML5 HTML syntax requires a DOCTYPE to ensure that the browser renders the page in standards-compliant mode. DOCTYPE has no other purpose and is therefore optional for XML. Documents with the XML media type are always rendered in standards-ready mode. The DOCTYPE declaration must be as follows:, it is case-insensitive in HTML syntax. DOCTYPE in early versions of HTML was longer because HTML language was based on SGML, and therefore required a DTD reference. In HTML5, such a reference is not required, and DOCTYPE is needed only to enable standards support mode for documents with HTML syntax. Browsers already switch to standards mode when using an ad .

2.3. MathML and SVG

The HTML syntax of the HTML5 language allows the use of MathML and SVG elements directly within the document. Below is an example of how to use this feature:

SVG to text/html

Green circle:

More complex combinations are also acceptable. For example, with the SVG foreignObject element, you can embed MathML, HTML inside an SVG fragment that itself is inside HTML.

2.4. Other

There are a few other syntax changes worth mentioning:

HTML now has built-in support for IRIs, although they can only be fully used if the document is UTF-8 or UTF-16 encoded.
The lang attribute can have the value empty line or a valid language identifier, as well as the xml:lang attribute in XML.

The article is based on the official W3C document "HTML5 differences from HTML4" (dated March 10, 2010).