Tips from W3Schools HTML Tutorial

I’ve got a bit of basic HTML knowledge, but never have the opportunity to do much coding or solve problems, so I thought I’d go through the W3C Schools Basic HTML tutorial (didn’t get any further than that yet, but CSS is next). I found some interesting things that I haven’t had much to do with, so I thought I’d list them for future reference.  These might be simple knowledge for the more experienced web people, so bear with me… Would be interested in people’s comments re what things they use a lot or other tips–or even some things that they prefer not to use and why.

One cool thing about these tutorial pages is there is a ‘try it’ feature so you can have a go at editing their code and see the results. The screen is split so you can see code as well as preview:

Bi-directional override

For scripts (languages) that are written right-to-left, the <bdo> (bi-directional override, not big day out!) tag is used. Hebrew and Arabic are two examples. According to, all major browsers support this tag.

<bdo dir=”rtl”>Here is some right-to-left text!</bdo>


The <q> tag can be used for short quotations. It inserts double quotes. I can’t figure out what the difference is between using <q> tags or simply typing the double quotes, unless it’s something that is read by software for the visually impaired. Anybody know? Have a look:

Image Height and Width Attributes

“Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).” That tip was a direct quote from

Image Map

Creating an image map:

Different Types of Lists

(under the heading ‘Further Examples’)

In particular:

Definition Lists

Nested Lists

Optgroups in forms –  labels for items in a list using the <optgroup> tag

Colour Names

Names of colours, along with hexadecimal codes—if you prefer to use words instead of codes (there are 147 supported by all browsers). This is a nifty little page—you can preview the colour as a background with examples of coloured text on the background.

Hope this might have helped others!


Post a comment or leave a trackback: Trackback URL.


  • hutingzhang  On March 21, 2012 at 3:43 am

    Hey, Julie, these tips are quite helpful, I can see that you really put your effort on it. Thanks

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: