Introduction to HTML and XHTML

Web Design – Introduction to HTML and XHTML
Last updated Sep 23, 2005.
HTML Files, Elements and Tags, and Document Structure


The Web Design guide provides a background on SGML, HTML, XHTML, and XML; it even includes a quick and dirty intro to XHTML. While all that is nice, some shouts of “Start at the beginning!” echo as someone, somewhere is new to markup languages.
Many excellent tutorials introduce the basics of HTML; however, they often teach deprecated markup. Deprecated means “obsolete,” but browsers still understand them—the concept is similar to backward compatibility. Bold is a common deprecated element. Instead of , standards recommend using cascading style sheets (CSS) for adding heavy emphasis on text because bold is presentational. But, let’s slow down before we stray off topic.

This tutorial shows the recommended way to do markup while using XHTML. HTML and XHTML are similar, but XHTML has stricter rules.

For example, with paragraph ( ), HTML isn’t picky about whether or not you include the closing whereas XHTML demands to see it. HTML is not case sensitive, which means it doesn’t matter if you use or . However, XHTML requires everything to be in lower case. So all tags use lower case.


HTML Files

HTML stands for HyperText Markup Language. At its most basic, a Web page is an HTML file (those of you shouting out there with PHP, ASP, or ColdFusion pages—bear with me—we’re talking HTML today) with markup tags. These tags give the browser direction on how to display the page and its content. An HTML file uses the .htm or .html extension.


 To create an HTML page, all you need is a text editor like Notepad, WordPad, or SimpleText for those on a Mac. You can find other freeware or general public license (GPL or GNU GPL) text editors on the Internet by doing a search for “free text editors.” GPL, or GNU GPL, is free license software, which is also known as open source software. You can find many of these at Sourceforge.


 If you have a WYSIWYG (What You See Is What You Get) editor—an application that displays the contents of a page almost exactly as you would see it in a browser or on a printout—such as FrontPage, Dreamweaver, or GoLive, I recommend starting with a text editor anyway. It’s an excellent learning tool and it helps you in working with these WYSIWYG applications.
What about Microsoft Word? Well, you can use it as long as you save each file as text. Microsoft Word has the ability to enter its own code, which tends to cause problems in an HTML file. Fire up your text editor, save a new file as example.html—you can name the file whatever you’d like as long as it ends with .htm or .html—and enter the examples we cover in this article. Save often. Some text editors might add .txt at the end of the file name. If this happens, you can rename the file to remove it by right-clicking on the file, selecting rename, and removing .txt.


 Since you already have a browser (as that’s how you’re viewing this page), your computer most likely knows what to do when you double-click on an .htm or .html file, which is to open it in your browser. Alternatively, you can open your browser, select File > Open File, browse the file window until you find your file, select the file, and click Open.


 You can also open an .htm or .html file in your text editor by locating the file through the File > Open command or right-clicking on the file name, selecting Open With…, and choosing NotePad. If you do not see Open With, click Open instead.


Elements and Tags

I promise, no chemistry lesson here—we’re talking about elements with two tags, text, and sometimes other elements. Nothing liquid or hazardous. Tags are closed in with the angle brackets, which use the less than (<) and greater than (>) symbols. Element content appears between the start tag and end tag. Reading markup is like reading English, from left to right, and top to bottom. The following is an example of a heading:

Web Site Name


is the start tag while

is the end tag. The start tag indicates to apply the element from this point forward and the end tag tells the browser when to stop applying the element. The element in the example consists of heading 1 along with the tags and the content. Let’s expand the page to include the page name for the content:

Web Site Name


Title of the Page


Notice we don’t use

instead of

or

. It wouldn’t be logical. Some people do this because they want the text to appear smaller than the default style for

and

