Tuesday, 29 January 2013

HTML&CSS

I have hand-coded HTML&CSS for a couple of years. While I was reading the book HTML&CSS, the detailed explanation reminded me something that I thought it was not important should be taken seriously if I would like to be a professional designer. The thing that needs to be concerned about is accessibility. Combining with HTML5&CSS3 and the code I easily forgot, here it is.

(Surely there are much more.)

HTML5 structure
<header><nav>
<section><article><aside><hgroup>
<footer>
The <aside> content could be placed as a sidebar in an article or the entire page. The <article> element can be nested. The <section> element groups related content together, and typically each section would have its own heading.

To help older browsers understand HTML5:
header, section, footer, aside, nav, article, figure, figcaption {display: block;}
<!--[if lt IE 9]>
<script  src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

LINK
  • Inform users that the link will open a new window before they click on it.
  • :hover do not work on touch screen.
  • The <a> element can be placed around a block level element that contain child elements. (HTML5)

IMAGE
<figure> <img src="image.jpg" alt="describes the image if you cannot see it" title="provides 
additional information about the image" /> <br />
  <figcaption>a caption of the image</figcaption>
</figure>
(HTML5)
  • The <figure> tag specifies self-contained content, can be applied to images, videos, diagrams and code samples.
  • Specify the size of the image via CSS, so the browser can leave the space and render the rest of the content on the page.
  • Another source: Five kinds of 'alt' text.

TABLE
<th>,<td>
<thead>,<tbody>,<tfoot>

FORM
<form><fieldset><legend>caption</legend>form controls</fieldset></form>

Text input (type, name)
<label>Username:<input type="text" name="username" maxlength="30" /></label>

Radio button (type, name, value)
<input id="female" type="radio" name="gender" value="f" checked="checked">
<label for="female">Female</label>
<input id="male" type="radio" name="gender" value="m">
<label for="male">Male</label>

<label> is the expanded clickable area, indicating the purpose of each form control, and makes the form accessible.

Form validation
required
(HTML5)

Date input / Email&URL input / Search Input (type, name) (HTML5)
<input type="date" />
<input type="email" /><input type="url" />
<input type="search" placeholder="Enter keyword" />

Comments in HTML
<div id="main">
</div>
<!— end of main —>

iframe
<iframe seamless>
<iframe> (HTML5)
<iframe scrolling="no" frameborder="0"></iframe>

Video
  • Combining HTML5 <video> and Flash Video formats to ensure the video can be viewed by the majority of users, if it is not uploaded on hosted video sites. (HTML5)
  • HTML5 code including text alternative is placed under <body>, while Flash video is under <head>.
  • HTML5 video formats: H264, WebM (H264 for IE and Safari; WebM for Android, Chrome, Firefox, Opera)
  • Flash video formats: H264 or FLV (need a player written in Flash to play the file)

CSS
  • Universal Selector * {}
  • Direct Child Selector li>a {}
  • Descendant Selector p a {} 

Color Opacity CSS3
  • opacity: 0.0~1.0 (the opacity of the element and its child elements)
  • rgba(r,g,b,0.0~1.0) (specify the opacity of itself, but not child elements)

For older browsers, offer two rules to the same element, a RGB and a RGBA.

Colour Contrast Check Tool

Source: HTML & CSS
Labels: