9. Content

When the structure of a website is created it must be crystal clear before the eyes of the web designer. Colleagues must be able to interpret and understand each section of the site, and without opening the browser! More than an obligation it's a work necessity. It will make it easy to maintain over the years, positioning in search engines will improve (and without spending money) and you'll be able to bring on another member without having to explain the structure (the code will be their private teacher).

To do this we'll use content tags, which will give us more semantic names.

  • Non-semantic: <div> or <span>. What does this represent?
  • Semantic: <table> or <strong>. We know what they do.

All the tags we're going to see don't add any new characteristic, they are equivalent to <div> in functionality (a sterile block-type tag). Remember that they exist to give order, not properties.

Look at the following example.

<div>
    <div>
        <a href="#">Contact</a>
    </div>
</div>

Where is it? top, bottom, side...? Is it important or a secondary section? Impossible to answer.

Now let's see the same example but with content tags.

Header of the page or element

Tag <header>
Description Defines the header of the page or structure.
Attributes Global
Type Block 
<header>
    <nav>
        <a href="#">Contact</a>
    </nav>
</header>

At a glance I already know that it belongs to the header of my website and the link belongs to the menu. It explains itself.

Let's give quality to the code!

Main content

Tag <main>
Description Defines the dominant content of .
Attributes Global
Type Block 
<body>
    <header>
        Header
    </header>

    <main>
        Content
    </main>
</body>

Section

Tag <section>
Description Defines a section.
Attributes Global
Type Block 
<body>
    <main>
        <section>
            <h1>Blog</h1>
            <p>Content</p>
        </section>
        <section>
            <h1>Archive</h1>
            <p>Content</p>
        </section>
    </main>
</body>

Navigation menu

Tag <nav>
Description Defines the navigation.
Attributes Global
Type Block 
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About me</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

It's not necessary to use the <nav> tag inside a <footer>.

To make breadcrumbs it's recommended to use <ol>.

For example, you're on the card where some sports shoes are sold. The breadcrumbs could be the following.

Offers >> Men >> Shoes >> Sports

<nav>
    <ol>
        <li><a href="#">Offers</a></li>
        <li><a href="#">Men</a></li>
        <li><a href="#">Shoes</a></li>
        <li><a href="#">Sports</a></li>
    </ol>
</nav>

Address

Tag <address>
Description Indicates contact information: phone, e-mail, address...
Attributes Global
Type Block 
<address>
  <a href="mailto:correo@falso.com">correo@falso.com</a><br>
  <a href="tel:+34123456789">123456789</a>
</address>

Reusable element

Tag <article>
Description Defines a reusable and self-contained block, such as a forum post, comments, search engine results, blog articles, independent elements, etc.
Attributes Global
Type Block 
<section>
    <h1>Comments</h1>
    <article>
        <h2>Alexander the Great</h2>
        <p>Have you seen my sword?</p>
    </article>
    <article>
        <h2>Attila</h2>
        <p>You didn't leave anything by the Black Sea.</p>
    </article>
    <article>
        <h2>Qing</h2>
        <p>Wouldn't you prefer a Katana?</p>
    </article>
</section>

Side or complementary section

Tag <aside>
Description Represents a fragment of the document that is indirectly related to the main content. Used for sidebars or side menus.
Attributes Global
Type Block 
<aside>
    <nav>
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Questions</a>
            </li>
        </ul>
    </nav>
</aside>

<main>
    <p>Content</p>
</main>

Another example but within a context.

<section class="comentarios">

    <aside>
        Remember that to comment you must be a great conqueror and go to <a href="registro.html">registration</a>
    </aside>

    <h1>Comments</h1>
    <article>
        <h2>Alexander the Great</h2>
        <p>Have you seen my sword?</p>
    </article>
    <article>
        <h2>Attila</h2>
        <p>You didn't leave anything by the Black Sea.</p>
    </article>
    <article>
        <h2>Qing</h2>
        <p>Wouldn't you prefer a Katana?</p>
    </article>
</section>

Footer of the page or element

Tag <footer>
Description Defines the footer of the page, generally with the publication date or legal matters.
Attributes Global
Type Block 
<footer>
    2077 Copyright
</footer>

It can be used within a smaller and self-contained structure.

<article>
    <header>
        <h2>Title</h2>
        <p>Published <time datetime="2077-12-03">Yesterday</time></p>
    </header>
    <p>Content</p>
</article>

Not to be confused with <hgroup>.

Group of headings

Tag <hgroup>
Description Represents a heading followed by, or preceding, related content.
Attributes Global
Type Block 
<hgroup>
    <h1>Camilo José Cela (1989)</h1>
    <p>Nobel Prize in Literature</p>
</hgroup>

Quote

Tag <blockquote>
Description Indicates that a text is an external quote.
Attributes Global
Type Block
Tag <cite>
Description Points to who is being quoted.
Attributes Global
Type Inline 
<blockquote>
    <p>Better to reign in Hell than serve in Heaven.</p>
    <footer><cite>John Milton</cite>, English poet, considered after Shakespeare to be the greatest poet in the English language.</footer>
</blockquote>

Better to reign in Hell than serve in Heaven.

John Milton, English poet, considered after Shakespeare to be the greatest poet in the English language.

Complete example

Now we're going to look at a simple structure that is recurrently used in development.

Preview

Simple example

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <h1>
        Book club
    </h1>
  </header>

  <section>
    <h2>
        Latest books
    </h2>
    <article>
      <header>
        <p>
            A Tale of Two Cities
        </p>
      </header>
      <p>
        Reflection of the 18th century
      </p>
    </article>
    <article>
      <header>
        <p>
          A Christmas Carol
        </p>
      </header>
      <p>
        A Christmas Eve story
      </p>
    </article>
    <aside>
      <p>
          Charles Dickens
      </p>
    </aside>
  </section>

  <footer>
      Copyright all rights almost reserved
  </footer>
</body>
Activity 1

Create an HTML structure for a newspaper article. Don't forget to include:

  • Title.
  • Author.
  • Publication date.
  • Article.
  • Comments.
Activity 2

Create 2 different pages using a structure similar to the previous exercise.

  • Listing of Jazz records.
  • Record detail card.

Also include the following sections.

  • Navigation between pages.
  • Breadcrumbs.
  • Search box.

This work is under a Attribution-NonCommercial-NoDerivatives 4.0 International license.

Desafíos de programación atemporales y multiparadigmáticos

Desafíos de programación atemporales y multiparadigmáticos

Te encuentras ante un librillo de actividades, divididas en 2 niveles de dificultad. Te enfrentarás a los casos más comunes que te puedes encontrar en pruebas técnicas o aprender conceptos elementales de programación.

Buy the book

Will you buy me a coffee?

This is how I keep writing without ads or paywalls.

Ko-fi donationsSure, it's on me!

Comments

There are no comments yet.