mozilla

Compare Revisions

Introduction to HTML

Change Revisions

Revision 34779:

Revision 34779 by Sheppy on

Revision 34780:

Revision 34780 by itpastorn on

Title:
Introduction to HTML
Introduction to HTML
Slug:
HTML/Introduction
HTML/Introduction
Tags:
HTML
HTML
Content:

Revision 34779
Revision 34780
tt16    <h3>
17      Elements - the basic building blocks
18    </h3>
19    <p>
20      The basic unit of information in HTML is the <strong>elemen
 >t</strong>. Elements are the answer to the question "what kind of
 > information is this?" Elements convey <strong>semantic</strong> 
 >meaning. Some elements have very precise meaning,as in "this is a
 > header" or "this is an ordered list", some are less specific as 
 >in "this is a part of the page", and yet some are used for techni
 >cal reasons. But in some way or the other they all have a meaning
 >.
21    </p>
22    <p>
23      Most elements may contain other elements, forming a hierarc
 >hic structure called the <strong>DOM</strong> - the <strong>Docum
 >ent Object Model</strong>.
24    </p>
25    <h3>
26      Tags
27    </h3>
28    <p>
29      HTML uses plain text as a foundation and attaches special m
 >eaning to anything that starts with the less than sign (&lt;) and
 > ends with the greater than sign (&gt;). Such markup is called a 
 ><strong>tag</strong>. Here is a simple example:
30    </p>
31    <p>
32      <code>&lt;p&gt;This is text within a paragraph.&lt;/p&gt;</
 >code>
33    </p>
34    <p>
35      In that example there is a <em>start</em> tag and a <em>clo
 >sing</em> tag. Closing tags are use te same tag name as the start
 >ing tag, but also contain a <em>forward slash</em> immediately af
 >ter the leading less than sign. <em>Most</em> elements in HTML ar
 >e written using both start and closing tags. Start and closing ta
 >gs should be properly <strong>nested</strong>, that is closing ta
 >gs should be written in the opposite order of the start tags. Pro
 >per nesting is one rule to be obeyed in order to write <strong>va
 >lid</strong> code.
36    </p>
37    <p>
38      This is an aexample of <em>valid</em> code:
39    </p>
40    <p>
41      <code>&lt;em&gt;I &lt;strong&gt;really&lt;/strong&gt; mean 
 >that&lt;/em&gt;</code>.
42    </p>
43    <p>
44      This is an example of <em>invalid</em> code:
45    </p>
46    <p>
47      <code>&lt;em&gt;I &lt;strong&gt;really&lt;/em&gt; mean that
 >&lt;/strong&gt;</code>.
48    </p>
49    <p>
50      Some elements however can have no text content nor contain 
 >any other elements. These <strong>empty</strong> elements and nee
 >d no closing tag. This is an example:
51    </p>
52    <p>
53      <code>&lt;meta charset="utf-8"&gt;</code>
54    </p>
55    <p>
56      Some like to mark up empty elements using a traling forward
 > slash, which is mandatory in XHTML. In HTML this slash has no te
 >chnical functionality and using it is a pure stylistic choice.
57    </p>
58    <p>
59      <code>&lt;meta charset="utf-8" /&gt;</code>
60    </p>
61    <h3>
62      Attributes
63    </h3>
64    <p>
65      The start tag may contain additional information, as in the
 > preceding example. Such information is called an <strong>attribu
 >te</strong>. Attributes usually consist of 2 parts:
66    </p>
67    <ul>
68      <li>An attribute <strong>name</strong>.
69      </li>
70      <li>An attribute <strong>value</strong>.
71      </li>
72    </ul>
73    <p>
74      A few attributes can only have one value, they are <strong>
 >boolean</strong> attributes, and they may be shortened to using t
 >he attribute name only. or having an empty attribute value. Thus 
 >the following 3 examples have the same meaning:
