Digital Technologies @ Waimea College

DT » Web Development » HTML » Snippets

HTML Snippets

These examples show the html required for different scenarios:

Web Page Structure

Minimal Web Page

This is the minimum code required for a valid web page:

<!DOCTYPE html>

<html>

    <head>
        <meta charset="utf-8">
        <title>SITE TITLE</title>
    </head>

    <body>
        <h1>Hello world!</h1>
    </body>

</html>

Basic Web Page

Minimal content web page, but with key tags, etc.

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>SITE TITLE</title>
        
        <link rel="stylesheet" href="css/styles.css">
    </head>

    <body>

        <h1>SITE TITLE</h1>
    
        <p>Hello world!</p>
    
    </body>

</html>

Full Web Page

A starting point for an HTML page with header, nav, multiple sections and a footer

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>SITE TITLE</title>
        
        <link rel="stylesheet" href="css/styles.css">
    </head>

    <body>

        <header id="main-header">
            <h1>SITE TITLE</h1>

            <nav id="main-nav">
                <menu>
                    <li><a href="#top">Back to Top</a></li>
                    <li><a href="#ID-1">Section Link</a></li>
                    <li><a href="#ID-2">Section Link</a></li>
                    <li><a href="#ID-3">Section Link</a></li>
                </menu>
            </nav>
        </header>

        <main>
            <section id="ID-1">
                <h2>SECTION TITLE</h2>
                <p>SECTION CONTENT</p>
            </section>

            <section id="ID-2">
                <h2>SECTION TITLE</h2>
                <p>SECTION CONTENT</p>
            </section>

            <section id="ID-3">
                <h2>SECTION TITLE</h2>
                <p>SECTION CONTENT</p>
            </section>
        </main>

        <footer id="main-footer">
            &copy; AUTHOR
        </footer>

    </body>

</html>

Nav menus are usually added to pages to help the user navigate around / between web pages

Forms

Forms are usually used to gather data from the user, to input it into the system