HTML & CSS - lesson 1 | HackIndia Skills

Key point

One rule

Choose the element that describes the job of the content. Style it later with CSS.

A page made only from div tags can look fine, but it gives browsers, search engines, and assistive tech less meaning.

Meaning beats looks

HTML is the structure of your project. CSS is the look. Keep those jobs separate.

If something is the main content, use main. If it is site navigation, use nav. If it is a page footer, use footer. Do not pick tags because they are block or inline.

Your to-do

Choose the tag

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Use header for intro content such as a logo, title, or top actions.
Use nav for links that move around the site or page.
Use main for the unique content of the page. Use it once.
Use section for a themed part of the page with a useful heading.
Use article for content that can stand alone, like a project card or blog post.
Use aside for extra content, like notes, filters, or related links.

0 of 6 done

Example

Before and after

Here is a common hackathon landing page pattern. The first version works visually, but the HTML says almost nothing.

The second version gives the same page a clear structure before any CSS is added.

<!-- Weak: everything is a div -->
<div class="top">
  <div class="logo">Campus Events</div>
  <div class="links">
    <a href="#events">Events</a>
    <a href="#submit">Submit</a>
  </div>
</div>
<div class="content">
  <div class="hero">Find tech events near your college</div>
  <div class="card">Hackathon at Pune</div>
</div>
<div class="bottom">Made by Team Byte</div>

<!-- Better: elements describe meaning -->
<header>
  <p>Campus Events</p>
  <nav aria-label="Main navigation">
    <a href="#events">Events</a>
    <a href="#submit">Submit</a>
  </nav>
</header>

<main>
  <section aria-labelledby="hero-title">
    <h1 id="hero-title">Find tech events near your college</h1>
    <p>Track hackathons, meetups, and workshops in one place.</p>
  </section>

  <section id="events" aria-labelledby="events-title">
    <h2 id="events-title">Upcoming events</h2>
    <article>
      <h3>Hackathon at Pune</h3>
      <p>Open to student teams. Registration closes Friday.</p>
    </article>
  </section>
</main>

<footer>
  <p>Made by Team Byte</p>
</footer>

Tip

Headings create map

Use headings in order. Start with one h1 for the page topic, then h2 for major sections, then h3 inside those sections.

Do not choose h4 because it looks smaller. Use CSS for size. Use headings for the page outline.

Common mistake

Wrong clickable tags

If the user performs an action, use button. If the user goes to another URL or page section, use a link.

Do not make a div clickable when a button fits. A real button can be activated by mouse, keyboard, touch, voice command, and assistive technology.

<!-- Avoid -->
<div class="save" onclick="saveProject()">Save project</div>

<!-- Use -->
<button type="button">Save project</button>

<!-- Link is right when it navigates -->
<a href="/projects">View projects</a>

Forms need real controls

You will build accessible forms later in this track. Start the habit now: use form, label, input, fieldset, and button before custom div-based controls.

A label is the caption for a control. A fieldset groups related controls, such as year of study or project category.