Introduction
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It structures content using tags.
Basic Structure
Every HTML document starts with a <!DOCTYPE html>
declaration and contains <html>
, <head>
, and <body>
elements.
Your Page Title
Headings
Use <h1>
to <h6>
for headings. They define the hierarchy of your content.
<h1>Main Heading</h1>
<h2>Subheading</h2>
Paragraphs
Use <p>
to define paragraphs of text.
<p>This is a paragraph of text.</p>
Links
Links are created using the <a>
tag. You can link to other websites or pages within your site.
<a href="https://www.example.com">Visit Example</a>
Lists
Lists can be ordered (<ol>
) or unordered (<ul>
). Use <li>
for list items.
Ordered List:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Unordered List:
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
Images
Display images using the <img>
tag. Provide the image source (src
) and alternate text (alt
).
<img src="image.jpg" alt="Description of the image">
Forms
Use the <form>
tag to create input forms. Include various form controls like text inputs, checkboxes, and buttons.
<form action="submit-form.php" 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="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Submit</button>
</form>
Tables
Use the <table>
tag to create tables. Organize data using <tr>
(table row), <th>
(table header), and <td>
(table data) elements.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Semantic Elements
Use semantic elements like <header>
, <nav>
, <main>
, <article>
, <section>
, and <footer>
to give meaning to the structure of your web page.
<header>
<h1>Website Title</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>Welcome to Our Website</h2>
<p>Learn, explore, and enjoy!</p>
</section>
<article>
<h3>Latest News</h3>
<p>Read about exciting updates.</p>
</article>
</main>
<footer>
<p>Copyright © 2023. All rights reserved.</p>
</footer>
Audio and Video
Embed audio and video using the <audio>
and <video>
tags. Include source and control options.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>