HTML Elements

An HTML element consists of an opening tag, content, and a closing tag. Elements can be nested inside one another.

Element Structure

<tag attribute="value">Content</tag>

Example

<p class="text">This is a paragraph.</p>

Types of Elements

1. Block Elements

They occupy the full available width.

<div>Division</div>
<p>Paragraph</p>
<h1>Heading 1</h1>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<table>
    <tr><td>Cell</td></tr>
</table>

2. Inline Elements

They only take up the width they need.

<span>Text</span>
<a href="#">Link</a>
<strong>Bold</strong>
<em>Italic</em>
<img src="photo.jpg" alt="Image">

3. Self-Closing Elements

They don't need a closing tag.

<img src="photo.jpg" alt="Image">
<br>
<hr>
<input type="text">
<meta charset="UTF-8">

Semantic Elements (HTML5)

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

Case Study: Campus System Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Campus Information System</title>
</head>
<body>
    <header>
        <h1>Technology University</h1>
        <nav>
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="academic.html">Academic</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>Latest News</h2>
            <section>
                <h3>New Student Registration</h3>
                <p>New student registration opens on January 1.</p>
            </section>
            <section>
                <h3>Odd Semester Graduation</h3>
                <p>The graduation ceremony will be held on February 15.</p>
            </section>
        </article>

        <aside>
            <h3>Important Info</h3>
            <p>The even semester course schedule is now available.</p>
        </aside>
    </main>

    <footer>
        <p>&copy; 2024 Technology University</p>
    </footer>
</body>
</html>

Everyday Case Study

Case: A developer needs to create a student profile card.

<div class="card">
    <img src="photo.jpg" alt="Profile photo">
    <h3>John Smith</h3>
    <p>Student ID: 1234567890</p>
    <p>Informatics Engineering - Class of 2020</p>
    <p>GPA: 3.75</p>
</div>

Nesting Elements

<div>
    <h2>Title</h2>
    <p>
        Paragraph with <strong>bold</strong> and <em>italic</em>.
    </p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</div>

Best Practices

1. Use semantic elements: For meaningful structure
2. Correct nesting: Don't nest in an overlapping way
3. Block vs inline: Understand the difference
4. Self-closing tags: Use them correctly
5. Validation: Make sure your HTML is valid

Summary

HTML elements are the building blocks of web pages. Understand the different element types and how to nest them correctly.