HTML 5 and CSS 3: Techniques You’ll Soon Be Using

HTML 5 introduces a bunch of techniques that can make our web pages extra semantic. This can make it so much simpler for search engines like google and yahoo to navigate our pages, and enhance the expertise for everybody. HTML 5 will even embrace fancy APIs for drawing graphics, storing knowledge offline, dragging and dropping, and much more.

Before we start marking up the web page we should always get the general construction straight:

Diagram of basic structure

In HTML 5 there are particular tags meant for marking up the header, navigation, sidebar and footer. First, check out the markup and I will clarify afterwards:

It nonetheless seems to be like HTML markup, however there are some things to notice:

  • In HTML 5, there is just one doctype. It’s declared at first of the web page by <!doctype html>. It merely tells the browser that it is coping with an HTML-document.
  • The brand new tag header is wrapped round introductory components, such because the web page title or a brand. It may additionally comprise a desk of contents or a search kind. Each header sometimes accommodates a heading tag from <h1> to <h6>. On this case the header is used to introduce the entire web page, however we’ll use it to introduce a piece of the web page somewhat later.
  • The nav-tag is used to comprise navigational components, comparable to the primary navigation on a website or extra specialised navigation like subsequent/previous-links.
  • The section-tag is used to indicate a piece within the doc. It may well comprise all types of markup and a number of sections could be nested inside one another.
  • apart is used to wrap round content material associated to the primary content material of the web page that might nonetheless stand on it is personal and make sense. On this case we’re utilizing it for the sidebar.
  • The footer-tag ought to comprise extra details about the primary content material, comparable to information about who wrote it, copyright data, hyperlinks to associated paperwork and so forth.

As a substitute of utilizing divs to comprise completely different sections of the web page we at the moment are utilizing acceptable, semantic tags. They’ll make it so much simpler for search engines like google and yahoo and display readers to determine what’s what in a web page.

The navigation is marked up precisely like we might do it in HTML four or XHTML, utilizing an unordered record. The secret is that this record is positioned contained in the nav-tags.

We’ve already outlined a brand new part within the doc utilizing the part tag. Now we simply want some content material.

We add an id to the part tag so we will determine it later when styling. We use the header tag to wrap across the introductory h2 ingredient. Along with describing an entire doc, the header-tag also needs to be used to explain particular person sections.

Our predominant content material space consists of three sections: the weblog publish, the feedback and the remark kind. Utilizing our data concerning the new structural tags in HTML 5, it ought to be simple to mark it up.

Undergo the markup and I will clarify the brand new components afterwards.

We begin a brand new part and wrap the entire weblog publish in an article-tag. The article tag is used to indicate an impartial entry in a weblog, dialogue, encyclopedia, and so forth. and is good to make use of right here. Since we’re viewing the small print of a single publish we solely have one article, however on the entrance web page of the weblog we might wrap every publish in an article-tag.

The header ingredient is used to current the header and metadata concerning the weblog publish. We inform the person when the publish was written, who wrote it and what number of feedback it has. Be aware that the timestamp is wrapped in a -tag. This tag can be new to HTML 5 and is used to mark up a selected place in time. The contents of the datetime attribute ought to be:

Diagram describing use of the datetime HTML attribute
  1. The 12 months adopted by a determine sprint (a minus signal to you non-typography nerds)
  2. The month adopted by a determine sprint
  3. The date
  4. A capital T to indicate that we’re going to specify the native time
  5. The native time within the format hh:mm:ss
  6. The time zone relative to GMT. I am in Denmark which is 1 hour after GMT, so I write +01. Should you have been in Colorado you’d be 7 hours behind GMT, and you’d write -07.

Marking up the feedback is fairly straight-forward. No new tags or attributes are used.

A number of enhancements to varieties have been launched in HTML 5. You longer must do client-side validation of required fields, emails, and so forth. The browser takes care of this for you.

There are new two new kinds of inputs, e-mail and url. E mail specifies that the person ought to enter a sound E-mail, and url that the person ought to enter a sound web site tackle. Should you write required as an attribute, the person can’t submit an empty area. “Required” is a boolean attribute, new to HTML 5. It simply signifies that the attribute is to be declared with out a worth.

The markup of the sidebar and footer is very simple. A number of sections with some content material inside the suitable aside- and footer-tags.

You may view the ultimate, unstyled markup here. Now for the styling.


[WooZoneProducts asin=”1119235596″][/WooZoneProducts]