<?php
  //проверяем, существуют ли переменные в массиве POST
  if(!isset($_POST['fio']) and !isset($_POST['email'])){
   ?> <form action="home.php" method="post">
  <input type="text" name="fio" placeholder="Укажите ФИО" required>
  <input type="text" name="email" placeholder="Укажите e-mail" required>
  <input type="submit" value="Отправить">
  </form> <?php
  } else {
   //показываем форму
   $fio = $_POST['fio'];
   $email = $_POST['email'];
   $fio = htmlspecialchars($fio);
   $email = htmlspecialchars($email);
   $fio = urldecode($fio);
   $email = urldecode($email);
   $fio = trim($fio);
   $email = trim($email);
   if (mail("peturik@gmail.com", "Заявка с сайта", "ФИО: " . $fio . ". E-mail: " . $email)){
   echo "Сообщение успешно отправлено";
   } else {
   echo "При отправке сообщения возникли ошибки";
   }
  }
  ?>

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

Елемент <section> визначає розділ в документі.

Відповідно до специфікації w3c по html5: "розділ - це тематично згрупований контент, як правило з заголовком."

Домашня сторінка зазвичай може бути розбита на наступні розділи: вступ, основний контент і контактна інформація.

<section>
  <h1></h1>
  <p></p>
</section>
      

Елемент <article> визначає незалежний, самодостатній контент.

Kонтент, розміщений в цей елемент, повинен мати сенс сам по собі, тобто він повинен бути зрозумілий на відмінну від інших частин веб-сайту. в якості прикладів використання елемента <article> можуть виступати:

• публікація на форумі
• публікація в блозі
• газетна стаття

<article>
  <h1></h1>
  <p></p>
</article>
      

Елемент <header> призначений для визначення заголовку блоку або "шапки" документа або розділу.

Елемент <header> слід використовувати як контейнер для вступної інформації.

В одному документі дозволяється визначати кілька елементів <header>.

<article>
   <header>
     <h1></h1>
     <p></p>
   </header>
   <p></p>
</article>
        

Приклад:

Елемент <footer> призначений для визначення "підвалу" документа або розділу.

Елемент <footer> повинен містити інформацію про її утримує елементі.

Зазвичай в "підвалі" розміщують інформацію про автора документа, посилання на умови використання тексту, інформація про авторські права, контактні дані і т.п.

В одному документі дозволяється визначати кілька елементів <footer>.

Елемент <nav> визначає набір посилань навігації.

зверніть увагу, що не всі посилання в документі слід розміщувати всередині елемента <nav>. Елемент <nav> призначений тільки для основного блоку навігаційних посилань.

Елемент <aside> визначає якийсь контент, що знаходиться в стороні від контенту, всередині якого він розташований (як бічний блок сторінки, "сайдбар").

Контент всередині елемента <aside> повинен співвідноситися з навколишнім контентом.

Призначення елемента <figcaption> - додавання візуального пояснення до зображення.

html5 зображення і пояснення до нього може бути згруповано в елементі <figure>:

<figure>
  <img src='img_pulpit.jpg' alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Рис. 1 — Палпит Рок. Гора в Норвегии</figcaption>
</figure>

Елемент <img> визначає зображення, а елемент <figcaption> пояснення до нього.

Тег <details> визначає додаткову інформацію, яку користувач може за бажанням відкрити або приховати.

Елемент <details> може використовуватися для створення інтерактивного віджета, який користувач може відкривати і закривати. всередині тега <details> можна розміщувати будь-який контент.

Вміст елемента <details> має бути приховане до тих пір, поки не буде встановлено атрибут open.

Для визначення видимого заголовка Дод.Інформація в тезі <details> використовується елемент <summary>. на заголовок можна натискати. це відкриє / закриє додаткову інформацію.

><details>
   <summary>Copyright 1999-2014.</summary>
   <p> - by Refsnes Data. All Rights Reserved.</p>
   <p>Весь текстовый и графический контент данного веб-сайта является собственностью компании Refsnes Data.</p>
</details>

Тег <summary> визначає заголовок для елемента <details>, на який користувач може натискати, щоб відкривати / закривати додаткову інформацію.

Елемент <summary> повинен бути першим всередині тега <details>.

   
Copyright 1999-2014.
   
 - by Refsnes Data. All Rights Reserved.
   
Весь текстовый и графический контент данного веб-сайта является собственностью компании Refsnes Data.

Елемент <main> визначає основний вміст документа.

Вміст всередині елемента <main> має бути унікальним для даного документа. Тут не повинно бути нічого, що повторюється де-небудь, на зразок сайдбарів, навігаційних посилань, інформації про авторські права, логотипів сайту, пошукових форм і т.п.

В документі може бути тільки один елемент <main>, і він не повинен бути вкладений в елементи <article>, <aside>, <footer>, <header> або <nav>.

  <!DOCTYPE html>
  <html>
  <body>

  <main>
    <h1>Веб-браузеры</h1>
    <p>В настоящее время наиболее используемыми браузерами являются Google Chrome, Firefox, Internet Explorer.</p>

    <article>
      <h1>Google Chrome</h1>
      <p>Google Chrome — бесплатный веб-браузер с открытым исходным кодом, разработанный компанией Google в 2008 г.</p>
    </article>

    <article>
      <h1>Internet Explorer</h1>
      <p>Internet Explorer — бесплатный браузер от компании Microsoft, который впервые был выпущен в 1995 г.</p>
    </article>

    <article>
      <h1>Mozilla Firefox</h1>
      <p>Firefox — бесплатный веб-браузер с открытым исходным кодом от Mozilla был представлен общественности в 2004 г.</p>
    </article>
  </main>

  </body>
  </html>

Тег <mark> визначає маркований/виділений текст.

CSS стилі за замовчуванням

більшість браузерів будуть показувати теги <mark> з наступними стилями

mark {
  background-color: yellow;
  color: black;
}
  

Тег <time> визначає дату / час.

Окрім звичайного зазначення дати або часу, елемент <time> може використовуватися для кодування дати/часу в машинозрозумілій формі, щоб призначені для користувача програми-агенти могли додавати цю інформацію в системи нагадування або в розклад подій користувальницького календаря.

Атрибути тега <time> datetime визначає дату/час для тексту

    <p>Мы открываемся в <time>10:00</time> каждый день.</p>
    <p>У меня свидание в <time datetime="2008-02-14 20:00">Валентинов день
  

Приклад:

Мы открываемся в 10:00 каждый день.

У меня свидание в Валентинов день.