HTML and XHTML elements and attributes: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 5: Line 5:
== Introduction ==
== Introduction ==


<div class="tut_goals">
; Learning goals
* Learn basic HTML and XHTML markup
; Prerequisites
* None
; Moving on
* See the [[web technology tutorials]]
; Level and target population
* Beginners
; Remarks
* For the moment, this article is intended to be a "handout" for "lab" teaching. In other words, a teacher + hands-on activities are needed.
</div>


=== SGML and XML markup ===
=== SGML and XML markup ===
Line 18: Line 30:
A most simple HTML document that would just display ''Hello EdutechWiki reader!'' would look like this:
A most simple HTML document that would just display ''Hello EdutechWiki reader!'' would look like this:
<source lang="html4strict">
<source lang="html4strict">
<!DOCTYPE html>
<html>
<html>
   <head>
   <head>
Line 30: Line 41:
</source>
</source>


In addition, the first line(s) of an (X)HTML page usually contains adeclaration that precisely defines what HTML dialect is being used.
In addition, the first line(s) of an (X)HTML page usually contains a declaration that precisely defines what HTML dialect is being used.


=== HTML and XHTML code examples ===
=== HTML and XHTML code examples ===
Line 49: Line 60:
</source>
</source>


Note: HTML tags may use any kind of case, e.g. ''HEAD'', ''Head'', ''head'', ''heaD'' would be correct.
HTML tags may use any kind of case, e.g. ''HEAD'', ''Head'', ''head'', ''heaD'' would be correct. To insure XHTML compatibily we suggest to adopt the following strategy:
* use only lower case as in the example below that is formally identical to the one above
* always close tags (more on that later ...)
<source lang="xml">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
      <title>My first HTML document</title>
  </head>
  <body>
      <p>Hello world!</p>
  </body>
</html>
</source>


; XHTML 1.0 strict example
; XHTML 1.0 strict example
Line 60: Line 85:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
   <head>
    <title>Virtual Library</title>
      <title>My first XHTML document</title>
   </head>
   </head>
   <body>
   <body>
    <p>Moved to <a href="http://example.org/">example.org</a>.</p>
      <p>Hello world!</p>
   </body>
   </body>
</html>
</html>
</source>


</source>
As you can see HTML and XHTML look very similar. The major difference between HTML and XHTML are the following:
* In HTML, some tags e.g. the ''p'' and ''li'' tags can be left "open", i.e. it is not necessary to add a closing tag
* Attributes in HTML do not always need a value.
* In XHTML, the ''html'' tag needs a namespace declaration (but ''not'' in HTML).


Note: XHTML tags use lower case
This may be confusing for a beginner. So to make things simple:
* Always start with one of the two templates above (your [[web authoring system]] may do this automatically for your)
* Always close all tags, even when you just write "old" HTML code


== HTML and XHTML structure and document type information ==
== HTML and XHTML structure and document type information ==


 
Let's now have a look at the lines before the <nowiki>html</nowiki> tag.


Correct HTML files should include the following ''document type declaration'' information starting on line 1. Before we add more explanation we suggest that you either use HTML 4.01 Transitional or XHTML 4.01 Transitional for pages meant for reading on a computer and XHTML Basic for (modern) cellphones and PDAs.
Correct HTML files should include the following ''document type declaration'' information starting on line 1. Before we add more explanation we suggest that you either use HTML 4.01 Transitional or XHTML 4.01 Transitional for pages meant for reading on a computer and XHTML Basic for (modern) cellphones and PDAs.

Revision as of 18:44, 1 September 2009

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

<pageby nominor="false" comments="false"/>

Introduction

Learning goals
  • Learn basic HTML and XHTML markup
Prerequisites
  • None
Moving on
Level and target population
  • Beginners
Remarks
  • For the moment, this article is intended to be a "handout" for "lab" teaching. In other words, a teacher + hands-on activities are needed.

SGML and XML markup

SGML and XML are the formalisms with which formal languages like HTML (in SGML) and XHTML (in XML) are defined. Such definitions are called "document type definitions", "schemas" or "grammars". Read the DTD tutorial if you wish to know details. For the moment, you just need to understand that these grammars are sets of rules that define:

  • a set of elements (tags) and their attributes that identify various the structural elements of an HTML page;
  • how these elements can be embedded ;
  • different sorts of entities (reusable fragments, special characters).

Markup of an HTML page is divided into two big parts: the head contains information that the user will not see inside the browser window and the body contains the contents to be displayed. We can express this with a simple formula: 

html = head + body

A most simple HTML document that would just display Hello EdutechWiki reader! would look like this: 

<html>
  <head>
    <title>Hello Page</title>
  </head>
  <body>
    <p>Hello EdutechWiki reader!</p>
  </body>
</html>

In addition, the first line(s) of an (X)HTML page usually contains a declaration that precisely defines what HTML dialect is being used.

HTML and XHTML code examples

HTML 4.01 strict example

Source: http://www.w3.org/TR/html4/struct/global.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <TITLE>My first HTML document</TITLE>
   </HEAD>
   <BODY>
      <P>Hello world!
   </BODY>
</HTML>

HTML tags may use any kind of case, e.g. HEAD, Head, head, heaD would be correct. To insure XHTML compatibily we suggest to adopt the following strategy:

  • use only lower case as in the example below that is formally identical to the one above
  • always close tags (more on that later ...)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>My first HTML document</title>
   </head>
   <body>
      <p>Hello world!</p>
   </body>
</html>
XHTML 1.0 strict example

Source: http://www.w3.org/TR/xhtml1/ 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
      <title>My first XHTML document</title>
  </head>
  <body>
      <p>Hello world!</p>
  </body>
</html>

As you can see HTML and XHTML look very similar. The major difference between HTML and XHTML are the following:

  • In HTML, some tags e.g. the p and li tags can be left "open", i.e. it is not necessary to add a closing tag
  • Attributes in HTML do not always need a value.
  • In XHTML, the html tag needs a namespace declaration (but not in HTML).

This may be confusing for a beginner. So to make things simple:

  • Always start with one of the two templates above (your web authoring system may do this automatically for your)
  • Always close all tags, even when you just write "old" HTML code

HTML and XHTML structure and document type information

Let's now have a look at the lines before the html tag.

Correct HTML files should include the following document type declaration information starting on line 1. Before we add more explanation we suggest that you either use HTML 4.01 Transitional or XHTML 4.01 Transitional for pages meant for reading on a computer and XHTML Basic for (modern) cellphones and PDAs.

The rationale for including this information is that display will be better when the browser knows what kind of (X)HTML you intended to use.

There exist three major HTML document types:

HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
        "http://www.w3.org/TR/html4/frameset.dtd">

There exist four major XHTML document types:

XHTML 4.01 Strict
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 4.01 Transitional
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 4.01 Frameset
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML Basic
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

Note regarding XHTML and XML:

  • If you intend to serve XHTML as XML (e.g. in order to include other XML languages within your document) we suggest adding an XML declaration at the very beginning of the file.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • In adition, do not forget to declare the xhtml namespace attribute in the html tag

The head element

Definition of the character set: 

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


Structuring the document body

Inside the body tag, a variety high level elements may used in any order as the following pseudo-formal rule shows:

body = ( address | blockquote | div | dl | h1 | h2 | h3 | ol | p | pre | table | ul )*

Headings (titles)

Paragraphs

Lists

Adding markup to block elements

inline element = ( Your text | a | abbr | acronym | br | cite | code | em | img | kbd | q | samp | span | strong ) *

Acknowledgement and copyright

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=HTML_and_XHTML_elements_and_attributes&oldid=23090"