19 часто используемых тегов HTML, которые нужно знать новичкам
Опубликовано: 2022-12-08Если вы хотите стать фронтенд-разработчиком, один из самых распространенных советов, который вы получите, — изучить HTML. Язык гипертекстовой разметки, сокращенно HTML, является основой большинства веб-страниц.
HTML состоит из разных вещей, таких как теги, атрибуты и элементы. В центре нашего внимания будут теги HTML. Мы используем теги HTML, чтобы сообщить браузерам, как структурировать контент в заголовки, заголовки, абзацы, изображения и многое другое. Таким образом, теги HTML подобны ключевым словам, которые определяют, как браузер будет отображать или форматировать содержимое.
Серверы читают теги HTML сверху вниз. Нет никаких ограничений на количество HTML-тегов, которые должна иметь веб-страница.
- Все теги HTML заключаются в
<> - Каждый тег HTML выполняет другую функцию
- Большинство тегов HTML имеют открывающий
<tag>и закрывающий</tag>
Теги HTML, элементы HTML и атрибуты HTML
Большинство людей используют термины HTML-теги и элементы как синонимы. Но одинаковы ли они? Технически HTML-элементы и HTML-теги отличаются друг от друга.
Теги HTML определяют элементы HTML. Для этого содержимое оборачивается с использованием имени открывающего и закрывающего тега, совпадающего с содержимым тега, с которым мы работаем.
Это пример элемента HTML:
<p> This is a paragraph </p><p> — пример тега HTML.
Атрибуты HTML предоставляют дополнительную информацию об элементах HTML в документе. Атрибуты находятся внутри элементов HTML.
Это пример атрибута HTML
<button id=" SubmitOrder" class="btn">Order</button>Теги HTML, которые должен знать каждый
HTML как язык разметки развивался с тех пор, как Тим Бернерс-Ли представил его в 1993 году. В первой версии HTML было 18 тегов. Новые теги добавляются с каждой версией HTML; самым последним обновлением был HTML5 в 2014 году.
Тщательное сравнение HTML и HTML5 показывает, что последний имеет семантические теги, такие как <article>, <header> и <footer>, которые четко описывают содержимое. Сейчас у нас более 100 тегов HTML. Ниже приведены некоторые из наиболее популярных тегов, которые вы должны знать:
<!ДОКТИП>
Технически DOCTYPE — это не тег, а объявление, сообщающее браузеру, какой файл будет загружен. Этот тег сообщает браузеру тип HTML, который будет загружен.
В HTML5 вы можете объявить свой файл как
<!DOCTYPE html>Или же
<!doctype html>Примечание. Объявление не имеет закрывающего тега и не чувствительно к регистру.
<html> </html>
Тег <html> ….. </html> идет после тега DOCTYPE. Этот тег определяет документ как веб-страницу; каждый другой элемент будет вложен внутри. Тег HTML указывает начало и конец HTML-документа.
Тег <html> представлен как;
<html>Content</html><голова></голова>
Раздел заголовка HTML-документа представлен тегом <head>. Этот тег заключен в тег <html> и предоставляет общую информацию о веб-странице.
Тег <head> содержит другие теги, которые сообщают особенности веб-страницы, такие как заголовок страницы и автор. Содержимое этого тега не отображается на веб-странице
Это синтаксис тега <head>;
<head> …….. </head><название></название>
Тег <title> объявляет заголовок веб-страницы. Этот тег заключен в тег <head>. Тег <title> появится в строке заголовка или на вкладке в окне браузера, но не на самой веб-странице.
Синтаксис тега <title>:
<title>HTML Tags for Beginners</title>Находясь внутри тега <head>, он будет отображаться как;
<head> <title>HTML Tags for Beginners</title> </head><тело> </тело>
Тег <body> отображает весь видимый контент на веб-странице. Изображения, ссылки, обычный текст, видео и многое другое можно найти внутри тегов <body> и </body>.
Некоторые из других тегов, которые вы найдете внутри тела, включают тег <p> для абзаца, тег <a> для изображений, тег <strong> для полужирного текста и тег <ol> для упорядоченного списка, и это лишь некоторые из них.
Синтаксис тега <body>:
<body> Content </body>Теги от <h1> до <h6>
В документе HTML может быть до 6 тегов заголовков. Каждый из тегов представлен числом от 1 до 6 в виде <h1>, <h2>, <h3>, <h4>, <h5> и <h6>.
H1 — самый большой тег заголовка, а H6 — самый маленький.
В HTML-документе теги заголовков могут быть представлены следующим образом:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>Теги от <h1> до <h6> заключаются в тег <body>.
Например, тег <H1> будет заключен как;
<body> <h1> This is heading 1 >/h1> </body><p> </p>
Тег <p> </p> или просто тег абзаца используется, когда вы хотите структурировать содержимое в абзац. Нажатие кнопки «Ввод» в HTML-документе в редакторе кода не создаст новый абзац.
Если вам нужно более одного абзаца, вы должны использовать в документе несколько тегов <p></p>. Теги абзаца должны быть заключены в тег <body>.
Синтаксис тега абзаца:
<p> ….some content here….</p>Если вы хотите иметь четыре абзаца, ваш код будет структурирован следующим образом;
<body> <p>Content for first paragraph.</p> <p>Content for the second paragraph.</p> <p>Content for the fourth paragraph.</p> </body><б> </б>
Тег <b> </b> или просто полужирный отобразит любое содержимое между открывающим <b> и закрывающим </b> жирным шрифтом.
Полужирный тег может быть между заголовком, например H1, или даже внутри тега абзаца.
Это примеры жирного тега;
<b> Bold Tag </b>Фраза «Полужирный тег» будет выделена жирным шрифтом.
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>Пятое издание будет выделено жирным шрифтом.
<я> </я>
Тег курсива, обозначаемый <i>, выделяет курсивом текст внутри тегов.
Например, если у нас есть
<i> These are italics </i>Слова « это курсив » будут выделены курсивом.
<и> </у>
Тег подчеркивания или <u> используется, когда вы хотите подчеркнуть определенный фрагмент текста в HTML-документе.
Например, если у нас есть;
<u> underline these words </u>Фраза между тегами будет подчеркнута.
<центр> </центр>
Тег Center, <center>, используется для центрирования содержимого в документе HTML.
Например, если у нас есть тег h2, написанный как <h2> Centering Content in HTML </h2> , мы можем центрировать его следующим образом;
<center> <h2> Centering Content in HTML </h2> </center><промежуток> </промежуток>
Тег Span, <span>, представляет собой общий встроенный контейнер, который не имеет стиля по умолчанию. Вы можете использовать тег span для группировки текстов, которые вы хотите стилизовать.
Вы можете разместить тег внутри других тегов, таких как заголовки и абзацы;
<h2> Learn HTML <span> from experts </span> and be ready for the market </h2> <p> Learn HTML <span> from experts </span> and be ready for the market </p><дел></дел>
Тег разделения, сокращенно div, — это тег, который позволяет группировать различные теги в HTML-документе.
Тегу div можно присвоить «класс» для добавления внешнего стиля с помощью CSS.
Вот как будет представлен div, содержащий теги h1, h2 и абзаца.
<div > <h1> Learn HTML </h1> <h2> HTML Tags </h2> <p> HTML is a markup language……… </p> </div><em></em>
Акцент, или тег <em>, используется для выделения определенных слов в HTML-документе.
Содержимое между тегами <em> будет отображаться наклонно или курсивом.
Выделенное содержимое абзаца может отображаться в редакторе кода как;
<p> The meeting will start at <em> 0800 hrs </em>, please keep time </p><суп></суп>
Тег <sup> или надстрочный тег позволяет заключаемому тексту быть выше остального. Прекрасным примером является случай, когда вы хотите возвести в квадрат число X и представить его математически, чтобы получить X 2
Синтаксис <sup> внутри тега абзаца будет таким:
<H1> Harveys <sup>TM </sup> Company Limited </H1><sub></sub>
Тег нижнего индекса или <sub> противоположен тегу верхнего индекса. Содержимое, заключенное в тег <sub>, будет отображаться ниже обычной строки текста. Прекрасным примером является запись химической формулы воды как H 2 0.
Синтаксис тега нижнего индекса будет следующим:
Remember that H <sub> 2 </sub> 0 is the chemical formula for water<br>
<br> — это самозакрывающийся тег, обозначающий разрыв. Все содержимое после <br> будет начинаться с новой строки.
Синтаксис <br> внутри абзаца будет таким;
<p> HTML is the abbreviation of Hypertext Markup Language <br> There has been an ongoing debate as to whether it is a programming language or not <br> However, we cannot downplay its importance <br> HTML has been used in more than 95% of websites today </p><ol></ol> и <li> </li>
Тег упорядоченного списка или <ol> должен использоваться с другим тегом, таким как <li>.
Эти два могут отображаться в редакторе кода как;
<ol> <li> Asia </li> <li> Africa </li> <li> Europe </li> </ol>При отображении в браузере содержимое будет пронумеровано.
<img источник = ””/>
Вы можете добавить изображение для визуальной привлекательности или даже логотип. В таком случае пригодится самозакрывающийся тег изображения <img src=""/>.
Синтаксис тега изображения будет следующим:
<img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>Содержимое, заключенное в кавычки, представляет исходный URL.
Подведение итогов
Существует более 100 тегов HTML, но перечисленные выше — это те, которые вы должны знать как новичок. HTML поддерживается в большинстве редакторов кода, поэтому вы можете быть уверены, что никогда не ошибетесь, когда начнете учиться.