Geekly Articles each Day
⬆️ ⬇️

First look at HTML 5

Preamble

The article discusses new interesting features that will be provided by the fifth version of the HTML standard. Several code examples using the new tags are given, and the concepts of HTML and XML serialization are explained with a description of the advantages of using each of them.



The introductory "lyrical" part of the text is shortened, because it largely intersects with a previously published review post on HTML 5 , in which a fragment of an interview by the same author was cited.



Author: Lachlan Hunt, http://lachy.id.au

Original: http://www.alistapart.com/articles/previewofhtml5

Translation: Alexander Musaev, http://paradigm.ru

')

Introduction

In the course of the continuous development of the Internet, more and more serious demands are being placed on the language of the hypertext markup. HTML 4 has been in use for more than a dozen years, and the numerous innovations that are currently used on websites make the limitations of its specification more and more tangible. Web developers have long required a broader functionality than what this standard can represent.



The fifth version of HTML contains many new features for creating interactive websites and web applications, interacting with forms, working with various program interfaces, embedding multimedia content into pages, structuring documents, etc.



Structure

HTML 5 provides many new elements that make structuring web documents much easier. Many pages based on HTML 4 contained typical structural fragments, such as header, text columns, footer, etc. Today, the usual solution is to define these blocks using div containers with the name of the corresponding class or unique identifier for each of them.



The illustration shows a typical page layout with two columns, made using div containers with class and id attributes. It contains a header, a horizontal block of navigation elements, a block for the main text of the page, an auxiliary column to the right of it, and a footer.



The div elements are actively used for the reason that the current version of the HTML standard lacks semantic elements with which it would be possible to describe the blocks of pages listed above more specifically. The HTML 5 standard takes this flaw into account and provides a number of new tags for the individual description of each block of typical markup.



The div containers are replaced in our example with new elements: header , nav , section , article , aside , and footer . The HTML code thus takes the following form:



<body>

<header>...</header>

<nav>...</nav>

<article>

<section>

...

</section>

</article>

<aside>...</aside>

<footer>...</footer>

</body>



There are a number of reasons to prefer the new tags listed above. For example, using them removes the previously existing restriction of six levels of headings ( h1 - h6 ). The specification describes in detail the algorithm for the formation of a table of contents , which not only takes into account new structural elements, but also maintains backward compatibility with the previous version of the standard. This innovation can be used to automatically generate a table of contents, which will simplify navigation within web pages.



The following example section and h1 containers:



<h1>Level 1</h1>

<section>

<h1>Level 2</h1>

<section>

<h1>Level 3</h1>

</section>

</section>



Please note that for better compatibility with existing browsers, in addition to h1 it is also possible to use headers of other levels ( h2 - h6 ).



When the destination of a section of a page can be automatically determined by specific tag names, it becomes possible to organize easier and more efficient navigation through the document. For example, users will be able to flip through a table of contents with one click, quickly moving to the substantive part of a large document, or move from one article to the next. What is most interesting, while it becomes completely optional to add to the page auxiliary navigation links. The code at the same time becomes less “cluttered up” with minor details, without which you can do.

The head element is interpreted as a section header. Such containers, if necessary, can contain not only the name itself, but also a subtitle, a history of changes, a link to the author, and any other information that is logical to refer to the title part.



<header>

<h1>A Preview of HTML 5</h1>

<p class="byline">By Lachlan Hunt</p>

</header>



<header>

<h1>Example Blog</h1>

<h2>Insert tag line here.</h2>

</header>



The footer element is the final block of the section to which it belongs (an analogue of the footer for the paper page). Such blocks, as a rule, contain supporting information about the section. For example, links to related materials, copyright information, etc.



<footer>© 2007 Example Inc.</footer>



nav intended for navigation links, which is useful both for cross-page navigation within the site, and for in-page navigation (for organizing the table of contents).



<nav>

<ul>

<li><a href="/">Home</a></li>



<li><a href="/products">Products</a></li>

<li><a href="/services">Services</a></li>

<li><a href="/about">About</a></li>



</ul>

</nav>



The aside container is used for supporting materials, for example, for defining additional columns with background text (sidebars).



<aside>

<h1>Archives</h1>



<ul>

<li><a href="/2007/09/">September 2007</a></li>

<li><a href="/2007/08/">August 2007</a></li>

<li><a href="/2007/07/">July 2007</a></li>

</ul>

</aside>



The section element is interpreted as a general purpose section. Such a section may be, for example, a paragraph.



<section>

<h1>Chapter 1: The Period</h1>

<p>It was the best of times, it was the worst of times,

it was the age of wisdom, it was the age of foolishness,

it was the epoch of belief, it was the epoch of incredulity,

it was the season of Light, it was the season of Darkness,

...</p>

</section>



(An example is an excerpt from The Tale of Two Cities by Charles Dickens)



article defines independent sections of a document, page, or site. This element can be used to highlight news, forum posts, posts or comments on a blog, etc.



<article id="comment-2">

<header>

<h4><a href="#comment-2" rel="bookmark">Comment #2</a>

by <a href="http://example.com/">Jack O'Niell</a></h4>

<p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>

</header>



<p>That's another great article!</p>

</article>



Audio and video

In recent years, audio recordings and videos have become widespread on the Internet thanks to numerous services that facilitate their publication (YouTube, Google Video, MySpace, etc.). Due to the lack of built-in HTML capabilities, most sites hosting similar content use Flash as an aid. The choice of this technology is usually justified by the fact that Flash currently has the widest support among browsers, as compared to alternative technologies, with the help of which it would be possible to provide playback of multimedia content (QuickTime, Windows Media).



