Boost Your HTML Skills Tips, Tutorials, and Tricks You Need to Know
Vishal Singh
Basic Structure of an HTML Document 🏗️📄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a simple HTML structure.</p>
</body>
</html>
Text Formatting Elements ✍️✨
These elements help format text
Headings 📝
HTML has six levels of headings, <h1> to <h6>.
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>
Paragraphs 📜
Used to define text blocks.
<p>This is a paragraph.</p>
Bold and Italic Text 💪✨
<b>Bold Text</b> or <strong>Bold Text</strong>
<i>Italic Text</i> or <em>Italic Text</em>
Line Breaks and Horizontal Rules 🌐📏
<p>First Line<br>Second Line</p>
<hr>
Links and Images 🔗🖼️
- Links
<a href="https://www.example.com" target="_blank">Visit Example</a>
Images
<img src="image.jpg" alt="Description of Image" width="300">
Lists 📋
- Ordered List
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>
- Unordered List
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
Tables 📊
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
Forms 📝
Used to collect user inputs.
- Form Example
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<button type="submit">Submit</button>
</form>
Semantic Elements 🌐
Semantic elements define the structure and meaning of the content.
- Examples
<header>Header Section</header>
<main>Main Content</main>
<footer>Footer Section</footer>
<section>A Section</section>
<article>An Article</article>
Multimedia Elements 🎥🎵
- Videos
<video controls width="400">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
- Audio
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Input Types ⌨️
HTML forms support various input types.
<input type="text" placeholder="Text">
<input type="number" placeholder="Number">
<input type="password" placeholder="Password">
<input type="date">
<input type="color">
<input type="checkbox"> Checkbox
<input type="radio" name="group"> Radio
Attributes 🏷️
Attributes provide additional information about elements.
<a href="https://example.com" target="_blank" title="Visit Example">Example Link</a>
<img src="image.jpg" alt="Image Description" width="200">
Div and Span 🏷️
- Div (Block-Level Container)
<div>
<h1>Div Example</h1>
<p>This is inside a div.</p>
</div>
Span (Inline Container)
<p>This is a <span style="color: red;">highlighted</span> word.</p>
Metadata in <head>
Metadata provides information about the document.
<meta name="author" content="Vishal Singh">
<meta name="description" content="Learn HTML from scratch.">
<meta name="keywords" content="HTML, Web Development, Tutorial">
Other Elements 🧩
Iframe
Embed external content.
<iframe src="https://example.com" width="600" height="400"></iframe>
Button 🔘
<button onclick="alert('Button Clicked!')">Click Me</button>
Conclusion ✅
HTML is the foundation of web development, offering a structured way to create and organize content on the web. By mastering each element and understanding their usage, you can build powerful and accessible web pages. Continue exploring, experimenting, and building to strengthen your skills. Happy coding! 🚀
This guide covers everything you need to know to create a fully functional web page from scratch! 🌐✨
For more topics, check out my other blogs and expand your web development knowledge! 🚀✨
Subscribe to my newsletter
Read articles from Vishal Singh directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by