HTML5 | Vivekanand S Rao

Essential Extensions for Brackets

August 9, 2017

Vivek

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

November 9, 2015

Vivek

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

HTML5 Outliner – Google Chrome Extension
HTML 5 Outliner – An Online Tool
HeadingsMap – A Firefox Addon

Embedding HTML5 Video — Tools & Tutorials

June 21, 2012

Vivek

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

HTML5 Video Players

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.