Review

HTML and CSS

This is a nice for beginner who don’t have technical background. It is easier to understand and illustrations are beautiful.

It gives a brief overview on how web site work in the beginning. And then explain the HTML tag one by one. It also explain the subtle different between similar HTML tags and attributes.

padding-start vs padding-left

I found the default style of ol and ul in Chrome have a interesting property -webkit-padding-start: 40px;. I am wondering how is it different form padding-left: 40px. According to this, they are the same for the language written from left to right. If the language is written from right to left, the padding of -webkit-padding-start: 40px; will move to right.

Note that dt is using margin instead of padding, because it does not need to put any bullet point into the component.

Image’s alt attribute vs title

alt stands for alternative, which should be description of the image, because it will be shown when the image does not load. title provides extra information of the image. For more detail, we can read this

width and height in image tag vs in CSS

According to this, if the image is part of the content, we should use width and height attribute in image tag. The rule of thumb is, HTML defined the contents and CSS define the layout. For example, the background image’s size should be defined by CSS, because it is for layout and decoration.

align in image tag is deprecated in HTML 5

Which should be replace by align in CSS.
PS: image is display: inline-block; by default.

figure is a component of image with caption

The html structure likes:

1
2
3
4
5
<figure>
  <img src="images/otters.jpg" alt="Photograph of two sea otters floating in water">
  <br />
  <figcaption>Sea otters hold hands when they sleep so they don't drift away from each other.</figcaption>
</figure>

Notices that figcaption is HTML 5 element, which will be ignored by old browsers.
To have better compatibility, we can have

1
2
3
<p>
  <figcaption>Sea otters hold hands when they sleep so they don't drift away from each other.</figcaption>
</p>

thead, tbody and tfoot

We can use these when the first and last rows content different content. Browser can make table header and footer sticky when the screen cannot fit the screen. It is also useful in print version when the table cannot be shown in one page.

Deprecated attribute of table and form in HTML 5

width, border and background are deprecated in HTML 5 table. size in HTML 5 form’s input is deprecated, but notice maxlength is not.
Notice that size in select element is not deprecated. It is used to define the number of item shown in multiple select.

Input type

There is a list of input type in form

  • text
  • password
  • radio
  • checkbox
  • file
  • submit
    • The name attribute is not necessary, the text on button is defined by the value attribute.
  • image
  • hidden
    The following is new type introduced in the HTML 5
  • date
  • email
  • url
  • search

Label in form

The label is used to connect text description with the form input. There are two cases:

  • Wrap the input tag and text description in label.
  • input tag and the description are separated. The value of for attribute in label is same as id of the corresponding input.

The book also recommend where to put the text description:
Above or to the left of input:

  • Text inputs
  • Text areas
  • Select boxes
  • File uploads
    To the right of input:
  • Individual checkboxes
  • Individual radio buttons

fieldset and legend

fieldset can group the inputs and the legend is the description of fieldset.

div vs span

div and span group elements into a block or inline element.

Doctype

It defines which version of HTML is using, it may affect how the page is rendered.

Browser’s bug

Bug is unavoidable in software, no exception in browsers. The bugs in browser is also called browser quirk. Such as the video bug on ipad, the mp4 video url may be put before other’s video url.

CSS3 color support

CSS3 support opacity, so we can have RGBa. A new color code HSL is supported, also HSLa.

Tips about reserved background

If text has a light color on a dark background), you can increase the height between lines and the weight of the font to make it easier to read.

Brightness vs lightness

Brightness only adds black, whereas lightness offers both white and black.

serif, sans serif, monospace, cursive and fantasy

Use serif for long text,it is easier to read. Sans serif is clearer to read, better for small text. Use monospace for code, easier to align.
Cursive fonts look like handwriting. Also Fantasy font is for decoration.

italic vs oblique

Italic have cursive aspect (a new font), oblique just put font at a angle.

Text transform

There are CSS to transform text to uppercase, lowercase, or make the first character capitalize

line height

When line height is larger than the font size, there is a gap above the text. The gap is named ‘leading’. In other words, line height - font size = leading.

letter spacing and word spacing

There are CSS to control the spacing between letters and words. These are style seems does not work well in Chinese or other language using block characters.

vertical align

vertical align should be the most commonly misunderstood style. It is not intended to allow you to vertically align text in the middle of block level elements (but this works in table cells, such as td and th). It replaces the depreciated align HTML attribute. It is used in inline elements.

text-indent

It is used in a trick to hide the text which is only available for screen reader and SEO. But in Bootstrap 3, there is a better trick with better performance.

Pseudo-elements

  • :first-letter and :first-line: select first letter or line in text.
  • :link and :visited: select not visited and visited <a> link.
  • :active: select element is being activated by a user.
    • pressed button
    • clicked link.
  • :focus: elements that can be interacted with have focus state.
    • from input with cursor in it
    • It is also possible to use tab key to focus
  • When pseduo classes are used, they should appear in this order:
    1. :link
    2. :visited
    3. :hover
    4. :focus
    5. :active

Shadow in CSS3

box-shadow and text-shadow are new style in CSS3.

HTML5 layout

Namespace

We can use a div with id as namespace, such as

1
2
3
4
<body>
  <div id="page">
  </div>
</body>

These tag can be used as header or footer of the page, beside these, every section and article can have their own headers and footers.

article

It can be used to hold individual article or blog entry, a comment or forum post, or any other independent piece of content.
Notice article can be nested inside each other, comments of comments is one of the use case.

aside

aside tag have 2 usage.

  • If it is inside article, it should contain information that is related to the article.
  • If it is outside article, it should contain information related to the entire page.

section

section group related content together, usually with their own heading. It may contains several article inside. section can also be used in article tag, if the article is long and you want to split it into separate sections.

hgroup

hgroup stand for header group. For example, you can use hgroup to group a title in h2 and a subtitle in h3 together.

figure

figure can be used not only in images, the examples of usage include:

  • images
  • videos
  • graphs
  • diagrams
  • code samples
  • text that supports the main body of an article

a

Before HTML5, putting block element inside a tag is considered incorrect. But in HTML5, place a element around a block level element that contains child elements is allowed.

Compatibility

Older browsers which do not support HTML5 element treat them as inline element. To support HTML5 in old browsers, we need HTML5 shiv (HTML5 shim)