TECHZIO: 2014

Thursday, November 6, 2014

Outline of HTML 5 Semantic Structure

HTML5 has new semantic tags replacing the old conventional tags. The new semantic tags describe the content in a better way than the traditional ones with numerous advantages. Here is the pictorial representation of the major HTML5 structural tags.

HTML5 semantic elements are supported on all contemporary browsers like Chrome, Firefox, Safari etc. Let's have a look on the usage of important semantic tags.

<article>(Block) - Content such as blog post or Article.

<aside>(Block) - Content slightly related to the main content on page i.e the secondary content.

<figure>(Block) - Grouping static content like image/Video etc

<figcaption>(Text) - Use with <figure> tag to provide caption.

<footer>(Block) - Provide author information, Copyright data etc.

<header>(Block) - Include Navigation and introductory headings, logos.

<hgroup>(Block) - For grouping <H1> to <H6>

<nav>(Block) - Site level Navigation.

<mark>(Text) - To highlight or reference text.

<section>(Block) - Grouping of content with common headings (similar to chapters).

<time>(Text) - For Date/Time representation.

What are the main advantages of new semantic tags?

Maintenance of HTML page is easy as the new markups have extra information about the structure within their name itself.
Better Search Engine Optimization.

Tuesday, September 30, 2014

Comprehend the difference between Block and Inline Elements of HTML

There are three major types of HTML elements.

Structural Elements
Block Elements
Inline Elements

Structural Elements

The Structural Elements are <html>, <head> and <body> tags.

Block Level Elements

All Block elements occupy a rectangular space within the web page and the content before and after the element are separated with the help of line spacing (in other words line break) i.e they represent a separate section from the elements preceding and following them.
The block elements provide structure to a particular web page.
Examples of Block Elements: Headings, Paragraphs, Body, <table>, <div> etc.
HTML5 introduced new block elements for every sections of the web page like section, header, footer etc.
A Block element should never be inside an inline element.
Many of the block elements can be nested. A block element can contain other block elements. But the exceptions are <p> and <pre> and they can contain only inline elements and plain text.
They never overlap or overlapped by other elements.
They change the content flow.
Block elements occupy the full width available and just enough height to accommodate the content.
They have the CSS box properties.

Inline Elements

They are the elements within a line. Examples: <span>, <em>, <img>, <a> etc.
Inline elements can contain inline elements but no block elements.
Inline Elements are mostly used to format words and characters.
Inline elements take only as much space as their content requires.
They do not change the content flow.

The below HTML and Image differentiates between block and inline elements.

<h1>Block Level Element - Heading</h1>

<p>Block Level Element - Paragraph1

<span>Inline Span Element</span>
<a href="">Inline Anchor Element</a>
</p>
<p>Block Level Element - Paragraph2</p>