Day 4 - HTML Semantics & Forms

Niotechone Marketing Team
November 14, 2025
10:30 am

Learning Objectives (Before the Tutorial)

By the end of this lesson you should be able to:

Understand what Semantic HTML is and why it is essential.
Correctly identify and use HTML5 semantic tags.
Create HTML forms with a variety of input types and attributes.
Understand how forms are submitted and how the data is processed.
Build a basic registration form that includes text, email, and password fields.

Concept Box – Why This Matters

Semantic HTML gives meaning to your web content. Rather than just using a generic <div> tag, semantic tags like <header>, <article>, and <footer> .give descriptive meaning to each section on the page.

Forms are what users will use to interact with your web application, whether that is to sign up, log in, search or submit data. Hence, knowing how to create a form correctly is a necessary skill for every web developer.

1. Semantic HTML — Giving Meaning to Structure

Semantic HTML tags are tags that indicate the purpose of content which allows for better accessibility, SEO, and clearer code

Common Semantic Tags:

<header> – Represents the top of the page, which usually contains navigation or a logo.
<nav> – Indicates a block of navigation links.
<main> –Represents the main content of the page.
<section> – Groups relevant content together.
<article> – Represents independent content, such as a blog post.
<aside> – For related content or ads on the side.
<footer> – Indicates the bottom of the page.

Example:

🌐

<header>
  <h1>Welcome to My Blog</h1>
</header>
<main>
  <article>
    <h2>HTML Basics</h2>
    <p>HTML stands for HyperText Markup Language.</p>
  </article>
</main>
<footer>
  <p>© 2025 My Blog</p>
</footer>

Tip: Using semantic elements is valuable for screen reader and search engine optimization of your page.

Quick Recap — Semantic HTML

Use semantic tags instead of plain <div> .
It improves SEO and accessibility.
It helps keep your code clean and meaningful.

2. HTML Forms — Collecting User Input

A form is an HTML component that gives users a way to enter data and submit it to a server or process it on the client-side.

Basic Structure of a Form:

🌐

<form action='submit.html' method='post'>
  <label for='name'>Name:</label>
  <input type='text' id='name' name='name'>
  <input type='submit' value='Submit'>
</form>

Tip: The ‘action’ indicates where the form data is sent and the ‘method’ indicates how (GET or POST) it is sent.

3. Input Types & Attributes

Different input types are available for your form, each which accepts its own type of data from the user.

Common Input Types:
• text – for single-line input
• email – for email addresses
• password – hides input with dots
• checkbox – for yes/no options
• radio – for multiple-choice options
• submit – to submit the data in the form

Common Attributes:
• placeholder – hint provided inside the input box
• required – makes a field mandatory
• name – assigns a name to the field
• value – defines a default value

4. Practice Example — Simple Registration Form

Example:

🌐

<form action='#' method='post'>
  <label for='name'>Full Name:</label><br>
  <input type='text' id='name' name='name' placeholder='Enter your name' required><br><br>

  <label for='email'>Email:</label><br>
  <input type='email' id='email' name='email' placeholder='Enter your email' required><br><br>

  <label for='password'>Password:</label><br>
  <input type='password' id='password' name='password' placeholder='Enter password' required><br><br>

  <label>Gender:</label><br>
  <input type='radio' name='gender' value='male'> Male
  <input type='radio' name='gender' value='female'> Female<br><br>

  <input type='checkbox' id='agree' name='agree' required>
  <label for='agree'>I agree to terms</label><br><br>

  <input type='submit' value='Register'>
</form>

Tip: To enhance accessibility, always utilize the “label” tag, linking it with “for” and “id” attributes.

Quick Recap — Forms

A form is a method for collecting user data using <form>, <input>, and <label> .
Use the correct input type for the specific data you are requesting.
Be sure to validate your data using attributes like “required” and “email”.

Common Mistakes

Forgetting the “name” attribute — without it, the data cannot be sent.
Forgetting the “for” and “id” linkage between and <label> and <input>.
Not properly setting “method” or “action” attributes.
Using the incorrect input types for the data you need.

Mini Practice Challenges

Create a feedback form collecting name, email, and message.
Add a checkbox to subscribe to a newsletter.
Properly structure your form page using semantic tags.
Give it a go trying to add a reset button that will clear all input fields.

Summary – What You Learned

You have a better understanding of semantic HTML tags and how to use them for better structure. You also learned how to create forms and customize for different input types and attributes.

Reference Links (Practice & Reading)

HTML Semantic Elements — W3Schools: https://www.w3schools.com/html/html5_semantic_elements.asp

HTML Forms — W3Schools: https://www.w3schools.com/html/html_forms.asp

HTML Input Types — W3Schools: https://www.w3schools.com/html/html_form_input_types.asp

HTML Attributes — W3Schools: https://www.w3schools.com/html/html_attributes.asp

LeetCode Practice:
https://leetcode.com/problemset/

GeeksforGeeks HTML Practice:
https://www.geeksforgeeks.org/html-tutorial/

Source code:
https://github.com/niotechoneSoftware/dotnet-developer-roadmap/tree/main/Html-Mastery/Day%204%20-%20HTML%20-%20Semantics%20%26%20Forms

Output

Let's Work Together

Software Development Services

+91 9925 66 8383

Related Tags

Frequently Asked Questions FAQs

What are semantic HTML elements?

Semantic HTML elements are tags that are explicitly defined in terms of purpose and meaning to the browsers and developers. They are <header>, <nav>, <article>, <section> and <footer>. They render web pages more accessible, search engine friendly and maintainable.

What is the significance of semantic HTML to accessibility?

Semantic HTML aids in the interpretation of a webpage by screen readers and other assistive technologies. This enables users with disabilities to navigate content easily, enhancing general accessibility and adherence to web standards such as WCAG.

What is the distinction between semantic and non-semantic elements?

Semantic elements: Be clear about their purpose (e.g., <article> is a self-contained piece of content).

Non-semantic elements: Do not carry meaning (e.g., <div> or <span>).

Semantic tags enhance readability and search engine optimization over the use of generic <div> tags.

What are typical semantic HTML tags?

The following are some commonly used semantic tags:

<header> - Defines the upper part or introduction.
<nav> - Defines navigation menus.
<main>- This is the primary content of a page.
<article> – Refers to autonomous content such as blog posts.
<section> – Groups related content.
<aside> - To place sidebars or secondary information.
<footer>- The bottom or closing part.

What are HTML forms used for?

The user input such as names, emails, feedback or payment details are collected using HTML forms. They are needed in interactive features like login systems, contact pages, and registration portals.

Our Story

Company

Services

Trusted By

Trusted By

Expertise

Trusted By

Trusted By

Let's Discuss - Requirements

Let's Discuss - Requirements

Let's Discuss - Requirements

Technologies

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Let’s Discuss – Requirements