HTML-BEGINNER LEVEL

1.Headings (<h1> - <h6>)

Meaning: Headings are titles for sections on a page. <h1> is the largest, <h6> is the smallest.

Usage: Using headings helps structure the HTML and is SEO-friendly.

Example:


        <h1>Codex(webwise) Frontend Learning </h1>

        <h2>HTML basics</h2>

Mini-tasks:
1.Write a <h1> for your page title.
2.Use <h2> for a subsection
3.Use <h3> for a smaller topic

2.Paragraphs (<p>)

Meaning: Paragraphs are blocks of text. They automatically create line breaks.

Usage: Using <p> makes text readable

Example:


        <p> HTML stands for HyperText Markup Language. It is used to structure content on the web.</p>

        <p> This is another paragraph explaning HTML elements. </p>

Mini-task: Write a paragraph <p> about your favorite hobby.

3.Line Break (<br>)

Meaning: <br> creates a line break without starting a new paragraph.

Usage: Useful for addresses, poems, or short lines.

Example:


        <p>My address:<br>123 webwise Street<br>Dar es salaam,Tanzania</p>

Mini-task: Write your address using <br> for line breaks.

4.Links (<a href="">)

Meaning: Links navigate to other pages or websites.

Usage: Always use href to define the URL.

Tip: Use descriptive text for accessibility

Example:


        <a href="https://webwise.netlify.app" target="_blank">Visit Codex</a>

*target="_blank" opens the link in a new tab.
Mini-task:
1.Create a link to your favourite website.
2.Make sure it opens in a new tab (target="_blank").

5.Images (<img src="" alt="">)

Meaning:

<img> displays an image on the webpage.
src → path to the image.
alt → description of the image (accessibility + SEO)

Example:


        <img src="logo.png" alt="Codex Logo" width="200">

Mini-task:
1.Add an image of a logo or any picture.
2.Write a meaningful alt text.

6.Lists.

A. Unordered List (<ul>)

Meaning: A list without order (bullets).

Example:


        <ul>

          <li>HTML Basics</li>

          <li>CSS Basics</li>

          <li>Javascript Basics</li>

        </ul>

Mini-task: Create a <ul> of your favourite foods.

B. Ordered List (<ol>)

Meaning: A numbered list

Example:


        <ol>

          <li>Learn HTML</li>

          <li>Learn CSS</li>

          <li>Learn Javascript</li>

        </ol>

Mini-task: Create an <ol> of steps you follow every morning.

7.Forms Basics (<input>, <button>)

Meaning: Forms collect input from users.

Example:


        <form>

          <label for="name">Name:</label>

          <input type="text" id="name" placeholder="Enter your name">

          <button type="submit">Submit</button>

        </form>

type="text" → plain text input.
placeholder → hint inside the input.
button type="submit" → sends the form.

Mini-task: Create a contact form with name + email + submit button.

8.Semantic Elements (<header>, <footer>, <section>, <article>)

Header: Usually the top of the page (title, nav).

Footer: Bottom of the page (contact, copyright).

Section: Section of content.

Article: Independent content block.

Example:


        <header>

          <h1>Webwise Frontend Learning</h1>

        </header>

        <section>

          <h2>HTML Basics</h2>

          <p>Learn HTML elements step by step.</p>

        </section>

        <footer>

          <p>Contact: sahny@gmail.com</p>

        </footer>

Mini-task: Create your own page using <header>, <section>, and <footer>.

9.Comments ()

Meaning: Notes inside code, not visible on the page.

Usage: Helps organize code & leave reminders.

Example:


        <!-- This is the main title -->

        <h1>Welcome to Webwise </h1>

        <!-- This section is about HTML basics -->

        <p>HTML helps structure web pages.</p>

Mini-task: Add at least 2 comments in your HTML code explaining what part does.

📘 HTML-BEGINNER LEVEL

1.Headings (<h1> - <h6>)

2.Paragraphs (<p>)

3.Line Break (<br>)

4.Links (<a href="">)

5.Images (<img src="" alt="">)

6.Lists.

7.Forms Basics (<input>, <button>)

8.Semantic Elements (<header>, <footer>, <section>, <article>)

9.Comments ()