HTML-CSS-practice/structure-and-layout.html at master · HZHWonG/HTML-CSS-practice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
    <head>
        <title>HTML Boilerplate</title>
        <meta name="author" value="Alexandra Dedok" />
        <meta name="description" value="Learning structure and layout with HTML" />
        <meta name="keywords" content="HTML, CSS" />
    </head>
    <body>
        <!-- Header.-->
        <header role="banner">
            <h1 id="site title">Alex's Website!</h1>
            <!-- Navigation.-->
            <nav role="main">
                <ul>
                    <li><a href="code.html">Code</a></li>
                    <li><a href="links.html">Links</a></li>
                    <li><a href="block-inline.htm">Block or inline</a></li>
                    <li><a href="mailto:dedok.alexandra@gmail.com">Contact</a></li>
                </ul>
            </nav>
        </header>

        <div class="wrapper">
            <main role="main">
                <article role="article">
                    <!-- Article-specific header.-->
                    <header>
                        <h2>10 Reasons I'm so <s>great</s> dumb.</h2>
                    </header>
                    <div class="entry">
                        <p>No need to list them, you know them all.</p>
                    </div>
                    <!-- Article-specific footer.-->
                    <footer>
                        <p>Published pretty late in the night.</p>
                    </footer>
                </article>

                <article role="article">
                    <header>
                        <h2>10 Reasons I'm so <s>dumb</s> fabulous.</h2>
                    </header>
                    <p>Just because.</p>
                    <footer>
                        <p>Published on <time datetime="2020-07-12 07:46">July 12th, 2020 at 7:46am</time> lol.</p>
                    </footer>
                </article>
            </main>

            <aside>
                <h3>Related Articles</h3>
            </aside>
        </div>

        <footer>
            <p>Copyright by me, 2022.</p>
        </footer>
    </body>
</html>