HTML5 Features, Tips and Techniques ( DOCTYPE and Figure Element )
Changing and taking new shapes and direction is the key feature of the IT field. IF you want to move parallel with it , you must upgrade yourself in this rapidly changing industry. If you are feeling a bit of overwhelmed with the coming changes and updates in HTML5, use this as a primer things that you must know.
Below are the 10 most features of HTML5 you must know.
1) New Doctype
The doctype for HTML5 is very simple. To indicate that your HTML content uses HTML5, simply use:
This is much simpler than the former XHTML doctypes, and shorter, making it easier to remember and reducing the amount of bytes that must be downloaded.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Browsers that do not understand this doctype will simply render the contained markup in standards mode. So, without worry, feel free to use new HTML5 doctype.
2) Figure Element
The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning. –Richard Clark
The “figure” tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. When combined with the “figcaption”element, we can now semantically associate captions with their image counterparts. Below is the example of how you can use “figure” and “figcaption” tag.
<figure> <img src="../image to path" alt="Image Blog" /> <figcaption> <p>This is blog image caption</p> </figcaption> </figure>