Несмотря на то, что современные веб-сайты, как правило, создаются с дружественными интерфейсами, полезно знать некоторый базовый HTML. Если вам известны следующие 17 примеров HTML-тегов (и некоторые дополнительные), вы сможете создать базовую веб-страницу с нуля или настроить код, созданный таким приложением, как WordPress.
Мы предоставили примеры кода HTML с выводом для большинства тегов. Если вы хотите увидеть их в действии, загрузите образец HTML-файла в конце статьи. Вы можете поиграть с ним в текстовом редакторе и загрузить его в браузере, чтобы увидеть, что делают ваши изменения.
1. <! DOCTYPE html>
Этот тег вам понадобится в начале каждого HTML-документа, который вы создаете. Это гарантирует, что браузер знает, что он читает HTML, и что он ожидает HTML5, последнюю версию.
Несмотря на то, что это на самом деле не тег HTML, его все же стоит знать.
2. <html>
Это еще один тег, который сообщает браузеру, что он читает HTML. Тег <html> идет сразу после тега DOCTYPE, и вы закрываете его тегом </ html> прямо в конце вашего файла. Все остальное в вашем документе идет между этими тегами.
3. <голова>
Тег <head> начинает раздел заголовка вашего файла. Материал, который идет сюда, не отображается на вашей веб-странице. Вместо этого он содержит метаданные для поисковых систем и информацию для вашего браузера.
Для основных страниц тег <head> будет содержать ваш заголовок, и это все. Но есть несколько других вещей, которые вы можете включить, о которых мы поговорим чуть позже.
4. <title>
Этот тег устанавливает заголовок вашей страницы. Все, что вам нужно сделать, это поместить свой заголовок в тег и закрыть его следующим образом (я также включил теги заголовка):
<head> <title>My Website</title> </head> Это имя, которое будет отображаться в виде заголовка вкладки при открытии в браузере.
5. <мета>
Как и тег заголовка, метаданные помещаются в область заголовка вашей страницы. Метаданные в основном используются поисковыми системами и представляют собой информацию о том, что находится на вашей странице. Существует несколько различных метаполей, но некоторые из них наиболее часто используются:
- описание — основное описание вашей страницы.
- ключевые слова — выбор ключевых слов, применимых к вашей странице.
- автор — автор вашей страницы.
- viewport — тег, который гарантирует, что ваша страница хорошо выглядит на всех устройствах.
Вот пример, который может относиться к этой странице:
<meta name="description" content="A basic HTML tutorial"> <meta name="keywords" content="HTML,code,tags"> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0">
Тег «viewport» всегда должен иметь в качестве содержимого «width = device-width, initial-scale = 1.0», чтобы ваша страница хорошо отображалась на мобильных и настольных устройствах.
6. <тело>
После закрытия раздела заголовка вы попадаете в тело. Вы открываете его с помощью тега <body> и закрываете его с помощью тега </ body>. Это происходит прямо в конце вашего файла, прямо перед тегом </ html>.
Все содержимое вашей веб-страницы находится между этими тегами. Это так просто, как кажется:
<body> Everything you want displayed on your page. </body>
7. <h1>
Тег <h1> определяет заголовок первого уровня на вашей странице. Обычно это заголовок, и в идеале он должен быть только один на каждой странице.
<h2> определяет заголовки второго уровня, такие как заголовки разделов, <h3> подзаголовки третьего уровня и т. д., вплоть до <h6>. Например, имена тегов в этой статье являются заголовками второго уровня.
<h1>Big and Important Header</h1> <h2>Slightly Less Big Header</h2> <h3>Sub-Header</h3>
Результат:
Как вы можете видеть, они становятся меньше на каждом уровне.
8. <p>
Тег абзаца начинает новый абзац. Обычно это вставляет два переноса строки.
Посмотрите, например, на разрыв между предыдущей строкой и этой. Это то, что будет делать тег <p>.
<p>Your first paragraph.</p> <p>Your second paragraph.</p>
Результат:
Ваш первый абзац.
Ваш второй абзац.
Вы также можете использовать стили CSS в своих тегах абзаца, как этот, который изменяет размер текста:
<p style="font-size: 120%;">20% larger text</p>
Результат:
20% больше текста
Чтобы узнать, как использовать CSS для оформления текста, ознакомьтесь с этими учебниками по HTML и CSS .
9. <br>
Тег разрыва строки вставляет один разрыв строки:
<p>The first line.<br> The second line (close to the first one).</p>
Результат:
Первая строка
Вторая строка (рядом с первой).
Аналогичным образом работает тег <hr>. Это рисует горизонтальную линию на вашей странице и хорошо подходит для разделения разделов текста.
10. <strong>
Этот тег определяет важный текст. В общем, это означает, что это будет смелым. Тем не менее, можно использовать CSS для отображения текста <strong> по-другому.
Тем не менее, вы можете смело использовать <strong> для полужирного текста.
<strong>Very important things you want to say.</strong>
Результат:
Очень важные вещи, которые вы хотите сказать.
Если вы знакомы с тегом <b> для полужирного текста, вы все равно можете его использовать. Нет никаких гарантий, что он продолжит работать в будущих версиях HTML, но сейчас он работает.
11. <em>
Как и <b> и <strong>, <em> и <i> связаны между собой. Тег <em> идентифицирует выделенный текст, что обычно означает, что он будет выделен курсивом. Опять же, есть вероятность, что CSS заставит выделенный текст отображаться по-другому.
<em>An emphasized line.</em>
Результат:
Выделенная линия.
Тег <i> все еще работает, но, опять же, вполне возможно, что он будет устаревшим в будущих версиях HTML.
12. <a>
Тег <a> или якорь позволяет создавать ссылки. Простая ссылка выглядит так:
<a href="//www..com/>Go to </a>
Результат:
Атрибут «href» определяет место назначения ссылки. Во многих случаях это будет другой веб-сайт. Это также может быть файл, например изображение или PDF.
Другие полезные атрибуты включают «target» и «title». Атрибут target почти исключительно используется для открытия ссылки в новой вкладке или окне, например:
<a href="//www..com/" target="_blank">Go to in a new tab</a>
Результат:
Атрибут «title» создает всплывающую подсказку. Наведите курсор на ссылку ниже, чтобы увидеть, как это работает:
<a href="//www..com/" title="This is a tool tip">Hover over this to see the tool tip</a>
Результат:
Наведите курсор на это, чтобы увидеть подсказку
13. <img>
Если вы хотите встроить изображение на свою страницу, вам нужно использовать тег изображения. Обычно вы будете использовать его вместе с атрибутом «src». Это указывает на источник изображения, например:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg">
Результат:
Доступны другие атрибуты, такие как «высота», «ширина» и «alt». Вот как это может выглядеть:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg" alt="the name of your image">
Как и следовало ожидать, атрибуты «height» и «width» устанавливают высоту и ширину изображения. В целом, рекомендуется установить только один из них, чтобы изображение масштабировалось правильно. Если вы используете оба, вы можете получить растянутое или сжатое изображение.
Тег «alt» сообщает браузеру, какой текст отображать, если изображение не может быть отображено, и это хорошая идея для включения в любое изображение. Если у кого-то особенно медленное соединение или старый браузер, он все равно может понять, что должно быть на вашей странице.
14. <ol>
Тег упорядоченного списка позволяет создать упорядоченный список. В общем, это означает, что вы получите нумерованный список. Каждый элемент в списке нуждается в теге элемента списка (<li>), поэтому ваш список будет выглядеть следующим образом:
<ol> <li>First thing</li> <li>Second thing</li> <li>Third thing</li> </ol>
Результат:
- Первым делом
- Вторая вещь
- Третье
В HTML5 вы можете использовать <ol reversed>, чтобы изменить порядок чисел. И вы можете установить начальное значение с атрибутом start.
Атрибут «type» позволяет указать браузеру, какой тип символа использовать для элементов списка. Это может быть установлено в «1», «A», «a», «I» или «i», устанавливая список для отображения с указанным символом следующим образом:
<ol type="A">
15. <ul>
Неупорядоченный список намного проще, чем его упорядоченный аналог. Это просто маркированный список.
<ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>
Результат:
- Первый предмет
- Второй предмет
- Третий пункт
Неупорядоченные списки также имеют атрибуты «type», и вы можете установить для него «disc», «circle» или «square».
16. <стол>
Хотя использование таблиц для форматирования не приветствуется, во многих случаях вам нужно использовать строки и столбцы для сегментирования информации на вашей странице. Для работы таблицы нужно несколько тегов. Вот пример кода HTML:
<table> <tbody> <tr> <th>1st column</th> <th>2nd column</th> </tr> <tr> <td>Row 1, column 1</td> <td>Row 1, column 2</td> </tr> <td>Row 2, column 1</td> <td>Row 2, column 2</td> </tbody> </table>
Теги <table> и </ table> определяют начало и конец таблицы. Тег <tbody> содержит все содержимое таблицы.
Каждая строка таблицы заключена в тег <tr>. Каждая ячейка в каждой строке заключена в теги <th> для заголовков столбцов или теги <td> для данных столбцов. Вам нужен один из них для каждого столбца в каждой строке.
Результат:
| 1-я колонна | 2-я колонна |
|---|---|
| Строка 1, столбец 1 | Ряд 1, столбец 2 |
| Ряд 2, столбец 1 | Ряд 2, столбец 2 |
17. <blockquote>
Когда вы цитируете другой сайт или человека и хотите, чтобы цитата отличалась от остальной части вашего документа, используйте тег blockquote. Все, что вам нужно сделать, это заключить цитату в открывающий и закрывающий теги блочной цитаты:
<blockquote>The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.</blockquote>
Результат:
Сеть, как я ее представлял, мы еще не видели. Будущее все еще намного больше, чем прошлое.
Точное форматирование, которое вы используете, может зависеть от используемого вами браузера или CSS вашего сайта. Но тег остается прежним.
Вперед и HTML
С помощью этих 17 примеров HTML (и их количества) вы сможете создать простой веб-сайт. простого Чтобы увидеть, как собрать их все вместе, вы можете скачать наш пример HTML-страницы . Откройте его в браузере, чтобы увидеть, как все это происходит вместе, или в текстовом редакторе, чтобы увидеть, как именно работает код .
Чтобы получить дополнительные уроки HTML, попробуйте эти приложения для микрообучения для кодирования