Getting to grips with HTML basics

by Will Head on Mar 25, 2008

25 Comments

XML or HTML?

In January 2000, shortly after publishing HTML 4.01, the W3C also released a specification called XHTML 1. XHTML is basically the same as HTML 4.01, but expressed in XML (extensible markup language). XML is a general-purpose markup language and subset of SGML. XML has a much stricter syntax than HTML, making it easier for a computer to render accurately.

The main differences between HTML 4.01 and XHTML 1 are that XHTML tag names are case sensitive and must be closed with a forward slash, and all attribute values must be enclosed in quotes. So while you could write or in HTML, you must use only the lowercase in XHTML.

The tag is acceptable in HTML, but not in XHTML, as it doesn’t have a closing tag. However, in XHTML tags can be self-closing; that is, include a closing tag to show that the browser shouldn’t expect a further closing tag later in the document. To do this in XHTML, you’d write – the space in the middle is used to avoid confusing older browsers.

Attributes must be properly defined in XHTML. While HTML didn’t mind if you wrote , with XHTML you must put single or double quotes around the value, such as .

Since XHTML 1 is similar to HTML 4.01, it’s possible for a browser that doesn’t understand XML to interpret a well-formed XHTML document as if it were an HTML one. This, however, isn’t the case with the most recent XHTML 1.1, released in 2001. As you can see, W3C standards aren’t exactly coming thick and fast – the ratification process is measured.

Document type

One of the goals of HTML 4 was to clean up the mess of different implementations of previous versions by different browser manufacturers. However, this involved removing a large amount of tags that were no longer deemed necessary and would, in effect, have broken a huge number of existing web pages. The biggest change was removing tags and attributes relating to presentation (page 68).

In order to solve this problem, three document types, or doctypes, were created: strict, transitional and frameset. The doctype is declared at the beginning of the page, so the browser knows which version of HTML it’s dealing with. If the strict doctype has been used, any tags that have been deprecated – officially declared obsolete – can’t be used. The transitional doctype is more forgiving and allows the use of tags that are no longer part of the strict HTML specification. The frameset doctype is for pages that use frames, although the practice is fairly outdated now and you should avoid frames if at all possible.

The W3C recommends the strict doctype is used for any new documents you create, while transitional is used when updating existing web pages. In practice, however, transitional is used more often than it should be, when you consider the number of new web pages that should have been created in the seven years since HTML 4 was introduced.

The source code of a modern webpage, written in XHTML

WEB ACCESSABILITY
Apart from the fact that using well-formed, standards-based will save you many headaches in the future, there’s one very good reason why you should ensure your code meets current standards: accessibility.

It’s all very well if your pages look right in the browser, but if the HTML doesn’t adhere to web standards then your pages may not be usable.
For example, people who are blind or partially sighted might use a screen reader to access your site. A screen reader is an application that uses a speech synthesizer to read out what’s onscreen.

If a screen reader encounters an image, then it has to rely on the alt attribute to use for a description. If it’s missing or inaccurate, the person’s understanding of the page could be severely diminished.
Website accessibility can also fall under legal obligations if you run a business.

The Disability Discrimination Act of 1992 states:
“It is unlawful for a person who, whether for payment or not, provides goods or services, or makes facilities available, to discriminate against another person on the ground of the other person’s disability or a disability of any of that other person’s associates.”

Examples of services provided by the act include “access to information”, which covers websites. The government maintains Australian guidelines at http://webpublishing.agimo.gov.au/Accessibility_and_Equity
Further information on creating and maintaining accessible websites is found at www.w3.org/WAI.

This article appeared in the February 2008 issue of PC Authority.

Ads by Google

Comments: 25

