Web developer

Archive for May, 2013

Series – 4 New tags

HTML 5 – As I Learn

Series – 4

New tags

<section> This is to be used to split different topics or areas of a document or webpage. Like intro section, objective section, news section, press releases section, etc.  It is expected to come with a heading and content.

<nav> Navigation links to other pages or within the page are to be placed in this. Usually the main navigation or page menus appear in this. Nav tag is mostly seen in the header section and footer section of the page.

<article> This is the main container of textual information. Contents can be excerpts of documents, forum posts, comments, etc.

<aside> This tag is to be used for displaying highlight of the main content. Highlighted quotes, advertisements or content tag clouds. It appears on the sidebar or as a block within the article aligned to the left or right border.

<hgroup> This represents a heading group (this is not horizontal group). Header elements H1 to H6 appear within this. Headings, subheading, important quotes appear as a group in this tag.

<header> The header element is used to display a table of contents, a search form, or any relevant logos. Generally the top part of the page content comes inside this element, including the site title, main navigation, etc.

<footer> The footer element is generally at the bottom of the page content or at the bottom of a section. Generally contains, links to previous or next article or posts, license information, author, or even the comments form in a post.

<time> The time element represents either a time on a 24-hour clock or a precise date in the proleptic Gregorian calendar. It also shows time zone optionally.

<mark> The mark element highlighted content for reference purposes.

There are other tags as well that have come in – especially video, canvas, etc, – I plan to have separate posts for them.

Advertisements

Series – 3 Links

HTML 5 – As I Learn

Series – 3

Links

Links are generally used for connecting an external stylesheet to the web page or adding a favicon.

Mostly we use the stylesheet


<link rel="stylesheet" href="style.css" type="text/css" />

In HTML5 the type attribute is no longer required (it is upto the developer to have it or not because the only form of style information for HTML5 has to be CSS)

There is another attribute with link for stylesheet “media” – takes – Braille, handheld,  projection, print, screen, aural, all, others,

I guess there is no need to explain that.

For a favicon –


<link rel="icon" href="http://example.com/myicon.ico" />

If you are using some png image as your icon – you may have to write a little more –


<link rel="icon" type="image/png" href="http://example.com/image.png" />

But is that all link does?

Looking at the link tag, it is the rel attribute that differentiates between a stylesheet and a favicon. So what else can rel hold?

What came up is very interesting ——–

Rel supports the following – (this list is not complete, visit http://www.w3.org/TR/html5/links.html#linkTypes for more info)

Alternate – link to an alternate source.

Author – information of author at a different location

Help – location of help files

Icon – favicon

License – link license related information about the current document

Next – link to the next page, when the current page is part of a series

Prev – link to the previous page

Start – the first page of the series

Index – the index of content of the series.

Prefetch – used to prefetch some page or image mentioned in link.

Search – link to a resource that can be used to search through the current document

Most of these go into the head section and are not visible in the browsers.

There are some browser and plugin with them that can be used to navigate or display the information through the link tag. I am informed that Google Reader uses these link tags for page navigation and other information.

The attribute rel can be used with <a> anchor tags – check for bookmark, noreferrer, sidebar etc.

Series – 2 HTML, HEAD, BODY

HTML 5 – As I Learn

Series – 2

HTML, HEAD, BODY

My first look at HTML 5, the basic elements or tags – HTML, HEAD and BODY


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>HTML5</title>

</head>

<body>

...

</body>

</html>

Looks rather slim and trim. So lets compare the same for the previous version –


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>HTML 4</title>

</head>

<body>

…

</body>

</html>

Wow! That means lot less to write. The declaration in the DOCTYPE tag are gone, only have to mention the type of document, which is html.

In the HTML tag no need to mention the xmlns attribute (namespace).

The META tag under HEAD tag also requires less – just the charset attribute for character set declaration. No need to mention the content is of type text/html – it is already mentioned in the DOCTYPE.

Now I questioned myself – what about language? Previously the language was mentioned in the DOCTYPEEN”. What happens in HTML 5?

A little search resulted in –


<!DOCTYPE html>

<html lang="en">

So in HTML5 we have to mention the language as an attribute (lang) to the HTML tag. The two letter language code is written in small.

Series – 1 Objective of this series

HTML 5 – As I Learn

Series – 1

Objective of this series

I have been listening to people saying that HTML 4 is replaced by HTML 5 and it’s a killer. Heard that it is about to kill Adobe Flash and Flex. Being a UI developer and an ActionScript developer at that, HTML 5 stood as a competing UI language. Hence, let me see what’s in HTML 5 and how good a killer is it.

From my previous knowledge of HTML, I gathered, learning HTML 5 will require a good understanding of

What is new in HTML 5?

How to use each new thing that came with HTML 5?

What old HTML things cannot be used any more?

and most importantly

What type of browser in-compatibility issues, may come up and how to manage them?

So, read some online tutorials, articles, code samples and got a lot confused. Therefore, the main objective of this series is to bring together all that I learn and in a manner that I can reference, at the time of actual development work.