Live Chat
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.
Canvas
Lets you program a two-dimensional drawing surface using JavaScript.
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.
Forms 2.0
Improves forms to include more attributes in the <input> tag.
Geolocation
Allows visitors to opt into sharing their location with web applications coded using HTML5.
Microdata
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.
Semantic Elements
Now includes <section>, <header> and <footer>.
Server-Sent Events
Flow to web browsers from the web servers.
Web Socket
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.
Article
Shows independent content within a document, such as a newspaper article or blog entry.
Aside
Used for content that only slightly relates to the other parts of the page.
Dialog
Used for marking conversations.
Figure
Connects the caption with the video, graphic or other embedded content it describes.
Footer
Designates section footers, where you may find information related to copyright or the author, among other details.
Header
Indicates section headers.
Nav
Marks the portions of the document that are there for navigational purposes.
Section
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
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).
Custom Attributes
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
JavaScript uses the term “events” to refer to actions that website visitors perform, like clicking links, images and text or hovering over defined elements.
There are several choices for handling these events: specify event handlers in the event tag attributes as values with HTML5, or write them using VBscript or JavaScript.
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.
HTML4 featured:
- text
- password
- checkbox
- radio
- submit
- file
- image
- hidden
- textarea
- button
The following input elements were added in HTML5:
- datetime
- datetime-local
- date
- month
- week
- time
- number
- range
- url
Output
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.
Placeholder
There is also a new “placeholder” attribute in HTML5 that lets users know what they can enter in the relevant field.
Conclusion
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.
*Please note, these articles are for educational purposes and the topics covered may not be representative of the curriculum covered in our boot camp. Explore our curriculum to see what you’ll learn in our program.
Get Program Info
Ready to learn more about Berkeley CodingBoot Camp in San Francisco? Contact an admissions advisor at (510) 306-1218.