HTML XHTML Basic Structure and Elements

HTML 4.01, HTML 5, XHTML Basic Elements and structure

Given these basics of HTML syntax, it is best now to look at an example document to see its application. Our first complete example written in strict HTML 4 is shown here:



<p><b><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd"></b></p>

<p><b><html></b></p>

<p><b><head></b></p>

<p><b><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></b></p>

<p><b><title></b>Hello HTML 4 World<b></title></b></p>

<p><!-- Simple hello world in HTML 4.01 strict example --></p>

<p><b></head></b></p>

<p><b><body></b></p>

<p><b><h1></b>Welcome to the World of HTML<b></h1></b></p>

<p><b><hr></b></p>

<p><b><p></b>HTML <b><em></b>really<b></em> </b>isn't so hard!<b></p></b></p>

<p><b><p></b>Soon you will <b>♥ </b>using HTML<b></p></b></p>

<p><b><p></b>You can put lots of text here if you want. We could go on and on with fake text for you to read, but let's get back to the book.<b></p></b></p>

<p><b></body></b></p>

<p><b></html></b></p>

<p>HTML5 Basic Structure and Elements</p>

<p>A simple modification of the initial <b><!DOCTYPE> </b>line is really all that is necessary to make this an HTML5 example, the comment and text is changed so you can keep the examples straight:</p>

<p><b><!DOCTYPE html></b></p>

<p><b><html></b></p>

<p><b><head></b></p>

<p><b><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></b></p>

<p><b><title></b>Hello HTML5 World<b></title></b></p>

<p><!-- Simple hello world in HTML5 example --></p>

<p><b></head></b></p>

<p><b><body></b></p>

<p><b><h1></b>Welcome to the Future World of HTML5<b><</b>/<b>h1></b></p>

<p><b><hr></b></p>

<p><b><p></b>HTML5 <b><em></b>really<b></em> </b>isn't so hard!<b></p></b></p>

<p><b><p></b>Soon you will <b>♥ </b>using HTML.<b></p></b></p>

<p><b><p></b>You can put lots of text here if you want. We could go on and on with fake text for you</p>

<p>to read, but let's get back to the book.<b></p></b></p>

<p><b></body></b></p>

<p><b></html></b></p>

<p><b>XHTML Structure</b></p>

<p>In the case of XHTML, this is a form of HTML that is based upon the syntax rules of XML:</p>

<p><b><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></b></p>

<p><b><html xmlns="http://www.w3.org/1999/xhtml"></b></p>

<p><b><head></b></p>

<p><b><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></b></p>

<p><b><title></b>Hello XHTML World<b></title></b></p>

<p><!-- Simple hello world in XHTML 1.0 strict example --></p>

<p><b></head></b></p>

<p><b><body></b></p>

<p><b><h1></b>Welcome to the World of XHTML<b></h1></b></p>

<p><b><hr /></b></p>

<p><b><p></b>XHTML <b><em></b>really<b></em> </b>isn't so hard either!<b></p></b></p>

<p><b><p></b>Soon you will <b>♥ </b>using XHTML too.<b></p></b></p>

<p><b><p></b>There are some differences between XHTML and HTML but with some precise mark-up you'll see such differences are easily addressed.<b></p></b></p>

<p><b></body></b></p>

<p><b></html></b></p>

<p><b>Basic HTML Elements</b></p>

<p>The preceding examples use some of the most common elements used in (X)HTML documents, including:</p>

<p>1. The <b><!DOCTYPE> </b>statement, which indicates the particular version of HTML or XHTML being used in the document. The first example uses the strict 4.01 specification, the second uses a reduced form for HTML5 the meaning of which will be explained a bit later on, and the final example uses the XHTML 1.0 strict specification.</p>

<p>2. The <b><html></b>, <b><head></b>, and <b><body> </b>tag pairs are used to specify the general structure of the document. The required inclusion of the <b>xmlns </b>attribute in the <b><html> </b>tag is a small difference required by XHTML.</p>

<p>3. The <b><meta> </b>tag used in the examples indicates the MIME type of the document and the character set in use. Notice that in the XHTML example, the element has a trailing slash to indicate that it is an empty element.</p>

<p>4. The <b><title> </b>and <b></title> </b>tag pair specifies the title of the document, which generally appears in the title bar of the Web browser.</p>

<p>5. A comment is specified by <!-- -->, allowing page authors to provide notes for future reference.</p>

<p>6. The <b><h1> </b>and <b></h1> </b>header tag pair indicates a headline specifying some important information.</p>

<p>7. The <b><hr> </b>tag, which has a self-identifying end tag (<b><hr /></b>) under XHTML, inserts a horizontal rule, or bar, across the screen.</p>

<p>8. The <b><p> </b>and <b></p> </b>paragraph tag pair indicates a paragraph of text.</p>

<p>9. A special character is inserted using a named entity (<b>♥</b>), which in this case inserts a heart dingbat character into the text.</p>

The <b><em> </b>and <b></em> </b>tag pair surrounds a small piece of text to emphasize which a browser typically renders in italics.


Related Topic What is Document Type or DOCTYPE Declaration and its versions
HTML5 Basic Structure and Template
Basic HTML Structure for Biginners
What are all the Versions of HTML and XHTML
Example of (X)HTML 4.01 Document Structure

nScraps.com 2011   Privacy Policy  Terms of Service  Feedback