. The heading’s job is to identify the text and its place within the document’s pecking order, or hierarchy. Presentational markup will take care of how it looks. Also note that we use lower case ‘h’ instead of ‘H’. XHTML requires this and HTML doesn’t care either way.
Required Tags
Every .html file should have the following tags:
andand
and
appears at the beginning, telling the browser this is the start of an HTML document. appears at the end of the file telling the browser the HTML document ends here.
Content appearing between and includes the header information such as is what goes at the top of the browser’s window. This usually has the name of the Web site, the Web page, or related information.
After comes , which includes the bulk of the content. goes at the end of the file prior to (nothing should be between these two closing tags.). Let’s create a basic document with these tags, so you don’t have to enter them every time. Put the following in a new text page:

content

Save the file as starter.html. Whenever you need to start a new page, just open starter.html, save the file with SAVE AS, and give it a new name (example.html will do fine) before you do anything else. This ensures you don’t overwrite your starter page.
Structure the Document (English: Make the Document Readable)
You may have heard variations of “separate presentation and content” or “separate style and structure.” Content or structure refers to the text itself—not what color it is or what it looks like. Presentation and content do, however, need each other. While you could leave out presentation or style tags, the resulting document would resemble a page from the Internet’s early days—a long white document with a few bold headers here and there. No columns. Nothing to make it look pretty.
Structural elements define the purpose of the text. All of these, of course, have end tags such as

or . These include: headings –

,

,

,

,

, and

paragraphs –
list items –


  • quotes –


    For example, the following has no elements, so it appears exactly as you see it here.
    Title of Document Nulla facilisi. Aliquam adipiscing, libero in mollis eleifend, ipsum pede laoreet metus, sed consectetuer ante dolor eget nunc. Vestibulum in pede. Nam mi. Nulla facilisi. Aliquam adipiscing, libero in mollis eleifend, ipsum pede laoreet metus, sed consectetuer ante dolor eget nunc. Vestibulum in pede. 1. Nam mi. 2. Aenean metus felis. 3. ultrices quis 4. ornare in. Proin mollis. Etiam augue sem, lacinia sed, porttitor eget, fermentum at, tortor. Vestibulum fringilla. Vestibulum consequat nisl.
    That’s hard to read, isn’t it? This resembles a long email without paragraph breaks. How about adding a header, paragraph, and list items? That should make it readable like the following content. Feel free to copy this in your example.html file between the and tags.

    Title of Document

    This is heading 2

    This is heading 3

    This is heading 4

    This is heading 5
    This is heading 6

    Nulla facilisi. Aliquam adipiscing, libero in mollis eleifend, ipsum pede laoreet metus, sed consectetuer ante dolor eget nunc. Vestibulum in pede. Nam mi. Nulla facilisi. Aliquam adipiscing, libero in mollis eleifend, ipsum pede laoreet metus, sed consectetuer ante dolor eget nunc. Vestibulum in pede.


    Proin mollis. Etiam augue sem, lacinia sed, porttitor eget, fermentum at, tortor. Vestibulum fringilla. Vestibulum consequat nisl.


    Though it’s not in English, it’s easier on the eyes. What if you need the name of the Web site, title of the page, and two headers followed by paragraphs? Before looking at the markup below, see if you can do it. Hint: use

    ,

    ,

    , and . Remember to use the end tag.

    InformIT

    Reference Guides

    Web Design Guide


    Welcome to the InformIT.com Web Design Reference Guide. You may have seen other reference guides, for example, Flash and Photoshop. Flash and Photoshop certainly play a role in Web design, but unlike those topics, this guide provides a snapshot of everything Web design. The information in this guide includes reference, news, and access to the Web design community.

    Photoshop Guide

    Unless you accidentally stumbled here, you probably know what Photoshop is and you want to learn more or look for a solution to a nagging problem.

    Try viewing the file in a browser by double-clicking on the file name or opening it from within the browser. This is how it appears in a browser:

    Figure 1
    How did your results turn out? For practice, try creating a Web site for your friends or family using the elements we covered in this section. Also, throw in a

    and

    and their end tags to see how they compare to the others.
    Another great learning tool is studying the Web sites of others by viewing their source codes. To view, do the following:
    Click View
    Click Source (In Firefox, it’s Page Source)
    That’s it. You may not recognize all of the markup or the added code. No worries. It’ll get easier as you do more HTML work. In no time, you’ll be writing nice, clean XHTML-acceptable markup.