HTML Guidelines

Tältä sivulta löydät ohjeita siihen miten HTML:ää kirjoitetaan Duden oikeaoppisten standardien mukaisesti.

Ulkoasussa olevia rajattuja 100% leveitä alueita (<section>) kutsutaan nimellä block, suomeksi lohko, blokki tai moduuli. Näiden sisällä ensimmäistä diviä kutsutaan nimellä container.

HTML-rakenne moduuleissa

<section class="block block-example">
  <div class="container">
    <div class="cols">
      <div class="col col-text">
        <p class="block-title-pre" aria-describedby="block-title-something">Some pre-heading</p>
        
        <h2 class="block-title" id="block-title-something">
          <a href="#">Some heading - Lorem ipsum</a>
        </h2>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        
        <p>
          <span>Aenean ac ultrices metus.</span>
        </p>
      </div> 
      
      <div class="col col-image col-poster">
        <img src="#" alt="Dynamic title" />
      </div>
    </div>
  </div>
</section>

Listanomaiset elementit

<!-- Väärin -->
<ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li></ul>
<!-- Oikein -->
<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>

Globaalit linkit

<!-- Väärin -->
<div class="col">
  <a href="<?php echo esc_html( get_the_permalink() ); ?>" class="global-link"></a>
  <h2>Otsikko</h2>
  <p>Kuvausteksti</p>
</div>
<!-- Oikein -->
<div class="col">
  <a href="<?php echo esc_url( get_the_permalink() ); ?>" class="global-link" aria-hidden="true" tabindex="-1"></a>
    <h2>
      <a href="<?php echo esc_url( get_the_permalink() ); ?>">
        Otsikko
      </a>
	</h2>
  <p>Kuvausteksti</p>
</div>