Skip to content

Latest commit

 

History

History
89 lines (69 loc) · 3.69 KB

structure.md

File metadata and controls

89 lines (69 loc) · 3.69 KB

HTML structure elements

The two major purposes of HTML is to provide structure and content to your web application. Some of the common HTML structural elements include body, header, footer, main, section, aside, p, table, ol/ul, div, and span. We demonstrate the use of each element with the following HTML document. It starts with the top level content body. The body has three children, a header, main, and footer. Each of the body children then contains other structural content.

The header contains a paragraph with a span, and a navigation containing multiple divisions of sub-content.

The main contains multiple sections that contain either an unordered list (ul) or a table. Main also contains an aside for content that does not fit the content flow of the sections.

The footer has a content division with a single span.

<body>
  <p>Body</p>
  <header>
    <p>Header - <span>Span</span></p>
    <nav>
      Navigation
      <div>Div</div>
      <div>Div</div>
    </nav>
  </header>

  <main>
    <section>
      <p>Section</p>
      <ul>
        <li>List</li>
        <li>List</li>
        <li>List</li>
      </ul>
    </section>
    <section>
      <p>Section</p>
      <table>
        <tr>
          <th>Table</th>
          <th>Table</th>
          <th>Table</th>
        </tr>
        <tr>
          <td>table</td>
          <td>table</td>
          <td>table</td>
        </tr>
      </table>
    </section>
    <aside>
      <p>Aside</p>
    </aside>
  </main>

  <footer>
    <div>Footer - <span>Span</span></div>
  </footer>
</body>

If we rendered this HTML, and added just a bit of styling, so we can see how they related to each other, we would see the following.

HTML structure

Properly representing the page structure using the elements is important not only so it makes logical sense to a programmer, but also so that automated tools like search indexing crawlers and accessibility screen readers can correctly interpret the document.

Block and inline

There is a distinction between structure elements that are block vs inline. A block element is meant to be a distinct block in the flow of the content structure. An inline element is meant to be inline with the content flow of a block element. In other words, inline elements do not disrupt the flow of a block element's content. For example, the block element div (division) could have an inline element b in order to bring attention to a portion of its sub-text. Likewise a p (paragraph) element could have a span to mark the paragraph's sub-text as a person's name.

<div>He said <b>don't</b> cross the beams.</div>

<p>Authors such as <span>ee cummings</span> often used unconventional structure.</p>

☑ Assignment

Create a fork of this CodePen do the following:

  1. Replace the navigation div elements with anchor elements that have hyperlinks to BYU and FamilySearch.
  2. Change the section ul element text to be "apples", "bananas", and "oranges".
  3. Add an img element to the aside element. Use the URL of an image on some other website as the src attribute. Use the width attribute to size it properly.
  4. Add another row to the table with the text HTML, CSS, and JavaScript.
  5. Add your name in a h1 element to the header element.
  6. Add a hyperlink to the footer element to your GitHub repository.

If your section of this course requires that you submit assignments for grading: Submit your CodePen URL to the Canvas assignment.

HTML structure assignment

Don't forget to update your GitHub startup repository notes.md with all of the things you learned and want to remember.