HTML and XHTML elements and attributes: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
Line 1: Line 1:
{{under contstruction}}
{{under construction}}
{{web technology tutorial}}
<pageby nominor="false" comments="false"/>
 
== Introduction ==
 
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
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 ===
 
[[SGML]] and [[XML]] are the formalisms with which formal languages like HTML (in SGML) and XHTML (in XML) are defined.
 
=== HTML and XHTML code examples ===
 
; HTML 4.01 strict example
Source: http://www.w3.org/TR/html4/struct/global.html
<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!
  </BODY>
</HTML>
</source>
 
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/
<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">
<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>
 
</source>
 
Note: XHTML tags use lower case
 
== HTML and XHTML version 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.
 
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.
 
;HTML 4.01 Strict
<source lang="xml">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
</source>
 
;HTML 4.01 Transitional
<source lang="xml">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
</source>
 
;HTML 4.01 Frameset
<source lang="xml">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
        "http://www.w3.org/TR/html4/frameset.dtd">
</source>
 
;XHTML 4.01 Strict
<source lang="xml">
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
</source>
 
;XHTML 4.01 Transitional
<source lang="xml">
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</source>
 
;XHTML 4.01 Frameset
<source lang="xml">
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
</source>
 
; XHTML Basic
<source lang="xml">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
</source>
 
== The head element ==
 
 
'''Definition of the character set''':
<source lang="xml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</source>
 
 
 
== 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 ==
 
{{copyrightalso|[http://creativecommons.org/licenses/by-sa/3.0/ Creative Commons Attribution/Share-Alike License]. Parts of this article are based on various Wikipedia articles, in particular: [http://en.wikipedia.org/wiki/HTML HTML], [http://en.wikipedia.org/wiki/XHTML XHTML], and [http://en.wikipedia.org/wiki/HTML_element HTML element]}}


[[Category: Web authoring]]
[[Category: Web authoring]]

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

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

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

SGML and XML are the formalisms with which formal languages like HTML (in SGML) and XHTML (in XML) are defined.

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 version 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.

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.

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

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