HTML and XHTML elements and attributes: Difference between revisions
m (using an external editor) |
m (using an external editor) |
||
| Line 1: | Line 1: | ||
{{under construction}} | {{under construction}} | ||
{{web technology tutorial}} | {{web technology tutorial|Introductory}} | ||
<pageby nominor="false" comments="false"/> | <pageby nominor="false" comments="false"/> | ||
| Line 17: | Line 17: | ||
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=" | <source lang="html4strict"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Revision as of 17:28, 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 ) *