Tags for HTML can be organized in categories. Learning these tags can be tedious. I was not able to learn HTML for years until I have started working on a website. So the mother of learning is practice. In this article I will use examples for the most significant HTML tags.

In the example below I will show the HTML fragment between […] at the beginning of this article and […] before the example code. This HTML fragment can be intimidating. Sometimes the HTML code can be very complex. How can one write such complex stuff to just show nice text?

[. . .]

Text related tags:

Text can be organized in a web page like in a book on a single column or like in a magazin on multiple columns. The most simple technique is to create headers and paragraphs. The header is a title, for example a chapter name or a sub-title. To emphesize this we use larger characters or a different font for a tytle.

The paragraphs in a book can start with a larger letter or can be indented several spaces before the first word in the paragraph. One thig is common, paragraphs always start on a new row. The paragraph can contain several sentances. At the end of the row a paragraph can use a hypen (-) to separate last word into two parts when there is no space to finish the word. On HTML this can happen automatically these days. We do not have to warry about it.

Here are the tags:

These tags are block tags. That means we use one per line or multiple lines of text.

  • <h1>…</h1>  (this tag define the title)
  • <h2>…</h2> (this tag define the subtitle)
  • <p>…</p>   (this tag define a paragraph)

Note: The header tag usually is a short text and can be on a single line of text. The paragraph content is usually larger and can span several lines of text.  Inside a paragraph the font is usually not changing, but the aspect of the text can be enphesized using a text decoration.

Text decoration tags:

These tags are inline tags. That measn we can use these tags to mark a small portion of text inside a block of text.

  • <i>…</i> (this is italik text);
  • <b>…</b> (this is bold text);
  • <u>…</u> (this is underlined text);
  • <del>…</del> (this text is striked through).

Note:In a Wisiwig HTML editor we have shortcuts for these things. CTRL+I, CTL+B, CTRL+U.

User enumerations

Sometimes we can enumerate several ideas one unther another. These ideas can be nested so we have categories and subcategories of ideas. For example we can create a table of content. We enumerate all the chapters in the book. This can be ordered (using a number or a symbol) or can be unordered (using a small dot or a circle in front of the text.

Ordered List Tags:

  1. <ol>….</ol>  (Used one time to contain one ordered list)
  2. <li> … </li> (Used multiple times to contain one list item)

Unordered List Tags:

  • <ul>….</ul>  (Used one time to contain one un-ordered list)
  • <li> … </li> (Used multiple times to contain one list item)

[. . .]

 

I think is time for the HTML code:

[...]
<h2>Text related tags:</h2>
<p>
Text can be organized in a web page like in a book on a single column or like in a magazin on multiple columns. 
The most simple technique is to create headers and paragraphs. 
The header is a title, for example a chapter name or a sub-title. 
To emphesize this we use larger characters or a different font for a tytle.
</p>

<p>The paragraphs in a book can start with a larger letter or can be indented several spaces before the first word in the paragraph. 
One thig is common, paragraphs always start on a new row. The paragraph can contain several sentances. 
At the end of the row a paragraph can use a hypen (-) to separate last word into two parts when there is no space to finish the word. 
On HTML this can happen automatically these days. We do not have to warry about it.
</p>

<h3>Here are the tags:</h3>
<p>These tags are block tags. That means we use one per line or multiple lines of text.</p>
<ul>
 	<li>&lt;h1&gt;...&lt;/h1&gt;  (this tag define the title)</li>
 	<li>&lt;h2&gt;...&lt;/h2&gt; (this tag define the subtitle)</li>
 	<li>&lt;p&gt;...&lt;/p&gt;   (this tag define a paragraph)</li>
</ul>

<p>
<strong>Note:</strong> The header tag usually is a short text and can be on a single line of text. 
The paragraph content is usually larger and can span several lines of text.  
Inside a paragraph the font is usually not changing, but the aspect of the text can be enphesized using a text decoration.
</p>

<h3>Text decoration tags:</h3>
<p>These tags are inline tags. That measn we can use these tags to mark a small portion of text inside a block of text.</p>
<ul>
 	<li>&lt;i&gt;...&lt;/i&gt; (<em>this is italik text</em>);</li>
 	<li>&lt;b&gt;...&lt;/b&gt; (<strong>this is bold text</strong>);</li>
 	<li>&lt;u&gt;...&lt;/u&gt; (<span style="text-decoration: underline;">this is underlined text</span>);</li>
 	<li>&lt;del&gt;...&lt;/del&gt; (this text is <del>striked through</del>).</li>
</ul>

<p><strong>Note:</strong>In a Wisiwig HTML editor we have shortcuts for these things. CTRL+I, CTL+B, CTRL+U.</p>

<h2>User enumerations</h2>
<p>Sometimes we can enumerate several ideas one unther another. These ideas can be nested so we have categories and subcategories of ideas. 
For example we can create a table of content. We enumerate all the chapters in the book. 
This can be ordered (using a number or a symbol) or can be unordered (using a small dot or a circle in front of the text.
</p>

<h3>Ordered List Tags:</h3>
<ol>
 	<li>&lt;ol&gt;....&lt;/ol&gt;  (Used one time to contain one ordered list)</li>
 	<li>&lt;li&gt; ... &lt;/li&gt; (Used multiple times to contain one list item)</li>
</ol>

<h3>Unordered List Tags:</h3>
<ul>
 	<li>&lt;ul&gt;....&lt;/ul&gt;  (Used one time to contain one un-ordered list)</li>
 	<li>&lt;li&gt; ... &lt;/li&gt; (Used multiple times to contain one list item)</li>
</ul>
[...]

HTML is clottered with symbols that you may not comprehend and can be difficult to read. Especially when is not aligned properly by a human hand. We can use some tricks to make HTML more readable. For example we can split a paragraph in several lines. The browser will eliminate the line breacks into a paragraph. The spaces are eliminated by the browser. So we can use indentation in the HTML code and this do not have an effect on the aspect of HTML document.

Wisiwig Editor

To improve productivity one can use a Wisiwig tool to create HTML. This can be embeded editor into a website that is able to edit HTML. For example a bloger have access to buttons for text formating. WordPress has an embeded editor that is created in JavaScript to aid HTML text authors create content much faster. Only programmers are using plain text editors to create HTML fragments.

What is &lt; and &gt; ?

Some characters can’t be included inside HTML tags. The characters “<” and “>” are the markups in the XML language. So these characters are found by the HTML parser (that is the browser) and interpreted as tag markers. If used like this in a text content can confuse the parser. Therefore we replace “<” with a codification &lt; and we use &gt; for this simbol “>”.

The special symbols in XML and in HTML are represented by a code starting with simbol “&” and ending with “;”. We can also use a number that is a special code fot the symbol we wish to represent. Here are other special characters that can be encoded in HTML text content:

SymbolDescriptionCodeNumber
non-breaking space&nbsp;&#160;
<less than&lt;&#60;
>greater than&gt;&#62;
&ampersand&amp;&#38;
double quotation mark&quot;&#34;
single quotation mark (apostrophe)&apos;&#39;
¢cent&cent;&#162;
£pound&pound;&#163;
¥yen&yen;&#165;
euro&euro;&#8364;
©copyright&copy;&#169;
®registered trademark&reg;&#174;

Now you should be more familiar with HTML notation.

See also: Mozilla Special Characters