SEMANTIC MARKUPS
ALONG WITH INPUT FORMS
Introduction
Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, <article> clearly indicates that the content inside is an article, whereas a <div> tag could contain anything. Using semantic elements can improve the readability of the code and enhance the SEO and accessibility of the web page. Additionally, input forms are essential for collecting user data. This section will cover semantic markups and the creation of input forms using HTML
Semantic Markup
Semantic elements describe the purpose of the element and the type of content that is inside them. Here are some commonly used semantic elements:
1. header:
Represents introductory content or a set of navigational links.
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#about”>About</a></li>
<li><a href=”#contact”>Contact</a></li>
</ul>
</nav>
</header>
2. nav:
Defines a set of navigation links.
<nav>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#services”>Services</a></li>
<li><a href=”#contact”>Contact</a></li>
</ul>
</nav>
3. section:
Defines a section in a document.
<section>
<h2>About Us</h2>
<p>We are a company that values…</p>
</section>
4. article:
Specifies independent, self-contained content.
<article>
<h2>Article Title</h2>
<p>This is an article about…</p>
</article>
5. aside:
Defines content aside from the main content (like a sidebar).
<aside>
<h2>Related Links</h2>
<ul>
<li><a href=”#link1″>Link 1</a></li>
<li><a href=”#link2″>Link 2</a></li>
</ul>
</aside>
6. footer:
Defines a footer for a document or section.
<footer>
<p>© 2024 My Website</p>
</footer>
7. figure and figcaption:
Used to markup illustrations, diagrams, photos, etc., and their captions.
<figure>
<img src=”image.jpg” alt=”Description of image”>
<figcaption>Figure 1: An example image.</figcaption>
</figure>
Creating Input Forms
1. Basic Form Structure:
<form action=”/submit” method=”post”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name” required>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” required>
<input type=”submit” value=”Submit”>
</form>
2. Form Elements:
Text Input: Used for single-line text input.
<label for=”username”>Username:</label>
<input type=”text” id=”username” name=”username”>
Password Input: Used for password fields.
<label for=”password”>Password:</label>
<input type=”password” id=”password” name=”password”>
Email Input: Used for email addresses.
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”>
Radio Buttons: Used for selecting one option from a set.
<p>Gender:</p>
<input type=”radio” id=”male” name=”gender” value=”male”>
<label for=”male”>Male</label>
<input type=”radio” id=”female” name=”gender” value=”female”>
<label for=”female”>Female</label>
Checkboxes: Used for selecting multiple options.
<p>Hobbies:</p>
<input type=”checkbox” id=”hobby1″ name=”hobby” value=”reading”>
<label for=”hobby1″>Reading</label>
<input type=”checkbox” id=”hobby2″ name=”hobby” value=”traveling”>
<label for=”hobby2″>Traveling</label>
Dropdown List: Used for selecting an option from a list.
<label for=”country”>Country:</label>
<select id=”country” name=”country”>
<option value=”pakistan”>Pakistan</option>
<option value=”india”>India</option>
<option value=”usa”>USA</option>
</select>
Submit Button: Used to submit the form data.
<input type=”submit” value=”Submit”>
Example Form
Here’s a complete example of an HTML form using various input types:
<form action=”/submit” method=”post”>
<fieldset>
<legend>Personal Information</legend>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name” required>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” required>
<label for=”password”>Password:</label>
<input type=”password” id=”password” name=”password” required>
<p>Gender:</p>
<input type=”radio” id=”male” name=”gender” value=”male”>
<label for=”male”>Male</label>
<input type=”radio” id=”female” name=”gender” value=”female”>
<label for=”female”>Female</label>
<p>Hobbies:</p>
<input type=”checkbox” id=”hobby1″ name=”hobby” value=”reading”>
<label for=”hobby1″>Reading</label>
<input type=”checkbox” id=”hobby2″ name=”hobby” value=”traveling”>
<label for=”hobby2″>Traveling</label>
<label for=”country”>Country:</label>
<select id=”country” name=”country”>
<option value=”pakistan”>Pakistan</option>
<option value=”india”>India</option>
<option value=”usa”>USA</option>
</select>
<input type=”submit” value=”Submit”>
</fieldset>
</form>
Additional Resources
Articles:
- “HTML Forms Guide”
- “Semantic HTML5 Guide”
Videos:
HTML Forms Tutorial on YouTube
Semantic HTML5 Elements on YouTube by freeCodeCamp.org
Conclusion
Understanding and using semantic markups enhances the structure and accessibility of web pages, while forms are crucial for user interaction. Practice creating forms and using semantic elements to build well-structured and functional web pages.
