Learn About HTML5

HTML Class San Francisco

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
  • email
  • 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

The following requires your attention:
Back
Back
Back
Back
Back
Back
Back
Back
Back
Back
0%

Ready to learn more about Berkeley CodingBoot Camp in San Francisco? Contact an admissions advisor at (510) 306-1218.