What makes up html5

HTML documents consist of a tree of elements and text. Certain start tags and end tags can in certain cases be omitted and are implied by other tags. Tags have to be nested such that elements are all completely within each other, without overlapping:. This specification defines a set of elements that can be used in HTML, along with rules about the ways in which the elements can be nested. Elements can have attributes, which control how the elements work.

In the example below, there is a hyperlink , formed using the a element and its href attribute:. Otherwise, it has to be quoted using either single or double quotes. HTML user agents e.

A DOM tree is an in-memory representation of a document. The markup snippet at the top of this section would be turned into the following DOM tree:. The root element of this tree is the html element, which is the element always found at the root of HTML documents.

It contains two elements, head and body , as well as a text node between them. However, for historical reasons not all of the spaces and line breaks in the original markup appear in the DOM. In particular, all the whitespace before head start tag ends up being dropped silently, and all the whitespace after the body end tag ends up placed at the end of the body. The head element contains a title element, which itself contains a text node with the text "Sample page".

Similarly, the body element contains an h1 element, a p element, and a comment. This DOM tree can be manipulated from scripts in the page. Scripts typically in JavaScript are small programs that can be embedded using the script element or using event handler content attributes.

For example, here is a form with a script that sets the value of the form's output element to say "Hello World":. Each element in the DOM tree is represented by an object, and these objects have APIs so that they can be manipulated. For instance, a link e. Since DOM trees are used as the way to represent HTML documents when they are processed and presented by implementations especially interactive implementations like Web browsers , this specification is mostly phrased in terms of DOM trees, instead of the markup described above.

HTML documents represent a media-independent description of interactive content. HTML documents might be rendered to a screen, or through a speech synthesizer, or on a braille display.

To influence exactly how such rendering takes place, authors can use a styling language such as CSS. For more details on how to use HTML, authors are encouraged to consult tutorials and guides. Some of the examples included in this specification might also be of use, but the novice author is cautioned that this specification, by necessity, defines the language with a level of detail that might be difficult to understand at first.

Unlike previous versions of the HTML specification, this specification defines in some detail the required processing for invalid documents as well as valid documents. However, even though the processing of invalid content is in most cases well-defined, conformance requirements for documents are still important: in practice, interoperability the situation in which all implementations process particular content in a reliable and identical or equivalent way is not the only goal of document conformance requirements.

This section details some of the more common reasons for still distinguishing between a conforming document and one with errors. The majority of presentational features from previous versions of HTML are no longer allowed.

Presentational markup in general has been found to have a number of problems:. While it is possible to use presentational markup in a way that provides users of assistive technologies ATs with an acceptable experience e. Furthermore, even using such techniques doesn't help make pages accessible for non-AT non-graphical users, such as users of text-mode browsers.

Using media-independent markup, on the other hand, provides an easy way for documents to be authored in such a way that they work for more users e.

It is significantly easier to maintain a site written in such a way that the markup is style-independent. Presentational markup tends to be much more redundant, and thus results in larger document sizes. For those reasons, presentational markup has been removed from HTML in this version. The only remaining presentational markup features in HTML are the style attribute and the style element.

Use of the style attribute is somewhat discouraged in production environments, but it can be useful for rapid prototyping where its rules can be directly moved into a separate style sheet later and for providing specific styles in unusual cases where a separate style sheet would be inconvenient.

Similarly, the style element can be useful in syndication or for page-specific styles, but in general an external style sheet is likely to be more convenient when the styles apply to multiple pages. It is also worth noting that some elements that were previously presentational have been redefined in this specification to be media-independent: b , i , hr , s , small , and u.

Certain invalid syntax constructs, when parsed, result in DOM trees that are highly unintuitive. For example, the following markup fragment results in a DOM with an hr element that is an earlier sibling of the corresponding table element:. To allow user agents to be used in controlled environments without having to implement the more bizarre and convoluted error handling rules, user agents are permitted to fail whenever encountering a parse error.

To avoid interoperability problems with such user agents, any syntax resulting in such behavior is considered invalid. Most syntax constructs that require such handling are considered invalid. Certain syntax constructs can result in disproportionally poor performance. To discourage the use of such constructs, they are typically made non-conforming. For example, the following markup results in poor performance, since all the unclosed i elements have to be reconstructed in each paragraph, resulting in progressively more elements in each paragraph:.

There are syntax constructs that, for historical reasons, are relatively fragile. To help reduce the number of users who accidentally run into such problems, they are made non-conforming. For example, the parsing of certain named character references in attributes happens even with the closing semicolon being omitted.

It is safe to include an ampersand followed by letters that do not form a named character reference, but if the letters are changed to a string that does form a named character reference, they will be interpreted as that character instead. In the following fragment, however, the attribute's value is actually "? To avoid this problem, all named character references are required to end with a semicolon, and uses of named character references without a semicolon are flagged as errors.

Certain syntax constructs are known to cause especially subtle or serious problems in legacy user agents, and are therefore marked as non-conforming to help authors avoid them. In certain legacy user agents, it is sometimes treated as a quote character.

