HTML5 and CSS3 have been highly predictable by web developers and designers for some years. Although both languages are currently measured “works in progress,” some of their key features have just been made accessible for demonstrational use on the most popular browsers. For anybody acquainted with traditional CSS and HTML, the new techniques should be quite simple to implement.
HTML5 is the next generation of HTML. It has been intended to assist the search engines’ navigation and classification of a website. The main magnetism of HTML5 is its simplified, built-in video constituent. It also introduces offline storage potential for offline use of web applications and new design tools that permit easier construction of websites. HTML5 usually looks like old-fashioned HTML. However, there are a few key changes to be aware of.
- Including a doctype in HTML5 is not necessary, but some older browsers may need to have it included. Only one doctype is needed: <!DOCTYPE HTML>. This simply notifies the browser of the existence of an HTML document.
- The Canvas tag allows developers to create two-dimensional images and graphics directly within the element. This eliminates the need to use separate software for image creation.
- The Content Editable tag is a new element that will let your users edit any text that you place within the tag. This tag can be written as (ul contenteditable=true).
- The Application Cache element supports caching of web pages and apps for use offline.
- HTML5, once it is fully supported, will allow you to embed and playback audio and video without the use of any plugin. This will be extremely useful in relation to mobile devices, which are currently unable to access Flash or similar media content.
CSS3 is just a progression of the famous styles and cascade of conventional CSS. It introduces numerous new features, including new properties, selectors, and pseudo-classes. This facilitates setting up layouts rapidly and professionally. Most of the basic rules concern typography, background colors, etc.
- The @font-face feature will let you easily add custom fonts. You can do this by uploading the font file to your server, linking to a CSS file, or creating a font family.
- Use the Multiple Columns feature to divide your text into columns. You have the option to choose the number of columns, column width, column spacing, and column separators.
- The Multiple Backgrounds feature allows you to place multiple backgrounds on any element.
- With the Border Image feature, you can replace any element’s border with a specified image.
- The Box-Shadow feature provides for easy creation of inner and outer drop shadows on any element. You can specify values for color, offset, and blur.