Hello! Welcome to Tecky AaryaN.
1. HTML5 Semantic Tags
Semantic tags are like giving names to different parts of your webpage, making it easier for browsers and developers to understand your code. Instead of using generic <div>
tags everywhere, HTML5 introduced tags like <header>
, <footer>
, <article>
, and <section>
.
Why Wa Use Semantic Tags?
- Makes your code cleaner and easier to read.
- Helps search engines (SEO) understand your content better.
- Improves accessibility for screen readers.
Example:
<header> <h1>My Website</h1> <nav> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </nav> </header> <section> <h2>About Us</h2> <p>We provide web development tutorials for beginners.</p> </section> <footer> <p>© 2025 Example </p> </footer>
What’s happening here?
<header>
holds the website title and navigation links.<section>
contains the main content (in this case, "About Us").<footer>
has copyright info.
View Demo
2. Forms with New Input Types
Forms are everywhere: login pages, contact forms, and sign-up sheets. HTML5 made forms smarter by adding new input types like email
, number
, and date
.
Example:
<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> <label for="dob">Date of Birth:</label> <input type="date" id="dob" name="dob"> <button type="submit">Submit</button> </form>
Why Use These Input Types?
- The browser automatically validates fields like email.
- It shows a calendar picker for dates, saving coding effort.
View Demo
3. Audio and Video Tags
Adding audio and video is now as simple as adding an image. No need for plugins like Flash anymore.
Audio Example:
<audio controls> <source src="music.mp3" type="audio/mpeg"> Your browser does not support audio. </audio>
View Demo
Video Example:
<video controls width="355"> <source src="video.mp4" type="video/mp4"> Your browser does not support video. </video>
Why Use These Tags?
- The
controls
attribute automatically adds play, pause, and volume buttons. - Your media works on almost all modern browsers without extra tools.
View Demo
4. HTML Tables for Data
Tables are useful for displaying data like schedules, pricing plans, or comparison charts.
Example:
<table border="1"> <thead> <tr> <th>Product</th> <th>Price</th> <th>Available</th> </tr> </thead> <tbody> <tr> <td>Phone</td> <td>$699</td> <td>Yes</td> </tr> <tr> <td>Laptop</td> <td>$999</td> <td>No</td> </tr> </tbody> </table>
What’s Happening Here?
<thead>
groups the table header row (titles like "Product" and "Price").<tbody>
contains the actual data.<th>
is for headers,<td>
is for table data.
View Demo
5. Inline vs. Block Elements
This is where many beginners get confused. Let’s clear it up.
Block Elements:
Take up the full width of the page and start on a new line.
- Examples:
<div>
,<p>
,<h1>
Inline Elements:
Only take up as much width as the content inside them and stay in the same line.
- Examples:
<span>
,<a>
,<strong>
Example:
<div> <p>This is a block element. It takes up the whole width.</p> <span>This is inline</span> <span>and stays in the same line.</span> </div>
View Demo
Key Tip:
Use block elements for layout and inline elements for styling small parts of text or content.
This is Level 2 For Beginner I will Make level 3 Soon On HTML with CSS introduction .