charonis Mar 27, 2008 11:52 AM	I am vehemently against web development programs such as DreamWeaver/Frontpage/etc. If you want to make a webpage, do it the correct way by handcoding it, not by using one of these "user friendly" packages. I've seen so many websites that are obviously built with those tools it makes me cringe. What do you think about the PC Authority article Getting to grips with HTML basics? Despite the profusion of point-and-click web-design software, there’s still no excuse for not knowing HTML. Will Head walks you through the basics What do you think?
Alistor Mar 29, 2008 8:48 AM	Notepad is my ally with HTML coding :) Web dev packages are useful to some people who would have no hope learning a language, but I enjoy handcoding, because it gives you satisfaction in a job well done and you learn valuable skills.
charonis Mar 29, 2008 10:27 AM	And it gives you more power over every aspect also.
.:Cyb3rGlitch:. Mar 30, 2008 12:38 PM	I agree. Handcoding gives you more power, and ends up being easier. Especially when getting it to work in IE. >.<
charonis Mar 30, 2008 12:57 PM	ESPECIALLY IE6.... damn thing should be blown up....
.:Cyb3rGlitch:. Mar 31, 2008 11:31 PM	charonis wrote: ESPECIALLY IE6.... damn thing should be blown up.... IE should be blown up altogether. :P
charonis Apr 1, 2008 9:18 AM	Yes... yes it should :) I firmly believe that for all websites, the site should detect your browser, and if it's IE, it should redirect you to www.getfirefox.com
John Smith Apr 1, 2008 3:04 PM	If Only. My life would be a lot easier if that were to happen [-o<
tobyobi Apr 2, 2008 6:52 PM	There is nothing I hate more than Firefox zealots. It's a browser people. And it has some pretty sweet flaws. But anyway. I do my "development" in Dreamweaver. Code completion and highlighting rocks. And anyway, the design view is for chumps, hit the code button and start typing like you should. Not to mention, I get it for free anyway. People that have superiority complexes because they do things the hard way really need to look at working smarter.
Arghdee Apr 2, 2008 7:02 PM	tobyobi wrote: There is nothing I hate more than Firefox zealots. It's a browser people. And it has some pretty sweet flaws. But anyway. I do my "development" in Dreamweaver. Code completion and highlighting rocks. And anyway, the design view is for chumps, hit the code button and start typing like you should. Not to mention, I get it for free anyway. People that have superiority complexes because they do things the hard way really need to look at working smarter. Why use Firefox? Safari is FIVE TIMES FASTER! FIVE TIMES!!! Speaking of development, that's what TextEdit is for innit?
tobyobi Apr 2, 2008 7:03 PM	Arghdee wrote: Why use Firefox? Safari is FIVE TIMES FASTER! FIVE TIMES!!! Speaking of development, that's what TextEdit is for innit? BUT FIREFOX IS A WINDOWS BROWSER TOO!
chris Apr 2, 2008 9:06 PM	Arghdee wrote: Speaking of development, that's what TextEdit is for innit? duh...vim
.:Cyb3rGlitch:. Apr 3, 2008 1:50 PM	tobyobi wrote: There is nothing I hate more than Firefox zealots. It's a browser people. And it has some pretty sweet flaws. But anyway. I do my "development" in Dreamweaver. Code completion and highlighting rocks. And anyway, the design view is for chumps, hit the code button and start typing like you should. Not to mention, I get it for free anyway. People that have superiority complexes because they do things the hard way really need to look at working smarter. As a web developer, you can't NOT hate IE. :P
John Smith Apr 3, 2008 2:03 PM	IE 7 is fine, it's just people still living in the dark age using IE6, it's a piece of crap. All the others have their pros and cons. From a design and usability perspective, IE and Safari display fonts much clearer and nicer than firefox. The ultimate would be an editor with a preview mode of all browsers. One that actually works. One you can type and preview(not design in), not all the other crap dreamweaver has.
ArtMark Apr 4, 2008 5:09 PM	For bigginer and advanced Developers Dreamweaver has it all, I think that one should try Dreamweaver a bit longer ,get used to its featUres find all its features and go forward with it ,it makes your job as a developer much faster especialy working to tight scheduals,you get the job done in no time still being able to add your code and view as you go in any browser yes most browsers work with DW, once you add them in to view.Open sorce developing is good too,but you cant go past using DW. All my sites are maintained and updated using DW CS3 You can ADD CSS within DW for faster stronger websites Go forward advance faster using DW. Mark.....
.:Cyb3rGlitch:. Apr 5, 2008 12:56 PM	ArtMark wrote: For bigginer and advanced Developers Dreamweaver has it all, I think that one should try Dreamweaver a bit longer ,get used to its featUres find all its features and go forward with it ,it makes your job as a developer much faster especialy working to tight scheduals,you get the job done in no time still being able to add your code and view as you go in any browser yes most browsers work with DW, once you add them in to view.Open sorce developing is good too,but you cant go past using DW. All my sites are maintained and updated using DW CS3 You can ADD CSS within DW for faster stronger websites Go forward advance faster using DW. Mark..... I just use Notepad for my stylesheet and HTML-Kit for the XHTML/PHP. :P But hand coding the content is a pain, constant tags and gets on my nerves. But I can't afford Dreamweaver.
nix Apr 5, 2008 1:11 PM	Has anyone tried the MS "Expression" tools? I think they're quite cheap or even free, but I can't remember off the top of my head.
.:Cyb3rGlitch:. Apr 5, 2008 1:26 PM	nix wrote: Has anyone tried the MS "Expression" tools? I think they're quite cheap or even free, but I can't remember off the top of my head. I heard about that, I think they're free. I'm gonna try them out, thanks for the reminder. xD
djaef Apr 22, 2008 5:27 PM	I learnt how to hand code html back in 1999, and while I think it's a great useful skill, I think anyone who wants to hand write a web site instead of using productivity tools like Dreamweaver is living in the dark ages. Dreamweaver is quick, efficient and if you want to write code, go right ahead. Why on earth would anyone ever use Notepad???
.:Cyb3rGlitch:. Apr 23, 2008 2:20 PM	djaef wrote: I learnt how to hand code html back in 1999, and while I think it's a great useful skill, I think anyone who wants to hand write a web site instead of using productivity tools like Dreamweaver is living in the dark ages. Dreamweaver is quick, efficient and if you want to write code, go right ahead. Why on earth would anyone ever use Notepad??? I use it for CSS. And I can't afford Dreamweaver.
DeathBySlinky Apr 24, 2008 10:23 PM	Guys, I have used Notepad++ for all my coding :D It has helped me heaps. As for Dreamweaver...I can let you in on a little secret! If you want to try and get the newest version of MS Office for free, just PM me and I will tell you what you need to do. No scams or anything!! I promise! Peace Out, DeathBySlinky
.:Cyb3rGlitch:. Apr 26, 2008 6:03 PM	DeathBySlinky wrote: Guys, I have used Notepad++ for all my coding :D It has helped me heaps. As for Dreamweaver...I can let you in on a little secret! If you want to try and get the newest version of MS Office for free, just PM me and I will tell you what you need to do. No scams or anything!! I promise! Peace Out, DeathBySlinky But it's illegal, correct?
steli25 Jul 8, 2008 7:54 PM	For debugging, tools as Dreamweaver are very handy. You can use Dreamweaver free trial, which is LEGAL, but in a virtual machine (using Virtual Box or VMware ... ) all you have to do is to take a snapshot of the virtual machine before you install Dreamweaver ... you got the idea, right?
.:Cyb3rGlitch:. Jul 8, 2008 7:57 PM	steli25 wrote: For debugging, tools as Dreamweaver are very handy. You can use Dreamweaver free trial, which is LEGAL, but in a virtual machine (using Virtual Box or VMware ... ) all you have to do is to take a snapshot of the virtual machine before you install Dreamweaver ... you got the idea, right? Let me guess, the virtual machine confuses the trial clock. Am I correct? If so, that is illegal.
Jawsh Jul 9, 2008 3:28 PM	mmm what his saying is that the virtual machine wont have the registry entries from dreamweaver. so whenever you want to debug you can install a 30-day trial of dreamweaver on your 'clean' virtual machine. (EDIT: which, is probably still illegal in some way) I do agree though, Notepad is a very painful way of coding, especially if you write PHP or other languages. There are some very good freeware debugging tools out there though that do pretty things... like numbering lines, code highlighting, debugging etc etc. Dreamweaver or an equivelant app (like there are any) is the most efficient way of designing pages imo. The other fun little tool is http://www.psd2cssonline.com. If you have photoshop it will pick up all the layers in your psd image and write all the css and save all the images for you. NB: I've found it does take a little bit of post-editting to get your right. Edited by jawsh: 9/7/2008 03:28:51 PM Edited by jawsh: 9/7/2008 03:29:14 PM