Siksha Sarovar

Siksha Sarovar (sikshasarovar.com) is a free educational web application that helps students in India learn programming and prepare for academic and competitive exams. The platform offers structured coding courses (C, C++, Python, Java, HTML, CSS, PHP, Power BI, AI, Machine Learning, Data Science), complete university curriculum notes for BCA/MCA students with previous year question papers, Class 10 and Class 12 CBSE/HBSE school notes, and dedicated preparation material for SSC, UPSC, Banking, Railway and other government exams. Browsing the site is completely free and requires no account. Users may optionally sign in with Google solely to save their learning progress, quiz scores and personal preferences across devices.

Privacy Policy | Terms of Service | Contact Siksha Sarovar | About Siksha Sarovar

v4.0.9 · PWA
Siksha Sarovar logo
Siksha Sarovar
Your Learning Universe

Siksha Sarovar is a free e-learning platform for coding courses, BCA university notes and competitive exam preparation. Optional Google sign-in saves your learning progress across devices.

Initializing knowledge base…
Compiling modules 0%

HTML Images, Tables, and Lists

Lesson 5 of 34 in the free Web Technologies notes on Siksha Sarovar, written by Rohit Jangra.

HTML Images, Tables, and Lists

HTML Images

<img src="logo.png" alt="Company Logo" width="200" height="100">

<!-- Responsive image -->
<img src="photo.jpg" alt="Photo" style="max-width:100%">

<!-- Image with link -->
<a href="https://example.com">
  <img src="banner.jpg" alt="Click to visit">
</a>

Image Attributes

AttributePurpose
srcImage URL/path
altAlternative text (accessibility)
width/heightDimensions
loadinglazy / eager loading

HTML Lists

Unordered List

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered List

<ol type="1" start="1">
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

Description List

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Nested Lists

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

HTML Tables

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>25</td>
      <td>Delhi</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>30</td>
      <td>Mumbai</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">End of Table</td>
    </tr>
  </tfoot>
</table>

Table Tags Summary

TagPurpose
<table>Container
<thead>Header section
<tbody>Body section
<tfoot>Footer section
<tr>Table row
<th>Header cell
<td>Data cell
colspan/rowspanCell spanning
Key Takeaway: Images need meaningful alt attributes for accessibility. Lists organize content clearly. Tables should be used for tabular data, not for layout.