Dev.to

Master HTML in 2 min.

Ready to learn HTML quickly and effectively? This guide covers everything you need—from structure to semantics—with code snippets and explanations for every tag. Want the full beginner-to-pro HTML, CSS & JavaScript ebook? Grab it here: codewithdhanian.gumroad.com/l/ydhfb 1. Basic HTML Structure This is the boilerplate code to start any HTML document. My First Page Welcome to My Website 2. Head Elements Used to include metadata, styles, and scripts. Portfolio body { font-family: Arial, sans-serif; } 3. Text Formatting Tags Main Heading This is a bold and italic sentence. Highlighted text Smaller font "This is a quoted text." 4. Lists: Ordered, Unordered & Description HTML CSS First Second HTML HyperText Markup Language 5. Links and Anchor Tags Open Google Download Resume Email Me 6. Images with Attributes 7. Tables: Structuring Data ProductPrice Pen$1 Notebook$2 8. Forms: Collecting Input Name: Message: Gender: Male Female Submit 9. Embedding Media Your browser does not support the video tag. 10. Semantic HTML Tags My Blog Home About Article Title This is a blog post. © 2025 My Blog 11. Inline vs Block Elements Block elements start on a new line. This is a block-level element. Paragraph is also block-level. Inline elements do not start on a new line. This is inline Link is also inline 12. Global Attributes 13. Deprecated Tags (Avoid These!) Centered Text Old Way of Styling 14. Accessibility & SEO Tips Use on images: Use headings logically: Main Title Section Title Subsection Use ARIA roles if needed: ... BONUS: Get the Full eBook This article is just the tip of the iceberg. Unlock your full potential with "HTML, CSS & JavaScript for Web Developers" Packed with examples, practice projects, and cheat sheets for rapid learning! Download Now: codewithdhanian.gumroad.com/l/ydhfb

Apr 24, 2025 - 11:46
 0
Master HTML in 2 min.

Ready to learn HTML quickly and effectively? This guide covers everything you need—from structure to semantics—with code snippets and explanations for every tag.

Want the full beginner-to-pro HTML, CSS & JavaScript ebook?

Grab it here: codewithdhanian.gumroad.com/l/ydhfb

1. Basic HTML Structure

This is the boilerplate code to start any HTML document.


 lang="en">

   charset="UTF-8">
  </span>My First Page<span class="nt">


  
Welcome to My Website

2. Head Elements

Used to include metadata, styles, and scripts.


  </span>Portfolio<span class="nt">
   name="viewport" content="width=device-width, initial-scale=1.0">
   rel="stylesheet" href="styles.css">

3. Text Formatting Tags 

Main Heading


This is a bold and italic sentence.
Highlighted text
Smaller font

"This is a quoted text."

4. Lists: Ordered, Unordered & Description 

    
  
  • HTML
    • 
  
  • CSS
    • 




    
  
  1. First
    2. 
  
  2. Second
    3. 





  
HTML

  
HyperText Markup Language

5. Links and Anchor Tags 

 href="https://google.com" target="_blank">Open Google
 href="resume.pdf" download>Download Resume
 href="mailto:you@example.com">Email Me

6. Images with Attributes 

 src="photo.jpg" alt="A scenic view" width="400" loading="lazy">

7. Tables: Structuring Data 

 border="1">
  
    ProductPrice
  
  
    Pen$1
    Notebook$2

8. Forms: Collecting Input 

 action="/submit" method="POST">
   for="name">Name:
   type="text" id="name" name="name" placeholder="Your Name" required>

   for="msg">Message:
   id="msg" name="message" rows="4">

   for="gender">Gender:
   id="gender" name="gender">
     value="male">Male
     value="female">Female
  

   type="submit">Submit

9. Embedding Media 

 width="320" height="240" controls>
   src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.


 controls>
   src="sound.mp3" type="audio/mpeg">

10. Semantic HTML Tags 


  
My Blog








  

    

      
Article Title

      
This is a blog post.
    

  






  
© 2025 My Blog

11. Inline vs Block Elements

  • Block elements start on a new line. 
This is a block-level element.


Paragraph is also block-level.
  • Inline elements do not start on a new line. 
This is inline
 href="#">Link is also inline

12. Global Attributes 

 id="main" class="container" data-user="123" hidden lang="en" style="color:blue;">

13. Deprecated Tags (Avoid These!) 



Centered Text

 color="blue">Old Way of Styling
 src="music.mid">

14. Accessibility & SEO Tips

  • Use on images: 
 src="logo.png" alt="Company Logo">
  • Use headings logically: 
Main Title


Section Title


Subsection
  • Use ARIA roles if needed: 
 role="navigation">...

BONUS: Get the Full eBook

This article is just the tip of the iceberg.

Unlock your full potential with "HTML, CSS & JavaScript for Web Developers"

Packed with examples, practice projects, and cheat sheets for rapid learning!

Download Now:

codewithdhanian.gumroad.com/l/ydhfb