HTML Basics — ScholarScript

1. Document Structure

Every HTML document starts with a <!DOCTYPE html> declaration that tells the browser to use HTML5. The <head> section contains metadata, and <body> holds the visible content.

                    Basic HTML template
                    
                

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="stylesheet" href="style/style.css">
    <script src="js/app.js" defer></script>
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>
                

💡 Tip: The defer attribute on <script> makes the browser load the JS file without blocking HTML parsing. The script runs after the page is fully loaded.

<!DOCTYPE html> — declares the document as HTML5
lang="en" — specifies the page language for accessibility
charset="UTF-8" — supports all international characters
viewport meta — enables proper scaling on mobile devices

2. Headings & Paragraphs

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). Each page should have exactly one <h1>.

                    Headings and text
                    
<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Sub-section Heading</h3>

<p>This is a paragraph of text. You can write
   as much content as you need here.</p>

<p>Use <strong>bold text</strong> for emphasis
   and <em>italic text</em> for subtle stress.</p>

3. Building a Navigation Bar

A navigation bar is typically placed inside a <header> element using the <nav> tag. Links are organized in an unordered list for proper semantics.

                    Navigation example
                    
                

<header>
    <div class="nav-container">
        <a href="#" class="logo">BRAND NAME</a>

        <nav>
            <ul>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#gallery">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Reviews</a></li>
                <li>
                    <a href="#" class="social-icon">
                        <img src="instagram.png"
                              alt="Instagram">
                    </a>
                </li>
            </ul>
        </nav>

        <a href="#" class="btn-cta">Get Started</a>
    </div>
</header>
                

<header> — semantic element for the page header
<nav> — indicates a navigation section
<ul> / <li> — unordered list for menu items
class="btn-cta" — CSS class for the call-to-action button

4. Hero Section

A hero section is the large banner at the top of a page. It usually contains a main heading, a short description, and action buttons. Using <section> gives it proper semantic meaning.

                    Hero section
                    
                

<section class="hero">
    <div class="hero-content">
        <h1>Welcome to Our Business</h1>
        <p>We create handcrafted furniture and
           interiors from solid wood with care
           and precision since 1998.</p>

        <div class="hero-buttons">
            <a href="#" class="btn-cta">
                Get a Quote
            </a>
            <a href="#gallery" class="btn-ghost">
                View Our Work
            </a>
        </div>
    </div>
</section>
                

<section> — groups related content into a standalone section
<h1> — main heading, should appear only once per page
class="btn-cta" — primary call-to-action button
class="btn-ghost" — secondary button with a transparent background

5. Links & Images

The <a> tag creates hyperlinks between pages or sections. The <img> tag embeds images. Always include an alt attribute for accessibility.

                    Links and images
                    
                

<!-- External link -->
<a href="https://example.com">Visit Example</a>

<!-- Internal anchor link -->
<a href="#gallery">Jump to Gallery</a>

<!-- Image with alt text -->
<img src="img/photo.jpg"
     alt="A wooden kitchen counter">

<!-- Image as a link -->
<a href="#" class="social-icon">
    <img src="instagram.png"
         alt="Instagram">
</a>
                

6. Card Components

Cards are reusable containers for displaying services, products, or features. Each card typically has an image, title, description, and a link or button.

                    Service cards
                    
                

<section class="services">
    <div class="services-container">
        <h2>Our Services</h2>

        <div class="service-grid">
            <div class="service-card">
                <div class="service-image placeholder-kuchyne">
                    <span>Custom Kitchens</span>
                </div>
                <h3>Custom Kitchen Design</h3>
                <p>Modern and classic kitchens made
                   from solid wood, tailored to
                   your space and needs.</p>
                <div class="service-price">
                    Starting at:
                    <strong>$120/hr</strong>
                </div>
                <a href="#" class="btn-cta-small">
                    Learn More
                </a>
            </div>
            <!-- More cards... -->
        </div>
    </div>
</section>
                

7. Image Gallery with Tabs

An interactive gallery uses data-* attributes to store image names on buttons. JavaScript changes the src of the image when a tab is clicked.

                    Gallery with tab buttons
                    
                

<section class="gallery" id="gallery">
    <div class="gallery-container">
        <h2>Our Work</h2>

        <div class="gallery-tabs">
            <button class="tab-btn active"
                    data-image="kitchen">
                Oak Kitchen
            </button>
            <button class="tab-btn"
                    data-image="table">
                Dining Table
            </button>
            <button class="tab-btn"
                    data-image="stairs">
                Custom Staircase
            </button>
        </div>

        <div class="gallery-image-container">
            <img id="gallery-image"
                 src="img/gallery/kitchen.jpg"
                 alt="Oak Kitchen"
                 class="gallery-image">
        </div>
    </div>
</section>
                

💡 Tip: The data-image attribute stores the image filename. JavaScript reads it via button.dataset.image and dynamically updates the <img> source. Learn more in the JavaScript tutorial.

8. Forms & Inputs

Forms collect user input. The <form> element wraps input fields, and each field should have a <label> for accessibility.

                    Contact form
                    
                

<form action="/submit" method="POST">
    <label for="name">Your Name</label>
    <input type="text" id="name"
           placeholder="John Doe" required>

    <label for="email">Email Address</label>
    <input type="email" id="email"
           placeholder="john@example.com" required>

    <label for="message">Message</label>
    <textarea id="message" rows="5"></textarea>

    <button type="submit">Send Message</button>
</form>
                

9. Footer

The <footer> element wraps the bottom section of a page, typically containing copyright info, social links, or secondary navigation.

                    Page footer
                    
<footer>
    <p>&copy; 2026 My Business &bull;
       Handcrafted with care</p>
</footer>