Hey everyone 👋
Welcome back to Day 7 of my web development journey!
Today was all about exploring some super-interesting and visual parts of HTML — from adding images and videos to creating forms and understanding meta tags.
Let’s dive right in! 🚀
🖼️ 1. Image Tag <img>
I started with the image tag — one of the simplest yet most used HTML tags.
It’s used to display images on a web page.
Syntax:
<img src="image.jpg" alt="Beautiful mountain view" width="400" height="250" />
Attributes:
-
src: Image source or file path -
alt: Alternative text (important for SEO and accessibility) -
width&height: Define image size
📸 [Insert Screenshot Demo Here]
🎥 2. Video Tag <video>
Next up, I played with the video tag — and this one’s quite fun!
It helps embed videos directly into a webpage.
Syntax:
<video src="demo.mp4" controls autoplay muted height="300"></video>
Key Attributes:
-
controls: Adds play/pause buttons -
autoplay: Starts playing automatically -
muted: Keeps the video silent (helps when using autoplay) -
height: Adjusts video height
🎬 [Demo Screenshot: Embedded Video Example]
🎧 3. Audio Tag <audio>
Then I tried the audio tag, which lets you embed sounds or music directly in your page.
Syntax:
<audio src="sound.mp3" controls muted></audio>
Attributes:
-
controls: Lets users play/pause the audio -
muted: Useful to prevent sudden loud playback (better UX)
🔊 [Screenshot: Audio Player Example]
🧾 4. Forms & Input Fields
Now comes one of the most powerful parts of HTML — forms!
Forms are used to collect user input such as login details, feedback, or survey responses.
I learned about various input types and their uses 👇
<form>
<input type="text" placeholder="Enter your name" />
<input type="email" placeholder="Enter your email" />
<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female" /> Female
<input type="submit" value="Submit" />
</form>
🧩 Common Input Types:
-
text,email,password,date checkbox-
radio(used for single-choice options like gender) -
color,week,month
💡 I also learned about the placeholder attribute — it guides users about what to type inside input boxes.
📸 [Form Screenshot Demo]
🪶 5. <details> and <summary> Tag
This combo is really interesting — perfect for collapsible content like FAQs or hidden notes.
Example:
<details>
<summary>Click to read more</summary>
<p>This is hidden content that appears when you click above.</p>
</details>
🪄 Simple, elegant, and great for improving user experience.
🌐 6. Meta Tags
Lastly, I explored meta tags, which go inside the <head> section of an HTML document.
They provide important information about your webpage — like encoding, viewport settings, and SEO details.
Example:
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Learning HTML basics on my dev journey" />
<meta name="keywords" content="HTML, Web development, Learn coding" />
⚠️ Fun fact:
Google no longer prioritizes meta keywords because they were often misused — like people adding irrelevant or adult words just to appear in unrelated searches. (Imagine searching “toys” and finding “sex toys” — awkward 😅)
🕉️ Final Thoughts
Today was super productive!
I got a much better grip on HTML’s visual and interactive elements.
From embedding multimedia 🎥 to creating forms 🧾 and understanding meta tags 🌐 — it finally feels like I’m giving life to my web pages.
Can’t wait for Day 8, where I’ll dive into CSS styling and make everything look amazing! 🎨
💬 Question of the Day:
Which HTML tag do you find most fun to use — image, video, or forms?
Top comments (0)