Skillversitas

Basic HTML Tags

Basic HTML tags are the foundation for creating web pages. Each tag has a specific function and usage.

HTML Tag Structure

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

Example

<p class="intro">This is a paragraph.</p>
<a href="https://google.com">Link</a>
<img src="photo.jpg" alt="Image">

Document Tags

DOCTYPE

<!DOCTYPE html>

HTML

<html lang="en">
    <!-- HTML content -->
</html>

<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
</head>

Body

<body>
    <!-- Visible content -->
</body>

Text Tags

Heading

<h1>One</h1>
<h2>Two</h2>
<h3>Three</h3>
<h4>Four</h4>
<h5>Five</h5>
<h6>Six</h6>

Paragraph

<p>This is a paragraph.</p>

Line Break

<p>First line<br>Second line</p>

Horizontal Rule

<hr>

Case Study: Campus Page Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Portal</title>
</head>
<body>
    <header>
        <h1>Student Portal</h1>
        <p>Technology University Academic Information System</p>
    </header>

    <hr>

    <main>
        <h2>Welcome</h2>
        <p>Welcome to the student portal.</p>

        <h3>Main Menu</h3>
        <p>Use the menu below to access academic services.</p>
    </main>

    <hr>

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

Everyday Case Study

Case: A developer needs to create a lecturer profile page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lecturer Profile</title>
</head>
<body>
    <h1>Lecturer Profile</h1>

    <h2>Dr. Susanti, M.Kom.</h2>
    <p>Informatics Engineering Department</p>

    <hr>

    <h3>Education</h3>
    <p>Ph.D. Computer Science - University of Indonesia (2015)</p>
    <p>M.Sc. Informatics Engineering - ITB (2010)</p>
    <p>B.Sc. Informatics Engineering - ITS (2008)</p>

    <hr>

    <h3> Courses Taught</h3>
    <p>Web Programming</p>
    <p>Database</p>
    <p>Algorithms and Data Structures</p>
</body>
</html>

Best Practices

  1. Use headings hierarchically: h1 → h2 → h3
  2. One h1 per page: For SEO
  3. Use semantic elements: <header>, <main>, <footer>
  4. Close all tags: Except self-closing tags
  5. Correct nesting: Nest tags properly

Summary

Basic HTML tags are the foundation for creating web pages. Understand the function of each tag and use it correctly.