Scribd
Upload
27 views3 pages

Essential HTML Codes Guide

This document serves as a comprehensive guide to HTML coding, covering basic structure, head section tags, text formatting, links, images, lists, tables, forms, multimedia, layout tags, semantic HTML5 tags, inline frames, buttons, inputs, comments, HTML entities, and linking CSS and JavaScript. Each section provides sample code snippets for practical understanding. The guide is designed for beginners looking to learn HTML fundamentals.

Uploaded by

mianmhassaan949
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
27 views3 pages

Essential HTML Codes Guide

This document serves as a comprehensive guide to HTML coding, covering basic structure, head section tags, text formatting, links, images, lists, tables, forms, multimedia, layout tags, semantic HTML5 tags, inline frames, buttons, inputs, comments, HTML entities, and linking CSS and JavaScript. Each section provides sample code snippets for practical understanding. The guide is designed for beginners looking to learn HTML fundamentals.

Uploaded by

mianmhassaan949
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Complete HTML Codes Guide

1. Basic HTML Structure


<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>

2. Head Section Tags


<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="description" content="Example HTML Page">
<meta name="keywords" content="HTML, Tutorial, Example">
<meta name="author" content="Your Name">
<link rel="stylesheet" href="[Link]">
<script src="[Link]"></script>
</head>

3. Text Formatting Tags


<h1>Heading</h1>
<p>Paragraph text</p>
<b>Bold</b> <i>Italic</i> <u>Underline</u> <br> <hr>

4. Links & Images


<a href="[Link] target="_blank">Visit Website</a>
<img src="[Link]" alt="My Image" width="200" height="150">

5. Lists
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>

6. Tables
<table border="1">
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Ali</td><td>22</td></tr>
</table>

7. Forms
<form action="[Link]" method="post">
<label>Name:</label>
<input type="text" name="username"><br>
<label>Password:</label>
<input type="password" name="password"><br>
<input type="submit" value="Login">
</form>

8. Multimedia
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>

9. Div, Span, and Layout Tags


<div style="background-color: lightgray; padding: 20px;">
<h2>Box Section</h2>
<p>This is inside a div.</p>
</div>
<span style="color: red;">Inline text</span>

10. Semantic HTML5 Tags


<header>Header Section</header>
<nav>Navigation Bar</nav>
<main>Main Content</main>
<article>Article Content</article>
<section>Section Content</section>
<aside>Sidebar</aside>
<footer>Footer Info</footer>

11. Inline Frame (iFrame)


<iframe src="[Link] width="600" height="400"></iframe>

12. Buttons and Inputs


<button type="button" onclick="alert('Hello!')">Click Me</button>
<input type="checkbox" checked> Check me
<input type="radio" name="option"> Option
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>

13. Comments
<!-- This is a comment -->

14. HTML Entities


<p>&copy; 2025 MySite</p>
<p>Less than: &lt; Greater than: &gt;</p>

15. Links to CSS and JS


<link rel="stylesheet" href="[Link]">
<script src="[Link]"></script>

You might also like