Lalit's Cloud & DevOps notes

03-Intermediate HTML

3 min read

Moving beyond the basics to structure more complex content.

Reference: HTML elements reference - MDN

Lists

HTML offers two main ways to group items: unordered (bullet points) and ordered (numbered) lists.

Unordered List (<ul>)

Use <ul> when the order of items doesn’t matter.

<ul>
  <li>Milk</li>
  <li>Cheese</li>
  <li>Bread</li>
</ul>

Ordered List (<ol>)

Use <ol> when the sequence is important. The browser automatically numbers them (1, 2, 3…).

<ol>
  <li>Mix ingredients</li>
  <li>Bake for 30 mins</li>
  <li>Let cool</li>
</ol>

Nesting and Indentation

Nesting means putting one HTML element inside another. Indentation (using spaces or tabs) helps human readers visualize this structure.

While the browser doesn’t care about indentation, strictly following it prevents errors (like forgetting to close a tag).

Good: clear parent-child relationship.

<ul>
  <li>
    Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Bad: hard to read and debug.

<ul><li>Fruits<ul><li>Apple</li><li>Banana</li></ul></li><li>Vegetables</li></ul>

Fun Fact: If you pasted the code above into VS Code or a modern editor, it would likely auto-format it back to the “Good” version immediately on save. That’s how important indentation is—tools are built to enforce it!

Anchors (<a>)

The <a> (anchor) tag creates hyperlinks that allow users to navigate between pages.

The href Attribute

href stands for Hypertext REFerence. It tells the browser where to go.

<a href="https://google.com">Go to Google</a>

Best Practices

  1. Always use quotes (""): While HTML sometimes works without them, quotes are mandatory if your URL contains spaces or special characters. It’s best practice to always use them for consistency.
  2. Descriptive Text: Avoid “Click here”. Use text that describes the destination (e.g., “Read our privacy policy”).

Opening in New Tabs (target="_blank")

Use target="_blank" to open a link in a new tab.

<a href="https://example.com" target="_blank">Open External Site</a>

Note: Opening new tabs can distract users. Use this sparingly, typically only for external links or documents (PDFs) that interrupt the current workflow.

Images (<img />)

The <img /> tag embeds an image into the page. It is a self-closing tag (like <br />) because it doesn’t contain text content inside it.

<img src="https://example.com/logo.png" alt="Company Logo" />

Attributes

  • src (Source): The path to the image file (URL or local file).
  • alt (Alternative Text): A description of the image.

Why alt text is critical?

  1. Accessibility: Screen readers read this text aloud for visually impaired users.
  2. SEO: Search engines use it to understand what the image is about.
  3. Fallback: If the image fails to load (broken link or slow connection), this text is displayed instead.

Good Alt Text: alt="A golden retriever puppy playing in the grass" (Describes the content)

Bad Alt Text: alt="image" (Useless) or leaving it empty (Screen readers might typically announce the filename).

Graph View