More specifically, HTML5 establishes a single syntax for interacting with all the elements that web page has loaded into your computer's memory.

There's a potential point of confusion we should clarify about the term "HTML5" before we go on. There is a new version of the markup language itself called HTML5. However, that language is just one part of the broader standard that shares the name HTML5. With that distinction in mind, how does the browser load a page written according to the newer HTML5 standard and not the long-standing HTML 4 language?

After all, we usually just rely on our browsers to load web pages without worrying about the HTML behind them. To make this magic happen, the HTML5 standard integrates new versions of multiple technologies working together toward common goals.

These goals include the following:. A markup language uses a series of tags to mark elements in a file. The markup relies on some sort of model that defines what those elements are and how to use them. The DOM is incorporated within the web browser application itself. Thus, the markup language is just a way of giving the browser instructions based on a model that it already understands.

Each stamp is a different element within the DOM. Each page written in HTML is just a series of imprints made from the stamps, which are filled in with your own custom content. The web browser can display anything created from the stamps in that box. Web developers specify MIME types when they encode a web page. This prompts the browser to load the corresponding files appropriately according to their types. Next, let's move on to how to put together a web page using HTML5.

The sample code in the sidebar on this page shows what this HTML code might look like for a basic web page. When you're browsing the web, use the "View source" or similar option in your browser to see the HTML and other code loaded to create the page you're currently viewing. All of the code shown in our example is also backward compatible with HTML 4, meaning that it doesn't have any of the new additions available in HTML5.

Though it's not present in all web pages, it's a good practice to start your HTML file with a document type doctype declaration as shown in the example.

This confirms that the browser should expect standard HTML when interpreting the document. If that's the case, the developer specifies the location of the DTD as part of this doctype. Besides the doctype, the remaining code in the example is standard HTML syntax. If you're not familiar with this syntax, see our article How Web Pages Work.

So, what's new to these basic elements in HTML5? Here's the list, and we'll take a closer look at each in the pages that follow.

Though forms sections of a website where users can input specific data, like names, addresses, etc. To make up for this, third party developers created web form software that make basic HTML forms seem nearly obsolete. HTML5 breathed new life into forms, though, with new form elements, input types and attributes for existing elements.

Without distinguishing between old and new syntax, let's examine the overall approach to creating a form for your web page using HTML5. Here some recommended steps to get started:. Check an up-to-date HTML5 reference guide for a complete list of form elements and their attributes.

Also, note that support for some form fields varies between web browsers. Be sure to test your form in each type of browser you want your website to support. Semantic elements in HTML5 are, as their name implies, those that refer to the meaning of certain content. Each class could be associated with specific styles using CSS or with specific behavior using scripts.

Over time, certain content types became very common on websites, such as headers, footers, menus and navigation points. HTML5 incorporates these by adding standard semantic elements. The following is the list of semantic page elements with a brief definition of each. Be sure to find an HTML5 reference you can trust for a complete list of valid attributes and child elements for each semantic element.

Semantic elements were created as an improvement over more generic HTML elements. The next new element type, though, aims to be an all-out replacement for third-party media extensions in web browsers. One of the most talked-about features of HTML5 is its new approach to embedding media on a web page. We'll take a look at some amazing applications of this HTML5 feature later in this article. HTML5 accomplishes this embedding without requiring an external browser plugin.

The following are the media elements available in HTML Flash is a media player that you can add as a plugin to your web browser.

Because Flash has all the features necessary for a site to embed different types of media, sites like YouTube have depended on it for years. There are even some web applications that rely entirely on Flash to power their interactive interfaces. Flash adoption was so widespread in that, upon the release of the much anticipated Apple iPhone, many consumers were upset to hear that its operating system , Apple iOS, didn't support Flash.

When Google , arguably the biggest brand on the Internet, dove head-first into developing its apps with HTML5, Flash supporters took notice. With HTML5, such cumbersome customizations are no longer necessary when creating an interactive media experience to rival Flash technology. The short answer is, "Neither. At the time of this writing, it seems that though HTML5 is gaining status, Flash is likely to retain its own popularity for a while, too.

Flash over to the next page where we'll break down the canvas element and how to use it in your HTML5 web pages. One of the most important new features to HTML5 is the canvas. The canvas feature lets you identify a section of a web page , draw content within it and add interactive functionality. Let's look at the three parts you'll need to set up a canvas in HTML You can specify the height and width of the canvas, measured from its upper-left corner.

The identity attribute id for the canvas is important because you'll need it to match its corresponding JavaScript code. The following is an example of using the canvas tag in HTML5 code:. Part 2: Create the JavaScript that draws content into the canvas. Here, let's just look at some sample JavaScript you can use for canvas objects. The following code draws a rectangle within the canvas above:. This function draws a solid blue rectangle within your canvas.

Ordinarily, the support table includes the most recent versions of the most popular browsers. However, you can tweak the table so it includes support information for other browsers that may be important to you—say, the aging IE 7 or a specialized mobile browser like Firefox for Android.

