semantic-elements/index.html at master · rsk23/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
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title> My Cool Site </title>
  </head>
  <body>
    <header>
      <nav>
        <p>These are some websites I find to be intesting. Since I don't know how to make the naviagtion bar look nifty, I
        have included these links instead. :)</p>
        <a href="https://www.google.com">Google</a>
        <a href="https://www.tappedout.net">Tapped Out</a>
        <a href="https://setiathome.berkeley.edu/">SETI at Home</a>
      </nav>
      <h1>HTML5 100 - Homework assignment #1</h1>
      <h2>My paragraph summary of what semantic elements are:</h2>
      <p>Semantic elements are a newly defined set of elements available in the html 5 standard. The names for these elements
      were dervived from analysis of the most commonly used ids associated with the div and span elements, and provide for
      a much more "natual language" feel to programming. That is to say, creating an html page in html5 feels
      considerably more like assembling the elements of a newspaper than creating an html page in html4 (or less).<br>
      A core tenant of the html5 philosophy appears to be that html is all about organization of conent, whereas CSS
      is about styling. I am excited to develop a more complete understanding of this distinction.</p>
    </header>
    <section>
      <h2>Example header for my first section</h2>
      <article>
        <h2>Example header for my first article</h2>
        <p>This is the paragraph where I would normally provide content for this article. I am writing this article article
        at <time datetime="2018-10-08 19:24">7:24pm</time></p>
        <aside>This is the aside where I would normally provide an image or additional piece of information to
        support the content of the article.</aside>
        <footer> <p>This is the footer for my first article.</p></footer>
        <figure>
          <img src="https://www.thesprucepets.com/thmb/dxEvLN7x5hVlRQRrb8_dt2WFwVU=/960x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/cat-lying-down-in-grass-80611475-57d98b895f9b5865165d9e63-5967bd215f9b5816183acbe9.jpg" alt="Kitty">
          <figcaption>This is a photograph of a red tabby cat from thesprucepets.com. I have included it in this homework
          assignment because I like cats and think they are nice. </figcaption>
        </figure>
      </article>
    </section>
    <footer>
      <p>Posted by: Robert S. Kesterson "Krob"</p>
      <p>Contact information: <a href="rsk23@uw.edu"> rsk23@uw.edu</a></p>
      <details>
        <summary>Details about this homework assignment</summary>
        <p>I enjoyed this assignment and am looking forward to the next one. </p>
      </details>
      <small>I do not own the copyright to the image above and will emphatically deny any ownership should it be stated.</small>
    </footer>
  </body>
</html>