Semantic Hierarchy

README.md

Semantic HTML

This gist explores a fairly complex approach to semantic html. Keep in mind that because it is all just 1 wiki page, you could get rid of the article tags and just use sections.

However This is meant to show a more complex example in practice. Base your code on the needs of your content.

Heading Text

• Semantic breaks in your page need headings.
  -This includes article, header, section
• heading next must be sequential (no h2 before h1) extra reading

Header

• Headers can be used as headers for different sections and the whole page
• If it's the header for a section, put it inside the section
• Note how this page has a top level header that is just under the body
  • Then following headers are inside their respective container elements

Articles

• Use when there is a semantically bound block of information.
• If the segment of content can be taken out of the rest of the page and still make sense, then it can be an article
• In this website's case, arguably all of the content could be in an article or `main

hr tag

• On wikipedia, this tag is used directly under headings.
  • This is no longer recommended. It is better to use them for semantic breaks only
    • ie: all the articles could be removed and an hr tag could be between them
    • They can be used in conjunction with article tags as well.
  • Instead, use underline on the text to fulfill the same purpose
  • this page shows them being used properly.
  • An indepth guide to underlining elements

Navigation Links

• Local Navigation
  • To make links that go to different places on the same page:
    • Add an id to the destination (ie: line 50)
    • link to that id (ie: line 14)
• External Navigation
  • Add the url to the destination in the href
  • in your <a> tag, add target="_blank"` to open the link in a new tab.
    • This can be done for local links too

index.html

<main class="content">
  <header class="site-header">
    <!--Most Important Title -->
    <h1>Dogs</h1>
    <!--Supporting Text -->
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui labore culpa perferendis minus repellat, architecto
      harum quae accusamus asperiores reiciendis.</p>

    <!-- Navigation -->
    <nav class="page-nav">
      <h2>Contents</h2>
      <ul>
        <li><a href="#evolution">Evolution</a></li>
        <li><a href="#taxonomy">Taxonomy</a></li>
        <li><a href="#references">References</a></li>
      </ul>
    </nav>
  </header>
  <!-- An arguably bound article -->
  <article id="evolution">
    <!--Article's header-->
    <header>
      <h2>Evolution</h2>
      <p><em>Main article: <a href="https://en.wikipedia.org/wiki/Evolution_of_the_wolf" target="_blank">Evolution of
            the wolf</a></em>
      </p>
    </header>
    <!--subsection of article-->
    <section>
      <h3>Domestication</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe aperiam natus similique eligendi magnam. Magnam
        exercitationem officia ipsa sequi quia quas rerum eum deleniti earum. Doloremque aliquam asperiores sequi!</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam aspernatur, inventore hic vel quae itaque
        repudiandae aut fugiat voluptates odit!</p>
      <img
        src="https://images.pexels.com/photos/2253275/pexels-photo-2253275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
        alt="A happy golden retriever" target="_blank">
    </section>

    <section>
      <h3>Breeds</h3>
      <p><em>Main article: <a href="https://en.wikipedia.org/wiki/Dog_breed" target="_blank">Dog Breeds</a></em></p>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus iure officiis sequi alias accusantium,
        incidunt nulla officia porro nisi esse quibusdam quasi eveniet saepe cum odit neque quidem a itaque!</p>
      <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/Big_and_little_dog.jpg" target="_blank">
    </section>
  </article>
  <!-- hr is a semantic break-->
  <hr>
  <article id="taxonomy">
    <header>
      <h2>Taxonomy</h2>
      <p><em>Further Reading: <a
            href="https://en.wikipedia.org/wiki/Canis_lupus_dingo#Taxonomic_debate_%E2%80%93_the_domestic_dog,_dingo,_and_New_Guinea_singing_dog"
            target="_blank">Canis
            lupus dingo & Taxonomic debate</a></em></p>
    </header>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, cumque beatae. Nesciunt consequatur neque
      ducimus repudiandae expedita iusto necessitatibus voluptatibus!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo vitae cupiditate totam facilis laboriosam, rerum
      quae temporibus quis mollitia! Dolor in suscipit necessitatibus harum tempore, at, repudiandae possimus natus
      nostrum recusandae quia assumenda quisquam id soluta cupiditate excepturi exercitationem, nemo provident vitae!
      In, cum dolorum!</p>
  </article>
  <!--THe references need the rest of the site's content -->
  <section id="references">
    <h2>References</h2>
    <ol>
      <li><a href="https://en.wikipedia.org/wiki/Dog" target="_blank">Wikipedia- Dogs Article</a></li>
      <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article" target="_blank">Mdn- Article
          Element</a></li>
      <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section" target="_blank">Mdn- Section
          Element</a></li>
    </ol>
  </section>
</main>

<!--Footer -->
<footer class="footer">
  <p>&copy 2021 Ashlyn Knox</p>
</footer>

style.css

/* *************** */
/* Font and Images */
/* *************** */
h1, h2 {
  font-family: "Source Serif Pro", serif;
}

h3, p, a {
  font-family: "Source Sans Pro", sans;
}

/* ------ */
h1 {
  font-size: 40px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 25px;
}
p, a, li {
font-size: 20px;
line-height: 1.3;
}

img {
  width: 100%;
  margin-bottom: 12px;
}

/* ****** */
/* Layout */
/* ****** */

/* While this could be attached to the main tag for most cases, because the header is using the same declarations, a class is useful to get rid of code repitition */
.content {
  margin: 0 auto;
  min-width: 20ch;
  max-width: 75ch;
} 

body {
  background-color: whitesmoke;
}

/* A class is used instead of a header so only the first header is effected */
.site-header {
  margin-top: 60px;
}

article {
  margin-top: 40px;
}

footer {
  background-color: #d1d1d1;
  
  margin-top: 50px;
  padding: 40px 0;
  
  text-align: center;
  font-size: 20px;
}