A list of browsers appears, and you can choose the browsers you want by adding a checkmark next to their names. How do you know which browser versions you need to worry about? Browser adoption statistics can tell you what portion of your audience has a browser that supports the features you plan to use.

One good place to get an overall snapshot of all the browsers on the Web is GlobalStats, a popular tracking site. To get this information, you need to adjust another setting. This choice lets you consider not just which browsers are being used, but which versions of each browser. Optionally, change the geographic region in the Region box. The standard setting is Worldwide, which shows browser statistics culled from across the globe.

However, you can home in on a specific country like Bolivia or continent like North America. Optionally, click the text next to the Period setting to pick a different date range. Optionally, change the chart type using the option buttons that are just to the right of the chart box. Choose the Line option to see a line chart that shows the trend in browser adoption over time. Choose Bar to see a bar chart that shows a snapshot of the current situation.

Or, choose Map to see a color-coded map that shows the countries where different browsers reign supreme. For example, in Germany, Firefox is the top browser with over 40 percent of web surfers. And on the TechCrunch website a popular news site for computer nerds , old versions of Internet Explorer are a rarity. The typical pattern is this: Your page loads and runs a snippet of JavaScript code to check whether a specific feature is available.

You can then warn the user the weakest option , fall back to a slightly less impressive version of your page better , or implement a workaround that replicates the HTML5 feature you wanted to use best. Instead, you need dozens of different tests to check for dozens of different features—and sometimes even to check if a specific part of a feature is supported, which gets ugly fast.

Checking for support usually involves looking for a property on a programming object, or creating an object and trying to use it a certain way.

For example, your feature-testing code might fail on certain browsers for some obscure reason or another, or quickly become out of date. Choose a place on your computer to save the file, and click Save.

The JavaScript file has the name modernizr-latest. Now, when your page loads, the Modernizr script runs. It tests for a couple of dozen new features in mere milliseconds, and then creates a JavaScript object called modernizr that contains the results. Write some script code that tests for the feature you want and then carries out the appropriate action. Figure shows the result. This example uses basic and time-honored JavaScript techniques—looking up an element by ID and changing its content.

If you find it a bit perplexing, you can brush up with the JavaScript review in Appendix B. The full Modernizr script is a bit bulky. Click the ones that correspond to the features you need to detect. Finally, click the Generate button to create your own custom Modernizr version, and then click the Download button to save it on your computer Figure Modernizr helps you spot the holes in browser support. Basically, polyfills are a hodgepodge collection of techniques for filling the gaps in HTML5 support on aging browsers.

In HTML5, the ideal polyfill is one you can drop into a page without any extra work. It takes care of backward compatibility in a seamless, unobtrusive way, so you can work with pure HTML5 while someone else worries about the workarounds. Some rely on other technologies that may be only partly supported.

Other polyfills may have fewer features than the real HTML5 feature, or poorer performance. Occasionally, this book will point you to a potential polyfill.

But be warned—polyfills differ greatly in quality, performance, and support. You must test it and check how well it works on various old browsers before you risk incorporating the corresponding feature into your website. Skip to main content. Start your free trial. Chapter 1. Introducing HTML5. XHTML 1. Pave the Cowpaths. Note Paving the cowpaths has an obvious benefit: It uses established techniques that already have some level of browser support.

Be Practical. Character Encoding. The Language. Adding a Style Sheet. Adding JavaScript. The Final Product. Note There are still plenty of obsolete practices that browsers support but that the HTML5 standard strictly discourages. The Loosened Rules. HTML5 Validation. Figure You can fill in the address of another web page, you can upload a file of your own, or you can type the markup in directly shown here. Note Even in a perfectly valid HTML document, you may get a few harmless warnings, including that the character encoding was determined automatically and that the HTML5 validation service is considered to be an experimental, not-fully-finished feature.

The validator has discovered four errors in this document that stem from two mistakes. Incidentally, this document is still close enough to being correct that all browsers will display it properly. Added Elements. Table New HTML5 elements. Removed Elements. Adapted Elements. Bold and Italic Formatting. Tweaked Elements. Standardized Elements. Note Although really old versions of Internet Explorer—like IE 6 and IE 7—have finally disappeared from the scene, the problematic IE 8 and IE 9 still account for over 10 percent of all Web traffic at the time of this writing.

Choose the feature you want to study. Tip If you want, you can view the support tables for every feature in a group, all at once. This search for audio finds two tables. Green-shaded squares indicate browser versions that have full audio support, while red-shaded squares indicate browser versions that do not. Feature Detection with Modernizr. Or, place it in a subfolder and modify the path in the JavaScript reference accordingly.

Although this example shows the right way to test for features, it shows a less-than-ideal approach for dealing with them. Tip This example uses basic and time-honored JavaScript techniques—looking up an element by ID and changing its content.

Semantic elements for structuring a page. Semantic elements for text. Chapter 3. Chapter 4. Audio, video, and plug-ins. Chapter 5. Chapter 8.