Menu Close

Articles

Most significant HTML tags

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 an HTML fragment between {begin} … {end}. This fragment can be intimidating on first reading. Sometimes the HTML code can be very complex. To reduce complexity developers are using a dual editor and switch between visual/text.

[begin]

Text related tags:

Text can be organized in a web page like in a book on a single column or like in a magazine 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 emphasize this we use larger characters or a different font for a title.

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 thing is common, paragraphs always start on a new row. The paragraph can contain several sentences. At the end of the row a paragraph can use a hyphen (-) 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 wary 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 emphasized using a text decoration.

Text decoration tags:

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

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

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

User enumerations

Sometimes we can enumerate several ideas one under 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 un-ordered (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)

[end]

Here it is HTML code example:

<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 magazine 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 emphasize this we use larger characters or a different font for a title.
</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 thing is common, paragraphs always start on a new row. The paragraph can contain several sentences. 
At the end of the row a paragraph can use a hyphen (-) 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 wary 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><h1>...</h1>  (this tag define the title)</li>
 	<li><h2>...</h2> (this tag define the subtitle)</li>
 	<li><p>...</p>   (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 means we can use these tags to mark a small portion of text inside a block of text.</p>
<ul>
 	<li><i>...</i> (<em>this is italic text</em>);</li>
 	<li><b>...</b> (<strong>this is bold text</strong>);</li>
 	<li><u>...</u> (<span style="text-decoration: underline;">this is underlined text</span>);</li>
 	<li><del>...</del> (this text is <del>striked through</del>).</li>
</ul>

<p><strong>Note:</strong>In a WYSIWYG 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 under 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 un-ordered (using a small dot or a circle in front of the text.
</p>

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

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

As you can see HTML is clattered 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 breaks into a paragraph. The spaces are eliminated by the browser. So we can use indentation in the HTML code and this do not have any effect on the aspect of HTML document.

WYSIWYG Editor

To improve productivity one can use a WYSIWYG tool to create HTML. This can be embedded editor into a website that is able to edit HTML. For example a blogger have access to buttons for text formatting. WordPress has an embedded 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 symbol “>”.

The special symbols in XML and in HTML are represented by a code starting with symbol “&” 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.

Read next: How to create a HTML table