Атрибут align тега <h1> — вирівнювання заголовка

HTML

<p>Вибери потрібне значення для <code>align</code>:

<select id="form">
   <option value="left" name="value">left</option>
  <option value="center" name="value">center</option>
   <option value="right" name="value">right</option>
   <option value="justify" name="value">justify</option>

</select>
  </p>
<nav id='text'>Текст розташовано за замовчуванням</nav>
<hr>
<h1 id="table">Використання тегу <code>H1</code></h1>

JS

var wrapper = document.getElementById('table');
var form = document.getElementById('form');
var text = document.getElementById('text');

var textArray = { 'left': 'Вирівнювання по лівій частині.',
  'center': 'Вирівнювання по центру.',
  'right': 'Вирівнювання по правій частині.',
  'justify': 'Вирівнювання по ширині.' };

form.onchange = function () {
  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      wrapper.align = form.options[i].value;
      text.innerHTML = textArray[form.options[i].value];
    }
  }window.CP.exitedLoop(0);
};
//# sourceURL=pen.js

HTML

<h1>Типовий заголовок — по лівому краю</h1>

<h1 align="center">align="center"</h1>

<h1 class="modern">CSS: text-align: center</h1>

<h1 align="center" class="left">align="center", але в CSS задано left</h1>

<h1 class="boxed">Вужчий блок, центрований через margin: 0 auto</h1>

CSS

h1 {
  font-size: 1.05rem;
  margin: 0 0 8px;
  padding: 6px 10px;
  background: #eef3ff;
  border: 1px solid #b9c9e8;
}

.modern { text-align: center; }

.left { text-align: left; }

.boxed {
  width: 60%;
  margin: 0 auto;
  text-align: center;
  background: #fff4e5;
  border-color: #e8c9a0;
}

<h1 align="center">Використання тегу <code>H1</code></h1>
<p><code>H1</code> визначає найбільш важливі заголовки, а <code>h6</code> визначає найменш важливі заголовки (<code>h1</code> заголовки повинні бути основними заголовками, потім слідують заголовки <code>h2</code> і так далі). </p>
<br>
<h1 align="right">Використання тегу <code>H1</code></h1>
<p><code>H1</code> визначає найбільш важливі заголовки, а <code>h6</code> визначає найменш важливі заголовки (<code>h1</code> заголовки повинні бути основними заголовками, потім слідують заголовки <code>h2</code> і так далі). </p>