Posts from the ‘HTML5’ Category
August 9, 2017
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.
- 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.
- 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.
- 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.
- 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.
- HTML Wrapper – The HTML Wrapper extension for Brackets provides a great shortcut for surrounding plain text with list item tags, anchor tags, and more.
- CanIUse – The CanIUse plugin provides a quick-access panel in Brackets where you can search for information about browser compatibility on the CanIUse website.
November 9, 2015
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 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
June 21, 2012
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
- Video for Everybody!
- HTML5 Video by HTML5 Rocks
- Add HTML5 Video to Your Site
- Embed Videos In Your Web Pages Using HTML5
- HTML5 Audio and Video: What you Must Know
- Dive Into HTML5 – Video on the Web
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.
February 12, 2012
- Making a Beautiful HTML5 Portfolio — Tutorialzine
- Coding a CSS3 & HTML5 One-Page Website Template — Tutorialzine
- Create a Stylish Contact Form with HTML5 & CSS3 — Line25, Chris Spooner
- Create a Grid Based Web Design in HTML5 & CSS3 — Line25, Chris Spooner
- HTML5 & CSS3 envelope contact form — Catalin Rosu
- How to create a Progress bar with HTML5 Canvas — Stryker
- Rethinking Forms in HTML5 — by John Cox
- Lights Off – A puzzle game using HTML5 canvas — by Marco Kuiper
- How to Build Cross-Browser HTML5 Forms — by Cristian Colceriu
- Building a live news blogging system — Bogdan Pop
- Coding An HTML 5 Layout From Scratch — Enrique Ramirez
- Coding Up a Web Design Concept into HTML & CSS — Line25, Chris Spooner
- HTML5 & CSS3 coding snippets from WebInterfaceLab
- Designing Modern Web Forms with HTML 5 and CSS3 by Legend Themes