HTML5 was developed as a collaboration between the Web Hypertext Application Technology Working Group and the World Wide Web Consortium and refers to the most recent significant change to HTML standards, which provides programmers with a standard for presenting and structuring content online. A web developer bootcamp is likely to help you learn HTML and HTML5, but you can also start to get a basic understanding with this quick overview.
HTML 5 Support Across Browsers
There is full support for HTML5 on most browsers, including those that are preinstalled on mobile devices as well as Safari, Chrome, Google, Opera and Firefox.
Elements and Attributes Introduced with HTML5
When HTML5 coding was first introduced, it brought new attributes and elements with it, enhancing the ways in which developers can build websites.
Drag and Drop
Includes the ability to easily move items on a webpage to another location on the same page.
Embedding Audio and Video
Allows developers to easily embed video and audio into websites without having to use a third-party plugin.
Improves forms to include more attributes in the <input> tag.
Allows visitors to opt into sharing their location with web applications coded using HTML5.
Allows programmers to create vocabularies to add onto HTML5, including custom semantics.
Persistent Local Storage
Makes it possible to use store values in the browser, which was previously only possible with third-party plugins.
Now includes <section>, <header> and <footer>.
Flow to web browsers from the web servers.
Facilitates bidirectional communication that works with web applications.
New Tags Introduced for HTML5
In addition to the new features introduced in HTML5, this system also provides more tags, which help developers structure their webpages in the exact way they want.
Shows independent content within a document, such as a newspaper article or blog entry.
Used for content that only slightly relates to the other parts of the page.
Used for marking conversations.
Connects the caption with the video, graphic or other embedded content it describes.
Designates section footers, where you may find information related to copyright or the author, among other details.
Indicates section headers.
Marks the portions of the document that are there for navigational purposes.
Indicates generic application or document sections and can be combined with h1 to h6 to help with document structure.
HTML5 Is Backward Compatible
The team behind HTML5 specifically designed it to maximize backward compatibility with all existing web browsers. The new updated features build on the previous ones that most people start using when they learn HTML, further maximizing their compatibility.
This backward compatibility also means that the skills picked up even at the most basic HTML web developer bootcamp will not go to waste.
Exploring Syntax of HTML5
Compared with some previous versions of HTML code language, the syntax for HTML5 is much more flexible. Some of the most important differences that provide flexibility include:
- Allowing for uppercase or lowercase name tags.
- Not requiring quotes for attributes.
- Not requiring values for attributes.
- Not requiring closing all empty elements.
Important Syntax Coding
Developers using HTML5 should be aware of the following simple syntax:
- <!DOCTYPE html> for DOCTYPE, which is case-insensitive.
- <meta charset = “UTF-8”> for character encoding.
- <script src = “scriptfile.js”></script> for <script> tags.
- <link rel = “stylesheet” href = “stylefile.css”> for links.
Elements feature start tags in the beginning and end tags in the end. These feature angle brackets with a slash before the name in the end tag. As an example, the paragraph element would appear as <p>…</p> where “…” is the paragraph content.
Most elements in HTML5 place content in between the start and end tags, but some are void elements, such as meta, link, hr and br.
Exploring Attributes in HTML5
Various elements can contain attributes, which set the element’s properties. As you learn HTML, you will notice that some of these have global definition, which means you can easily use them across all elements. Other attributes only have definitions for particular elements. Keep in mind, attributes only appear in start tags with HTML5. They are not case-sensitive, although most developers prefer to use lowercase characters.
The following list shows the attributes that should be supported by most HTML5 tags, as well as their functions. The options for each attribute appear in parenthesis.
- accesskey: Indicates keyboard shortcuts for accessing elements (defined by the user).
- align: Aligns tags horizontally (center, left, right).
- background: Places the background image behind the element (URL).
- bgcolor: Puts the background color behind the element (RGB, hexadecimal, numeric values).
- class: Classifies elements in Cascading Style Sheets (defined by the user).
- contenteditable: Indicates if users can edit the content of the element (true, false).
- contextmenu: Indicates an element’s context menu (menu ID).
- data-XXXX: Custom attributes (defined by the user).
- draggable: Indicates if users can drag the element (true, false, auto).
- height: Indicates the height of table cells, tables or images (numeric value).
- hidden: Indicates if an element is visible (hidden).
- id: Names elements for Cascading Style Sheets (defined by the user).
- item: For grouping elements (list of elements).
- itemprop: For grouping items (list of items).
- spellcheck: Indicates if the element needs grammar or spelling checked (true, false).
- style: Indicates inline style for elements (CSS).
- subject: Indicates items corresponding to elements (user-defined ID).
- tabindex: Indicates an element’s tab order (tab number).
- title: A “pop-up” title for elements (defined by the user).
- valign: Aligns tags vertically (top, bottom, middle).
- width: Indicates the width of tables, table cells and images (numeric value).
The custom attributes are an important new feature for HTML5. You can name these depending on your requirements using your current HTML skills. These attributes always start with “data-”.
Exploring Events in HTML5
Exploring Web Forms 2.0 in HTML5
Another significant update offered by HTML5 is the addition to the <input> elements in Web Forms 2.0.
The following input elements were added in HTML5:
HTML5 also introduces the <output> element, which shows the result of various output types, including when written by scripts. The “for” attribute can specify relationships between this output element and the other elements affected by the calculation.
There is also a new “placeholder” attribute in HTML5 that lets users know what they can enter in the relevant field.
This tutorial serves as a brief introduction to HTML5, however there is much more to learn before you can use it to its full capabilities. If you’re interested in learning more about HTML5, consider enrolling in a web developer bootcamp.