HTML and XHTML elements and attributes: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 4: Line 4:


== Introduction ==
== Introduction ==
=== 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:
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
  html = head + body
In addition, the first line(s) of an (X)HTML page usually contains a declaration that precisely defines what HTML dialect is being used.


=== SGML and XML markup ===
A most simple HTML document that would just display ''Hello EdutechWiki reader!'' would look like this:
<source lang="html">
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Page</title>
  </head>
  <body>
    <p>Hello EdutechWiki reader!</p>
  </body>
</html>
 
</source>


[[SGML]] and [[XML]] are the formalisms with which formal languages like HTML (in SGML) and XHTML (in XML) are defined.
In addition, the first line(s) of an (X)HTML page usually contains adeclaration that precisely defines what HTML dialect is being used.


=== HTML and XHTML code examples ===
=== HTML and XHTML code examples ===
Line 52: Line 71:
Note: XHTML tags use lower case
Note: XHTML tags use lower case


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


Correct HTML files should include the following 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.


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.
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
;HTML 4.01 Strict
Line 75: Line 98:
         "http://www.w3.org/TR/html4/frameset.dtd">
         "http://www.w3.org/TR/html4/frameset.dtd">
</source>
</source>
There exist four major XHTML document types:


;XHTML 4.01 Strict
;XHTML 4.01 Strict
Line 102: Line 127:
     "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
     "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
</source>
</source>
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.
<source lang="xml">
<?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">
</source>
* In adition, do not forget to declare the xhtml namespace attribute in the html tag


== The head element ==
== The head element ==


'''Definition of the character set''':
'''Definition of the character set''':

Revision as of 17:27, 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

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: 

<!DOCTYPE html>
<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 adeclaration 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>

Note: HTML tags may use any kind of case, e.g. HEAD, Head, head, heaD would be correct.

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>Virtual Library</title>
  </head>
  <body>
    <p>Moved to <a href="http://example.org/">example.org</a>.</p>
  </body>
</html>

Note: XHTML tags use lower case

HTML and XHTML structure and document type information

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=23088"