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>

Nimeämiset

Classia vai ei? Elementit nimetään aina classeilla, elleivät ne ole oikeasti yleisesti käytössä muuallakin. Tämä on oikeastaan vaatimus Air-light v. 7.4.0 myötä tulleen Gutenberg-uudistuksen jälkeen, jossa ”normilinkeille” (ilman classia) asetetaan automaattisesti link()-komponentti (blogia varten).

<!-- Väärin -->
<div class="col">
  <p>
    <a href="<?php echo esc_url( $data['link']['url'] ) ?>">
      <?php echo esc_html( $data['link']['title'] ); ?>
      <?php include get_theme_file_path( '/svg/button-arrow.svg' ); ?>
    </a>
  </p>
</div>
<!-- Oikein -->
<div class="col">
  <p class="read-more-wrapper">
    <a class="read-more-link" href="<?php echo esc_url( $data['link']['url'] ) ?>">
      <?php echo esc_html( $data['link']['title'] ); ?>
      <?php include get_theme_file_path( '/svg/button-arrow.svg' ); ?>
    </a>
  </p>
</div>

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_url( 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>

Tämä Handbook kertoo kuinka me teemme asioita Dudella, mutta saa ottaa koppia myös omaan toimintaan. Emme takaa että kaikki meidän jutut toimivat muilla samalla tavalla. Ole mitä olet! Kaikki on avointa GitHubissa: digitoimistodude/handbook