HTML chevron_right Basic HTML Elements

Basic HTML Elements

calendar_today schedule 4 min read

1. Welcome and Icebreaker:

  • Icebreaker: “What is your favorite website, and what do you like about its design?”

2. Outline the Session:

  • Agenda:
    • Headings and paragraphs
    • Lists (ordered and unordered)
    • Hyperlinks
  • Learning Outcomes:
    • Use basic text elements in HTML
    • Create lists and links
  • Structure:
    • Theory, live coding, and hands-on practice
    • Interactive Q&A

3. Concept Explanation:

HTML (HyperText Markup Language) is the standard language for creating web pages. It uses elements, represented by tags, to structure and present content. Here are the most common basic elements:

  • Headings (<h1> to <h6>): Indicate the importance of text. <h1> is the most important, usually used for the main title, while <h6> is the least important.
  • Paragraphs (<p>): Used to group sentences and create blocks of text.
  • Lists:
    • Unordered List (<ul>): Displays items with bullet points.
    • Ordered List (<ol>): Displays items with numbers.
    • List Item (<li>): Represents an item in a list.
  • Hyperlinks (<a>): Used to link to other pages or resources. The href attribute specifies the destination URL.

Why use these elements?

  • They provide structure and meaning to your content, making it easier for browsers and assistive technologies to interpret your page.
  • Proper use of headings and lists improves accessibility and SEO (Search Engine Optimization).

Best Practices:

  • Use headings in order (do not skip levels).
  • Use paragraphs for blocks of text, not just single sentences.
  • Use lists for related items, not for layout.
  • Always close your tags.

Common Pitfalls:

  • Forgetting to close tags (e.g., <p>Text instead of <p>Text</p>).
  • Using headings out of order (e.g., jumping from <h1> to <h4>).
  • Using inline elements (like <span>) for block content.

4. Live Coding Demonstration:

Let’s see how these elements look in practice:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic HTML Elements Example</title>
</head>
<body>
  <h1>Main Heading</h1>
  <h2>Subheading Example</h2>
  <p>This is a paragraph of text. Paragraphs are used to group related sentences together and provide structure to your content.</p>
  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>
  <ol>
    <li>Step one</li>
    <li>Step two</li>
    <li>Step three</li>
  </ol>
  <a href="https://www.example.com">Visit Example</a>
</body>
</html>

Step-by-step:

  • Use headings for titles and sections.
  • Use paragraphs for blocks of text.
  • Use lists for grouping related items.
  • Use <a> for links (with href attribute).

Best Practice: Use headings in order (do not skip levels). Common Pitfall: Forgetting to close tags or using inline elements for block content.

5. Hands-On Practice: Tasks and Challenges

Exercise 1: Create Your Profile Page

Follow these steps to practice using basic HTML elements:

  1. Create a new HTML file named my-profile.html.
  2. Add a main heading with your name using the <h1> tag.
  3. Write a paragraph about your favorite hobby using the <p> tag.
  4. Create an unordered list (<ul>) of three things you want to learn about HTML. Each item should use the <li> tag.
  5. Add a hyperlink (<a>) to your favorite website. Make sure the link opens in a new tab by using target="_blank" and rel="noopener noreferrer" for security.
  6. Save and open your file in a browser to see the result.

Starter Code Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Profile</title>
</head>
<body>
  <h1>Your Name</h1>
  <p>Write about your favorite hobby here.</p>
  <ul>
    <li>Thing 1 you want to learn</li>
    <li>Thing 2 you want to learn</li>
    <li>Thing 3 you want to learn</li>
  </ul>
  <a href="https://yourfavorite.site" target="_blank" rel="noopener noreferrer">Visit my favorite website</a>
</body>
</html>

Bonus Challenge:

  • Add a second heading (<h2>) for a new section called “My Learning Goals”.
  • Use an ordered list (<ol>) to list three goals you have for learning HTML.

Example:

<h2>My Learning Goals</h2>
<ol>
  <li>Goal 1</li>
  <li>Goal 2</li>
  <li>Goal 3</li>
</ol>

Tips:

  • Use headings in order (do not skip levels).
  • Always close your tags.
  • Use lists for related items, not for layout.
  • Use rel="noopener noreferrer" with target="_blank" for security when opening links in a new tab.

Common Pitfalls:

  • Forgetting to close tags (e.g., <p>Text instead of <p>Text</p>).
  • Using headings out of order (e.g., jumping from <h1> to <h4>).
  • Using inline elements (like <span>) for block content.

Feel free to ask questions or share your code for feedback!