View source for HTML and XHTML elements and attributes

{{under construction}}
{{web technology tutorial|Introductory}}
<pageby nominor="false" comments="false"/>

== 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]] are the formalisms with which formal languages like HTML (in SGML) and XHTML (in XML) are defined. SGML at some time was replaced by XML which is simpler in structure, but more powerful in terms of tools that have been built around it. 

Definitions of formal languages 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).

SGML and XML languages, e.g. HTML and XHTML have three kinds of components:
* elements
* attributes
* character and entity references (not explained here)

These elements use a special syntax that we shall introduce now with an explanation taken from [http://en.wikipedia.org/wiki/HTML Wikipedia]

=== An introduction to the (X)HTML markup formalism ===

HTML elements are the basic components for HTML markup. Elements have two basic properties: attributes and content. Each element's attribute and each element's content has certain restrictions that must be followed for an HTML document to be considered valid. An element usually has a start tag (e.g. <code><element-name></code>) and an end tag (e.g. <code></element-name></code>). The element's attributes are contained in the start tag and content is located between the tags (e.g. <code><element-name&nbsp;attribute="value">Content</element-name></code>). Some elements, such as <code><nowiki><br></nowiki></code>, do not have any content and must not have a closing tag. Listed below are several types of markup elements used in HTML.

'''Structural''' markup describes the purpose of text. For example, <code><nowiki><h2>Golf</h2></nowiki></code> establishes "Golf" as a second-level, which would be rendered in a browser in a manner similar to the "HTML markup" title at the start of this section. Structural markup does not denote any specific rendering, but most Web browsers have standardized default styles for element formatting. Text may be further styled with [[CSS|Cascading Style Sheets]] (CSS).

'''Presentational''' markup describes the appearance of the text, regardless of its function. For example <code><nowiki><b>boldface</b></nowiki></code> indicates that visual output devices should render "boldface" in bold text, but gives no indication what devices which are unable to do this (such as aural devices that read the text aloud) should do. In the case of both <code><nowiki><b>bold</b></nowiki></code> and <code><nowiki><i>italic</i></nowiki></code>, there are elements which usually have an equivalent visual rendering but are more semantic in nature, namely <code><nowiki><strong>strong emphasis</strong></nowiki></code> and <code><nowiki><em>emphasis</em></nowiki></code> respectively. It is easier to see how an aural user agent should interpret the latter two elements. However, they are not equivalent to their presentational counterparts: it would be undesirable for a screen-reader to emphasize the name of a book, for instance, but on a screen such a name would be italicized. Most presentational markup elements have become deprecated under the HTML 4.0 specification, in favor of [[CSS]] based style design.

'''Hypertext''' markup links parts of the document to other documents. HTML up through version [[XHTML]] 1.1 requires the use of an anchor element to create a hyperlink in the flow of text: <code><nowiki><a>Wikipedia</a></nowiki></code>. However, the <code>href</code> attribute must also be set to a valid [[URL]] so for example the HTML markup, <code><nowiki><a&nbsp;href="http://en.wikipedia.org/">Wikipedia</a></nowiki></code>, will render the word "<span class="plainlinks">[http://en.wikipedia.org/ Wikipedia]</span>" as a [[hypertext|hyperlink]].To link on an image, the anchor tag use the following syntax: <code><a href="url"><img src="image.gif" alt="alternative text" width="50" height="50"></a></code>

Let's now look at attributes.

Most of the attributes of an element are name-value pairs, separated by "=", and written within the start tag of an element, after the element's name. The value may be enclosed in single or double quotes, although values consisting of certain characters can be left unquoted in HTML (but not XHTML).

Most elements can take any of several common attributes:

* The <code>id</code> attribute provides a document-wide unique identifier for an element. This can be used by stylesheets to provide presentational properties, by browsers to focus attention on the specific element, or by scripts to alter the contents or presentation of an element. Appended to the URL of the page, it provides a globally-unique identifier for an element; typically a sub-section of the page. For example, the ID "Attributes" in <code><nowiki>http://en.wikipedia.org/wiki/HTML#Attributes</nowiki></code> 
* The <code>class</code> attribute provides a way of classifying similar elements. This can be used for presentation purposes for example. An HTML document might use the designation <code>class="notation"</code> to indicate that all elements with this class value are subordinate to the main text of the document. Such elements might be gathered together and presented as footnotes on a page instead of appearing in the place where they occur in the HTML source.
* An author may use the <code>style</code> non-attributal codes presentational properties to a particular element. It is considered better practice to use an element’s <code>id</code> or <code>class</code> attributes to select the element with a stylesheet, though sometimes this can be too cumbersome for a simple ad hoc application of styled properties. 
* The <code>title</code> attribute is used to attach subtextual explanation to an element. In most browsers this attribute is displayed as what is often referred to as a tooltip. 

The abbreviation element, <code>abbr</code>, can be used to demonstrate these various attributes:

<source lang="html4strict">
<abbr id="anId" class="aClass" style="color:blue;" title="Hypertext Markup Language">HTML</abbr></source>

This example displays as <span id="anId" class="aClass" style="color:blue;" title="Hypertext Markup Language">HTML</span>; in most browsers, pointing the cursor at the abbreviation should display the title text "Hypertext Markup Language."

Most elements also take the language-related attributes <code>lang</code> and <code>dir</code>.

=== Summary of (X)HTML markup principles ===

HTML elements may be either ''containers'' or ''empty''.

'''Container elements''' are constructed with:
* a ''start tag'' (<code>&lt;tag&gt;</code>) marking the beginning of an element, which may incorporate:
** any number of [[HTML#Attributes|attributes]] (including their values);
* some amount of ''content'' (text, other elements);
* an ''end tag'', in which the element name is prepended with a forward slash: <code>&lt;/tag&gt;</code>.  (note: In some forms of HTML the end tag is optional for some container elements.)

'''Empty elements''' consist of only a single tag, with any attributes. (The tag may have a slash appended: <code>&lt;tag&nbsp;/&gt;</code> – in [[XHTML]] this is ''required''.)

'''Attributes''' define desired behavior or indicate additional element properties. In XHTML each attribute must have a quoted value, e.g. <code>class = "important"</code>.

Element (and attribute) names may be written in either upper or lower case in HTML, but must be in lower case in XHTML.

=== Content vs. Style ===

In keeping with the principle of [http://en.wikipedia.org/wiki/Separation_of_Concerns Separation of Concerns], the function of HTML is primarily to add structural and semantic information to the raw text of a document. In other words: '''HTML just defines what kind of elements you have inside a document'''.

Webbrowsers have a built-in method to render each of these elements, e.g. titles appear bigger and list elements are indented and prefixed with bullets.

In older variants of HTML, designers would change appeareance with html tags that are now deprecated in HTML 4.x and XHTML 4.x strict. 

To style a text, [[CSS]], the Cascading Stylesheet language is used !

== Structure of an HTML page ==

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:
<source lang="html4strict">
<html>
  <head>
    <title>Hello Page</title>
  </head>
  <body>
    <p>Hello EdutechWiki reader!</p>
  </body>
</html>
</source>

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

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
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>My first XHTML document</title>
  </head>
  <body>
      <p>Hello world!</p>
  </body>
</html>
</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).

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

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

There exist four major XHTML document types:

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

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

{{xmlelement|<head>... </head>>}}
In the head element we may defines various important information about an HTML page. Its contents are not displayed.

The most important sub-selements of ''head'' are the following:

{{xmlelement|<link />}}
Specifies links to other documents, such as previous and next links, or alternate versions. A common use is to link to external stylesheets, using the form:
<source lang="xml">
 <link rel="stylesheet" type="text/css" href="url" title="description_of_style"> 
</source>

{{xmlelement|<meta />}}
Can be used to specify additional metadata about a document, such as its author, publication date, expiration date, page description, keywords, or other information not provided through the other header elements and attributes. For instance, the content attribute defines both the mime type and the characterset.
<source lang="xml">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</source>

{{xmlelement|<title>…</title>}}
Define a document title. Required in every HTML and XHTML document. User agents (e.g. browsers) may use the title in different ways or use it as default page name when saving the page on the local file system. Typically, the title is displayed on the window decoration. For obvious reasons, only text is allowed within a title element.

== 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 )*

Each of these structural elements may include markup-less text, additional structural elements or inline elements (see below)

=== Headings (titles) ===

{{xmlelement|<h1>…</h1> <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6>}}
Section headings at different levels. <h1> delimits the highest-level heading, <h2> the next level down (sub-section), <h3> for a level below that, and so on to <h6>.  Most visual browsers show headings as large bold text by default, though this can be overridden with CSS. Heading elements are not intended merely for creating large or bold text — they describe the document’s structure and organization. Some programs use them to generate outlines and tables of contents.

=== Paragraphs ===

{{xmlelement|<p>...</p>}}
Creates a paragraph, perhaps the most common block level element. The closing tag is optional for HTML and (of course) required for XHTML.

{{xmlelement|<blockquote>…</blockquote>}}
A block-level quotation, for when the quotation includes block level elements, e.g. paragraphs. The cite attribute may give the source, and must be a fully qualified Uniform Resource Identifier (URL). The default presentation of block quotations in visual browsers is usually to indent them from both margins. This has led to the element being unnecessarily used just to indent paragraphs, regardless of semantics.

{{Xmlelement|<pre>…</pre>}}
Pre-formatted text. Text within this element is typically displayed in a non-proportional font exactly as it is laid out in the file (see ASCII art). Whereas browsers ignore whitespace for other HTML elements, in pre, whitespace should be rendered as authored.  This element can contain any inline element except: image (img), object (object), big font size (big), small font size (small), superscript (sup), and subscript (sub).

{{Xmlelement|<hr />}}
A horizontal rule. Presentational rules can also be drawn with stylesheets.

=== Lists ===

{{Xmlelement|<dl>…</dl>}}
A definition list consisting of definition terms paired with definitions, see the next two items

{{Xmlelement|<dt>…</dt>}}
A definition term in a definition list.

{{Xmlelement|<dd>…</dd>}}
The definition of a term, in a definition list.

{{Xmlelement|<ol>…</ol>}}
An ordered (enumerated) list. The type attribute can be used to specify the kind of ordering, but stylesheets give more control: {list-style-type: foo}. The default is Arabic numbering. Within an ol element, you may use '''nothing but''' <nowiki><li>...</li></nowiki> elements !

{{Xmlelement|<ul>…</ul>}}
An unordered (bulleted) list. Stylesheets can be used to specify the list marker: {list-style-type: foo}. The default marker is a disc.

{{Xmlelement|<li>…</li>}}
A list item in ordered (ol) or unordered (ul) lists.

== Inline elements: Adding markup to block elements ==

:: ''inline contents'' = ( ''Any text'' | a | abbr | acronym | br | cite | code | em | img | kbd | q | samp | span | strong  ) *

{{Xmlelement|<a>…</a>}}
An anchor can be either the origin or the target (destination) end of a hyperlink.  

With the attribute href,  the anchor becomes a hyperlink to either another part of the document or another resource (e.g. a webpage) using an external URL.
The following code
<source lang="html4strict">
 <a href="http://eductechwiki.unige.ch/HTML_and_XHTML_elements_and_attributes">HTML and XHTML elements and attributes tutorial</a> 
</source>
will show like this
: [[HTML and XHTML elements and attributes tutorial]]
The attribute title may be set to give brief information about the link:
<source lang="html4strict">
 <a href="URL" title="additional information">link text</a> 
</source>
== Elements for extensions and styling purposes ==

{{Xmlelement|<div>…</div>}}
A block-level logical division. A generic element with no semantic meaning used to distinguish a document section, usually for purposes such as presentation or behaviour controlled by stylesheets or DOM calls.

{{Xmlelement|<span>…</span>}}
An inline logical division. A generic element with no semantic meaning used to distinguish a document section, usually for purposes such as presentation or behaviour controlled by stylesheets or DOM calls.

== 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:Hypertext]]
[[Category:web standards]]
[[Category: web technology tutorials]]