Website design 101 – the key things you need to know about HTML, XHTML and CSS
Summer School started today, and this is the first morning of “XHTML, CSS, and Accessibility“:
Definition of HTML vs. XHTML+CSS
Historically, the prevalent way to build websites was with HTML, but an alternative way is to use XHTML and CSS. The foundation of XHTML is still HTML, but it adheres to stricter coding rules. The Internet is in a transition phase at the moment, but eventually, the old loosey-goosey HTML coding will need to be updated, by either HTML 5 or XHTML 2.0.
Another benefit of a move away from pure HTML coding allows for a separation of structure and presentation (.. the Web version of the separation of Church and State).
- HTML incorporates both structure and presentation
- XHTML strives to define document structure (XHTML is basically HTML with stricter rules)
- CSS (Cascading Style Sheets) control the visual presentation of your pages
If you’re not sure if your webpage is created in HTML or XHMTL. Follow these steps:
- Open your web page
- Menu: View
- Select “View Source” or “Source” (depending on your web browsers, it will be one of these)
- Look at the first link of code — does it say XHTML or HTML?
This is an example of html code used:
<!DOCTYPE html> <!–[if IE 7]> <html id=”ie7″ dir=”ltr” lang=”en”> <![endif]–> <!–[if (gt IE 7) | (!IE)]><!–> <html dir=”ltr” lang=”en”> <!–<![endif]–> <head>
This is an example of XHTML code used:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml” dir=”ltr” lang=”en-US”> <head>
The line of code will vary, depending of the version of HTML or XHTML the website is written with, but you should be able to easily identify which coding standards are being used.
Web Browsers Tips
- Pages don’t always look the same in different browsers, but they need to function in each of the different browsers
- Writing code in accordance with current standards lessens the chance of your page breaking in any one specific browser
