Первые HTML-теги

3.1 Тег html

Если ты читаешь этот текст, то предполагается, что в будущем ты будешь работать Java Developer, ну или Full Stack Java Developer. Писать HTML-документы ты будешь вряд ли, но вот читать их тебе придется частенько. Так уж устроен мир, так что придется разобраться как устроены HTML-документы.

С чего же начинается любой HTML-документ? Каждый HTML-документ имеет структуру, состоящую из трех вложенных тегов: html, head и body. Это стандарт, пример:

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

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

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

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

3.2 Тег head

Внутри тега head обычно располагаются такие теги: title, meta, style, …

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

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

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

    </body>
</html>

3.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).