75    </p>
76    <p>
77      <code>&lt;input required="required"&gt;</code>
78    </p>
79    <p>
80      <code>&lt;input required=""&gt;</code>
81    </p>
82    <p>
83      <code>&lt;input required&gt;</code>
84    </p>
85    <p>
86      Attribute values that consist of a single word or number ma
 >y be written as they are, but as soon as there are two or more st
 >rings of characters in the value, it must be written within quote
 > marks. Both single quotes (') and double quotes (") are OK. Many
 > developers prefer to always use quotes to make the code less amb
 >igous to the eye and to avoid mistakes. The following is such a m
 >istake:
87    </p>
88    <p>
89      <code>&lt;p class=foo bar&gt;</code>
90    </p>
91    <p>
92      In this example the value was supposed to be "foo bar", but
 > since there were no quotes the code is interpreted as if it had 
 >been written like this:
93    </p>
94    <p>
95      <code>&lt;p class="foo" bar=""&gt;</code>
96    </p>
97    <h3>
98      Entities
99    </h3>
100    <p>
101      Since the less than and greater than sign have special mean
 >ing one must (usually) use an <strong>entity</strong> to mark up 
 >those signs in plain text. Entities may be written using names, d
 >ecimal numbers or hexadecimal numbers. (More on that later.) Ther
 >e are four basic named entities one must know:
102    </p>
103    <p>
104      <code>&amp;gt; = the greater than sign</code>
105    </p>
106    <p>
107      <code>&amp;lt; = the less than sign</code>
108    </p>
109    <p>
110      <code>&amp;amp; = the ampersand sign</code>
111    </p>
112    <p>
113      <code>&amp;quot; = double quot sign</code>
114    </p>
115    <p>
116      There are many more entities, but these 4 are absolutely fu
 >ndamental, since they represent characters that have a special me
 >aning in HTML.
117    </p>
118    <h3>
119      Doctype and comments
120    </h3>
121    <p>
122      In addition to tags, text content and entities, a document 
 >should always contain a <strong>doctype</strong> at the very top.
 > In modern HTML this is written like this:
123    </p>
124    <p>
125      <code>&lt;!DOCTYPE html&gt;</code>
126    </p>
127    <p>
128      The doctype has a long and intricate history, but for now a
 >ll you need to know is that this doctype tells the browser to int
 >erpret the HTML and CSS code according to standards and not try t
 >o pretend that it is Internet Explorer from the 90's. (See <a hre
 >f="/en/Mozilla's_Quirks_Mode" title="Mozilla's Quirks Mode">quirk
 >s mode</a>.)
129    </p>
130    <p>
131      To help you remember what you are doing while developing or
 > to communicate with other developers your code may also contain 
 ><strong>comments</strong>. Comments in HTML start with less than 
 >+ exclamation mark + 2 minus signs (&lt;!--) and end with 2 minus
 > signs + greater than.
132    </p>
133    <p>
134      <code>&lt;!-- This is comment text --&gt;</code>
135    </p>
136    <h3>
137      A complete but small document
138    </h3>
139    <p>
140      Putting this together here is a tiny example of an HTML-doc
 >ument. The document structure and the elements will be explained 
 >in a later article. Go ahead and write this code in a text editor
 >, save it as <em>myfirstdoc.html</em> and load it in a browser. M
 >ake sure you are saving it using the character encoding UTF-8. Si
 >nce this document uses no styling it will look very plain, but it
 > is only a small start.
141    </p>
142    <p>
143      <code>&lt;!DOCTYPE html&gt;<br>
144      &lt;html lang="en"&gt;</code><br>
145      <code>&lt;head&gt;<br>
146      &nbsp; &lt;meta charset="utf-8" /&gt;<br>
147      &nbsp; &lt;title&gt;A tiny document&lt;/html&gt;<br>
148      &lt;/head&gt;<br>
149      &lt;body&gt;</code><br>
150      <code>&nbsp; &lt;h1&gt;Main heading in my document&lt;/h1&g
 >t;</code><br>
151      <code>&nbsp; &lt;!-- Note that it is "h" + "one", not "h" +
 > the letter "l" --&gt;</code><br>
152      <code>&nbsp; &lt;p&gt;Loook ma, I am coding &lt;abbr title=
 >"Hyper Text Markup Language"&gt;HTML&lt;/abbr&gt;.&lt;/p&gt;<br>
153      &lt;/body&gt;</code><br>
154      <code>&lt;/html&gt;</code><br>
155    </p>

Back to History