Here, you are going to learn some basic examples on how to use HTML codes on your web pages, we’ll begin with some simple ones to advance forward to more complex ones. try them out.

Example 1:
A practical example on Using definition Listing type in HTML, in our previous lessons, we learned about Listing using <ol> , <ul> , <li> tags. Now we’re going to learn how to use definition type listing tags to define words in our HTML codes.
Definition Listing elements are:
<dl> → used to begin the definition
<dt> → contains the definition word
<dd> → contains the text for the defined word


<dl>
  <dt> School</dt>

  <dd>A place of Study especially in a particular skill  
   <em>College</em> or <em>University</em></dd>
  <dt>Teacher</dt>
  <dd>a person who teaches or educates others</dd>
  <dt>Book</dt>

  <dd>a published work of literature, science, or reference, or a work intended 
for publication
</dd>
 </dl>

click to see a stand alone example   Definition Listing

Example 2:
Using similar examples, i’ll describe how you can use Nested unordered listing.

<ol>
  <li>Paul McCartney
   <ol>
    <li>Lady Madonna</li>
    <li>Lovely Rita</li>
    <li>Eleanor Rigby</li>
    <li>Can't Buy Me Love
     <ul>
      <li>John and Paul together</li>
     </ul>
    </li>
    <li>When I'm Sixty-Four</li>
   </ol>
  </li>
  <li>John Lennon
   <ol>
    <li>Norwegian Wood (This Bird Has Flown)</li>
    <li>All You Need Is Love</li>
    <li>Day Tripper</li>
    <li>Can't Buy Me Love
     <ul>
      <li>John and Paul together</li>
     </ul>
    </li>
    <li>Lucy In The Sky With Diamonds</li>
   </ol>
  </li>
  <li>Ringo Starr
   <ol>
    <li>Don't Pass Me By</li>
    <li>Yellow Submarine</li>
   </ol>
  </li>
  <li>George Harrison
   <ol>
    <li>Here Comes The Sun</li>
    <li>Roll Over Beethoven</li>
   </ol>
  </li>
 </ol>

click here to see a stand alone example   Nested Unordered

Example 3:
Creating Tables in HTML enables you so that you can arrange your document in a stylish way, in the sense that you can group other elements and structure them to display the way you want it to show in a tabular form. in this example, you should know about
<table> → used to begin a table structure
<td> → for table data
<tr> → for table row
<thead> → for table head - used for specifically inserting table header
<tbody> → for table body - used to input data into the body section of the table.
<tfooter> → for table footer - used to insert data in the footer section of the table
<th> → perform similar functions with <thead>


<table width="500" border="2" cellpadding="1" cellspacing="3">
<caption>All-time Home Run Record</caption>
<tr>
 <th>Player</th>
 <th>Home Runs</th>
 <th>Team</th>
</tr>
<tr>
 <td>Hank Aaron</td>
 <td align="right">755</td>
 <td>Braves</td>
</tr>
<tr>
 <td>Barry Bonds</td>
 <td align="right">748</td>
 <td>Giants</td>
</tr>
<tr>
 <td>Babe Ruth</td>
 <td align="right">714</td>
 <td>Yankees</td>
</tr>
<tr>
 <td>Willie Mays</td>
 <td align="right">660</td>
 <td>Giants</td>
</tr>
</table>

click here to see a stand alone example   Creating Tables