HTML Elements Study Guide
🔹 Block-level Elements ()تحتل سطر كامل
<div> – General container used for grouping elements
Example:
<div>
<h2>About Me</h2>
<img src="[Link]" alt="My photo" width="150">
<p>Hello! I'm a web developer who loves building
websites.</p>
</div>
<p> – Paragraph of text
Example:
<p>I enjoy learning frontend technologies like HTML, CSS,
and JavaScript.</p>
<h1> to <h6> – Headings from largest to smallest
Example:
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<ul> – Unordered list (bullets)
Example:
<ul>
<li>HTML Basics</li>
<li>CSS Styling</li>
<li>JavaScript Programming</li>
</ul>
<ol> – Ordered list (numbers)
Example:
<ol>
<li>Register an account</li>
<li>Verify your email</li>
<li>Start learning</li>
</ol>
<li> – List item (used inside <ul> or <ol>)
Example:
<li>Responsive Design</li>
<table> – Data table
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Role</th>
</tr>
<tr>
<td>Ahmed</td>
<td>Developer</td>
</tr>
</table>
<thead>, <tbody>, <tfoot> – Table sections
Example:
<table border="1">
<thead>
<tr><th>Course</th><th>Duration</th></tr>
</thead>
<tbody>
<tr><td>HTML</td><td>2 Weeks</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">End of Table</td></tr>
</tfoot>
</table>
<tr> – Table row
Example:
<tr>
<td>Lesson 1</td>
<td>Introduction</td>
</tr>
<td> – Table data cell
Example:
<td>Full-Stack Developer</td>
<th> – Table header cell
Example:
<th>Course Name</th>
<form> – Input form
Example:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Subscribe</button>
</form>
<header> – Top section of a webpage
Example:
<header>
<h1>My Portfolio</h1>
<p>Welcome to my personal website!</p>
</header>
<footer> – Bottom section of a webpage
Example:
<footer>
<p>© 2025 Ahmed Riyad. All rights reserved.</p>
</footer>
<section> – Semantic block of related content
Example:
<section>
<h2>Projects</h2>
<p>Here are some of the web applications I've worked
on.</p>
</section>
<nav> – Navigation links
Example:
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
🔸 Inline Elements ()تظهر في نفس السطر
<a> – Hyperlink
Example:
<a href="[Link] target="_blank">Visit
Google</a>
<img> – Display an image
Example:
<img src="[Link]" alt="Website Logo" width="100">
<span> – Inline container for styling part of text
Example:
<p>This is a <span style="color: blue;">blue word</span> in
a sentence.</p>
<strong> – Important/bold text
Example:
<p>Please <strong>read the instructions carefully</strong>
before continuing.</p>
<em> – Emphasized/italic text
Example:
<p>This product is <em>highly recommended</em> for
beginners.</p>
<label> – Text label for a form input
Example:
<label for="username">Username:</label>
<input type="text" id="username">
<input> – Input field
Example:
<input type="password" placeholder="Enter your
password">
<textarea> – Multi-line text field
Example:
<textarea rows="4" cols="30">Write your feedback
here...</textarea>
<select> and <option> – Dropdown menu
Example:
<select>
<option>Frontend</option>
<option>Backend</option>
<option>Full Stack</option>
</select>
<br> – Line break
Example:
Line 1<br>Line 2<br>Line 3
<i> – Italic text
Example:
<i>This word is in italics</i>
<b> – Bold text
Example:
<b>This word is bold</b>