1. Тег html

Якщо ти читаєш цей текст, скоріше за все, в майбутньому ти будеш Java Developer, ну або Full Stack Java Developer. Писати HTML-документи ти навряд чи будеш, але читати їх тобі доведеться часто. Так вже влаштований світ, отже доведеться розібратися і в тому, як влаштовані HTML-документи.

З чого починається будь-який HTML-документ? Він має структуру, що складається з трьох вкладених тегів: html, head і body. Це стандарт. Приклад:


<!DOCTYPE html>
<html>
    <head>
        Службові теги
    </head>
    <body>
        Основний документ
    </body>
</html>
Вебінар JavaRush

Все, що відображає браузер, знаходиться всередині парного тега body (тіло документа). Усередині тега head знаходяться теги зі службовою/допоміжною інформацією для браузера.

Також на початку документа прийнято (не обов'язково) писати тип документа – DOCTYPE, щоб парсер краще розумів, як йому інтерпретувати помилки. Багато браузерів вміють коректно відображати документи з поламаною версткою.

Або навпаки, є стандарт XHTML = XML+HTML, у якому жорсткіші правила, ніж у звичайному HTML. Але така інформація буде тобі корисна, коли ти вирішиш написати свій браузер, чи хоча б свій HTML-парсер.

2. Тег head

Всередині тега head зазвичай розташовуються такі теги: title, meta, style, …

Тег <title> визначає назву документа, що відображається у вкладці браузера.

Тег <meta> використовується для зазначення різноманітної службової інформації. Наприклад, можна допомогти браузеру зрозуміти кодування HTML-документа (адже він містить звичайний текст, якщо ти пам'ятаєш).


<html>
    <head>
        <title> Escape character</title>
           <meta charset="utf-8" />
   </head>
    <body>
 
    </body>
</html>

3. Теги body, p, b

Тег <body> містить весь html-текст, який буде відображатися браузером. Найпростішими теги для відображення документа є: <h1>, <p>, <b>,<br>

<h1> – це парний тег, він дозволяє вказати заголовок твоєї сторінки/статті. Якщо твоя стаття велика і тобі потрібні підзаголовки, можеш використовувати тег <h2>, <h3> – аж до <h6>

Приклад:


<body>
     <h1> Коти </h1>
          <h2> Опис котів</h2>
            докладний опис котів
          <h2> Походження котів</h2>
              Інформація про походження котів.
          <h2> Лапки котів</h2>
              Величезна стаття про лапки котів
</body>

Якщо твоя стаття велика і ти хочеш спростити читання – розділити її на абзаци – для цього знадобиться парний тег <p> (від слова paragraph). Просто огорни текст у теги <p> та </p>, і браузер відобразить його як окремий абзац.

Увага! Браузер ігноруватиме перенесення рядків та/або зайві пробіли у твоєму тексті. Якщо ти хочеш додати перенесення рядка, встав у текст одинарний тег <br> (від break line).

Ну й найприємніше – це виділення тексту жирним. Якщо хочеш зробити текст жирним, огорни його тегами <b> </b>(від bold).