fssd-html/basic07-semantic2.html at master · anmarjarjees/fssd-html · 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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!-- Life after HTML5, we can usee other element beside div element to layout our page -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Working with the new HTML5 elements</title>
</head>

<body>
    <!--
    the "div" block-level element
    The major container to wrap the entire website

    The div is used if we just want to layout the element
    if the element has no semantic meaning
 -->
    <div class="wrapper">
        <!--
            - The <header> element provides introductory content
            - Use this element at the top of your page or within page sub sections
            - A <header> typically contains at least (but not restricted to)
            one heading tag (<h1> – <h6>).
        -->
        <header id="heading">
            <img src="images/CBC-New-Logo-Website.png" alt="CBC Logo">
            <!-- the nav element is the main navigation -->
            <nav id="navigation">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>

        <!--
            The main element => the main page content
            The <main> element can be used only once per page.
            It contains the main content of the page outside of the page-level heading and footer.
            - It should not have content that is repeated across the pages,
              such as; links, logo, copyright.
            - It should only have material that is unique to the current page.
        -->
        <main>
            <!--
            - The <section> element is used to represent a group of related content.
            - A section is similar to the purpose of an <article> element with the main difference being that the content within a <section> element doesn’t necessarily need to make sense out of the context of the page.
            -->
            <section id="programs">
                <h2>CBC Programs</h2>
                <!--
                    - The <article> element represents an independent piece of content.
                    - That is content that makes sense on its own.
                    - An article could be a blog post, a magazine or newspaper article, a user-submitted comment,
                        an interactive widget, or any other independent item of content
                -->
                <article class="prog-info">
                    <h2>Full-Stack Developer Program</h2>
                    FSSD Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo suscipit rerum dolorum cumque
                    praesentium, eius aliquid nemo beatae voluptatem nihil tenetur iusto, blanditiis atque nam aliquam
                    deleniti voluptatum? Exercitationem, officia.
                </article>

                <article class="prog-info">
                    <h2>Digital Media and Web Design</h2>
                    DMWD Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo culpa temporibus libero
                    doloremque
                    necessitatibus inventore accusamus ad error animi magnam iusto eligendi totam, veritatis fuga nam,
                    dignissimos amet? A, sint.
                </article>

                <article class="prog-info">
                    <h2>Database Admin</h2>
                    Database Admin Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto distinctio
                    molestias
                    sit adipisci hic et similique aperiam error. Molestiae itaque earum illo mollitia voluptas
                    accusantium
                    amet autem quos consequatur! Sit.
                </article>
            </section>
        </main>

        <!--
            the element "aside" for the sidebar content
            - The <aside> element.
            - When used within an <article> element, the contents should be specifically related to that article (e.g., a glossary).
            - When used outside of an <article> element, the contents should be related to the site
            (e.g., a twitter feed, groups of additional navigation, and even advertising if that content is related to the page)
        -->
        <aside id="sidebar">
            <p>the contents of the sidebar</p>
        </aside>
        <!--
        - The <footer> element works in very much the same way as the <header> element.
        - But in addition to navigation elements,
         - a footer typically contains information about each section such as who wrote it,
            links to related documents, copyright data, and the like.
        -->
        <footer id="footer">
            Copyright 2021 - Canadian Business College
        </footer>
    </div>
</body>

</html>