A huge number of multimedia players, written in Flash, is a confirmation that developers often prefer to independently form their interface, despite the fact that in most cases users are provided with the same functionality (play, pause, rewind and volume control) . It is planned that in the future these functions will be supported by the browsers themselves, which will provide a basic opportunity for embedding audio and video recordings into web pages, as well as the ability to control these elements through the DOM API.

With the help of new video and audio tags this will be really easy. Most of the functions of their API will be the same, with only one difference in orientation towards the reproduction of visual and non-visual material.



Opera and WebKit already have releases with partial support for the video tag. You can already download an experimental version of Opera browser or the latest WebKit weekly build to demonstrate how the following code examples work. Opera has support for Ogg Theora , and WebKit understands all the formats that QuickTime has, including third-party codecs.



The easiest way to insert a video into a web page is to use a video container, as shown in the following example. The controls attribute is used to determine whether the interface of a standard media player should be displayed or not (in our case, playback controls will be displayed).



<video src="video.ogv" controls poster="poster.jpg"

width="320" height="240">

<a href="video.ogv">Download movie</a>

</video>



The optional poster attribute can be used to define a static image displayed in the video container before the recording starts playing. There are video formats that have a similar built-in capability (for example, MPEG4), but using the approach described above allows you to achieve this functionality without reference to a specific codec.







In the same way, you can embed audio recordings into documents using the audio element. Most of the attributes of the audio and video tags are the same, but audio, for obvious reasons, lacks width , height and poster .



<audio src="music.oga" controls>

<a href="music.oga">Download song</a>

</audio>



The HTML 5 standard provides a source element for inserting links to audio and video files in several alternative formats, from which the browser will be able to choose the most preferred option, based on the codecs it supports and the types of content format specified in the code. When using the nested source tags, the src attribute of the audio and video containers should be omitted, otherwise the source tags will be ignored.



<video poster="poster.jpg">

<source src="video.3gp" type="video/3gpp"

media="handheld">

<source src="video.ogv" type="video/ogg;

codecs="theora, vorbis">

<source src="video.mp4" type="video/mp4">

</video>



<audio>

<source src="music.oga" type="audio/ogg">

<source src="music.mp3" type="audio/mpeg">

</audio>



For developers who themselves want to control the functioning of the user interface and ensure its best fit to the overall design of the pages, a special API is provided through which you can control the playback process. This API defines the play() and pause() methods (the meaning of which is clear from the name), as well as the currentTime property, which in the following example is used to “rewind” the video to the beginning.



<video src="video.ogg" id="video"></video>



<script>

var video = document.getElementById("video");

</script>



<p>

<button type="button" onclick="video.play();">Play</button>

<button type="button" onclick="video.pause();">Pause</button>

<button type="button" onclick="video.currentTime = 0;">

<< Rewind</button>

</p>



( similar example to opera.com)



There are many other attributes and API functions besides those listed in this article. Their detailed description can be found in the current working version of the specification .



Submission of documents

Unlike previous versions of HTML and XHTML, described in terms of their own syntax, HTML 5 is described according to the terms of the Document Object Model (DOM). For the internal presentation of the document by the browser, a tree structure is used.



Below is the simplest example of the structure of a document consisting of the name of the page, the title and one paragraph of text:



Such a tree contains the title element in the head container, as well as h1 and p in the body .



The main reason (and advantage) for choosing DOM to define the HTML 5 standard is that the language itself can then be described independently of the syntax. There are two main types of syntax according to which an HTML document can be presented: HTML serialization (also known as HTML 5) and XML serialization (or XHTML 5).

HTML serialization is based on the usual HTML syntax for earlier versions (based on SGML). Its definition is focused on the best fit to how browsers actually handle HTML.



<!DOCTYPE html>

<html>

<head>

<title>An HTML Document</title>

</head>



<body>

<h1>Example</h1>

<p>This is an example HTML document.

</body>

</html>



As in previous versions of HTML, some tags remain optional, and their presence is automatically implied.



XML serialization uses XML 1.0 and namespaces, as does XHTML 1.0.



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>An HTML Document</title>

</head>



<body>

<h1>Example</h1>

<p>This is an example HTML document.</p>

</body>



</html>



Unlike the previous example, the xmlns attribute is present here, as well as the closing p tag (whose presence in the XML context is required). To determine the difference between serialization, browsers will use a MIME type value. Any document defined as text/html must comply with the HTML serialization requirements. If the MIME type is application/xhtml+xml , the XML serialization requirements must be satisfied.



The choice of the appropriate type of serialization is assigned to webmasters, since Neither of the two possible options can initially be considered preferable in absolutely all cases.



Benefits of using HTML serialization:



Translator’s note: Many of the advantages listed are also disadvantages. In particular, a reduction in the rigidity of the syntactic rules automatically provokes the generation of a careless, “dirty” code.



The advantages of using XHTML serialization:





Promotion of standard development

Despite the fact that the work on HTML 5 is proceeding by leaps and bounds, there is still a considerable amount of time left before its completion (according to today's estimates, it will take another 10-15 years). During this time, reviews from web designers, CMS developers and browsers, as well as other specialists, remain extremely relevant to the successful development of the project. The initiative of all those who wish to contribute to the development of HTML 5 is not only welcomed, but also actively encouraged.



Auxiliary materials and related links:

Source: https://habr.com/ru/post/31320/

More articles:



All Articles