semantic-elements/Index.html at master · jaamp/semantic-elements · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Assignment 01</title>
    </head>
    <body>
        <header><p>Main Site Header</p>
            <nav><p>Navigation Bar</p>
                <ul>
                    <li><a href="#">Home Link</a></li>
                    <li><a href="#">Another Link</a></li>
                </ul>
            </nav>
        </header>
        <section>
        <h2>Main Section</h2>
        <p>Assignment is due <time datetime="2019-01-13 23:59">Sunday</time></p>
        <article>
            <h3>Article One - A nice quote about Semantic HTML</h3>
            <blockquote>
                "Semantic HTML can help web designers and developers convey meaning
                not simply in the presented page, but also with the tags and elements used to code that page,
                potentially improving accessibility, search engine indexing, and even human understanding."
            <cite>https://www.sitepoint.com/20-html-elements-better-text-semantics/</cite>
        </blockquote>
        </article>
        <article>
            <h3>Article Two - A paragraph on Semantic HTML</h3>
            <p>Semantic HTML is a set of HTML tags that are descriptive to their function or purpose.  This descriptive nature allows for better organization of a web page into logical areas, and maybe more importantly it allows for better readability of the code, not just for humans, but for web crawlers, and accessibility readers as well. Semantic elements can be block or inline element type.</p>
            <p>While there are many benefits of using semantic elements, there are some questions of how and when to use them, such as outlined in the WC3Scools.com article about the article and section tags and how, when or if they should be nested.  As well as the tag cite, there are those that believe the citation should only have the title of the work, while others feel that author can be added as well.</p>
            <p>Nonetheless, the questions and controversies are a minor to the real benefits of using semantic elements.  Which is the joy and happiness you have the next time you are asked to update someone else's code, and find they maximized the use of semantic elements.</p>

        </article>
        <article>
            <h3>Article Three - Semantic HTML used</h3>
        <p>List of Semantic Elements used in this  <del>document</del> <ins>web page.</ins></p>
        <ol>
            <li>Header</li>
            <li>Nav</li>
            <li>Section</li>
            <li>Article</li>
            <li>Blockquote</li>
            <li>Cite</li>
            <li>Progress Bar </li>
            <li>Aside</li>
            <li>Figure</li>
            <li>Figcaption </li>
            <li>Del </li>
            <li>Ins</li>
            <li>Time</li>
            <li>Mark</li>
            <li>Footer</li>
        </ol>
        <p>Progress using 15 semantic-elements</p>
        <progress value="100" max="100"></progress>
        <p> 15 of 15 completed</p>
    </article>
    </section>
    <aside>
        <h2>Aside Section</h2>
        <h3>With the proper CSS this section and photo would be a sidebar</h3>
        <figure>
            <img src="/chiarini-unsplash.jpg" alt="chiarini" style="width:100%"/>
            <figcaption>Photo.1 - Chiarini from Unsplash</figcaption>
          </figure>
    </aside>
    <footer><mark>Copyright info here</mark></footer>
    </body>
</html>