Category: HTML5

Essential Extensions for Brackets

Brackets has an extensive array of extensions for enhancing your front-end development workflow.

  • Emmet – The Emmet extension for Brackets, if you take the time to learn it, provides wonderful shorthand snippets for quickly coding in HTML and CSS.
    1. Emmet Plugin
    2. Emmet — the essential toolkit for web-developers
  • Indent Guides – The Indent Guides extension for Brackets adds helpful guides to your code, making it easier to see where one section ends and another begins.
    1. A Brackets extension to show indent guides in the code editor
  • Beautify – The Beautify extension for Brackets does exactly what its name implies. It takes sloppy, unformatted markup and makes it look beautiful by adding spacing and indents that to make it easier to read.
    1. Brackets Beautify 2.x
  • Autoprefixer – The Autoprefixer extension for Brackets parses through your CSS code and adds vendor prefixes to your styles to make it as browser-friendly as possible.
    1. Brackets Autoprefixer
  • Lorem Pixel
    1. Brackets Lorem Pixel
  • CDN Suggestions – Using a Content Delivery Network is a great way to link to commonly used libraries like jQuery and Bootstrap. CDN Suggestions is a plugin that will give you quick access to all of the most popular CDN links available.
    1. CDN Suggestions
  • HTML Wrapper – The HTML Wrapper extension for Brackets provides a great shortcut for surrounding plain text with list item tags, anchor tags, and more.
    1. HTML Wrapper Extension
  • CanIUse – The CanIUse plugin provides a quick-access panel in Brackets where you can search for information about browser compatibility on the CanIUse website.
    1. CanIUse Extension

HTML5: Structure, Syntax, and Semantics

Semantics – The process of adding meaning through language.

Web Semantics – Web semantics is the process of using web languages and syntaxes to add meaning to content. Web semantics allow us to control the organization and display of our content.

Although each site is unique, most pages contain commonly recognized page elements such as navigation, search capability, branding region, footer and main content. By using consistent semantic markup to identify these common elements, we make it easy for user agents to identify and properly present those elements to viewers. This may seem trivial, but in some cases, such as with assistive technology, identifying content semantically is critical to ensuring functionality and providing easy access to page content.

A content which is semantically marked up gets indexed easily by automated services like search engines thereby making it easier for users to find and access content. Simply put, it make the content more relevant.

It’s an incredibly an important part of the modern web and can have a huge impact on the effectiveness of the website.

HTML5 and Semantics

  • Improving semantics was a specific focus of HTML5
  • New semantic elements expand markup capabilities
  • New document outline rules enhance document structure
  • New content models give context for when certain

HTML5 Specification

HTML5 Content Models

  • Metadata content
  • Flow content
  • Sectioning content
  • Heading content
  • Phrasing content
  • Embedded content
  • Interactive content

HTML5 Document Structure – A series of sections and subsections that can be visualized as a document outline. A solid document structure not only makes the content easier to read, it also makes it easier for search engines, screen readers, and other user agents to navigate and find relevant information.

HTML5 Sectioning Elements – article, aside, nav and section.

HTML5 Semantic Grouping Elements – footer, header and main.

Checking Document Structure

Embedding HTML5 Video — Tools & Tutorials

One of the most exciting features of HTML5 is the ability to embed audio and video files without the need of the Flash plugin. This post provides links to some useful articles, tutorials and resources that will help embed video and audio content on websites using HTML5.

HTML5 Video Tutorials & Articles

  1. Video for Everybody!
  2. HTML5 Video by HTML5 Rocks
  3. Add HTML5 Video to Your Site
  4. Embed Videos In Your Web Pages Using HTML5
  5. HTML5 Audio and Video: What you Must Know
  6. Dive Into HTML5 – Video on the Web

HTML5 Video Players

  1. SublimeVideo
  2. Video.js
  3. MediaElement.js
  4. Projekktor
  5. HTML5Media

Lastly, If all this HTML5 video embed coding looks complicated, there’s this option of using one of the many video hosting websites – The two popular ones being YouTube and Vimeo. Both these websites not only allow HD video embedding with their custom players, but all the hassle of hosting and serving the video file is covered.

Roundup of HTML5 Tutorials

HTML5 Resources

A one stop place which aggregates links to tutorials, tools, documentation, references, community and books on HTML5

  1. HTML5 Rocks — aggregates information on HTML5 and the latest web technologies and standards.

HTML5 Editors

1) Aptana Studio 3
Aptana Studio 3 is an open source web development tool. Has support for the latest browser technology specs such as HTML5, CSS3, JavaScript, Ruby, Rails, PHP and Python.

Core Features of Aptana Studio 3

  1. HTML, CSS, and JavaScript Code Assist
  2. GIT Integration
  3. Integrated Debugger
  4. Built-in command line terminal for execution of operating system commands and language utilities

2) Aloha Editor — Learn More About Aloha Editor

3) Rendara — Makes learning HTML5 and CSS3 easy! Web Developers can try out some Javascript and experiment with jQuery, jQuery Tools and jQuery UI libraries. Try Rendara

4) BlueGriffon is a new WYSIWYG HTML5 editor. Powered by Gecko, the rendering engine of Firefox 4, BlueGriffon is a modern and robust solution to edit Web pages in conformance to the latest Web Standards. Because Gecko lives inside BlueGriffon, the document you edit will look exactly the same in Firefox 4. It’s free to download and is available on Windows, Mac OS X and Linux.

5) Mercury is a full featured HTML5 editor. Supports all browsers that have implemented the complete W3C contentEditable specification i.e., Firefox 4+, Chrome 10+, Safari 5+. Learn More about Mercury Editor