Понимание страницы Index.html на веб-сайте

Для управления текстом и изменения его вида существует достаточно большое количество различных элементов. Что не удивительно, ведь текст — это самый популярный вид информации.

The index.html page is the most common name used for the default page shown on a website if no other page is specified when a visitor requests the site. In other words, index.html is the name used for the homepage of the website.

One of the very first things you learn as you begin dipping your toes into the waters of website design is how to save your documents as web pages. Many tutorials and articles about getting started with web design will instruct you to save your initial HTML document with the file name index.html. Let’s take a look at the meaning behind this particular naming convention which is, indeed, an industry-wide standard.

Derek Abella / Lifewire

Career Karma recieves compensation from our bootcamp partners who are thoroughly vetted before being featured on our website. This commission is reinvested into growing the community to provide coaching at zero cost to their members.

Find the right bootcamp for you

By continuing you agree to our
Terms of Service and Privacy Policy, and you consent to
receive offers and opportunities from Career Karma by telephone, text message, and email.

Введение в HTML и CSS завершено и пора копать немного глубже в HTML и изучить разные компоненты, из которых состоит этот язык.

Чтобы начать создание сайтов мы должны узнать немного о том, какие элементы HTML лучше всего использовать для отображения различных типов содержимого. Важно также понять, как элементы визуально отображаются на веб-странице, а также что различные элементы означают семантически.

Использование надлежащего элемента для работы проходит длинный путь и мы хотим делать обоснованные решения в этом процессе.

Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. В зависимости от положительного или отрицательного значения смещения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. H TML предлагает два элемента для создания индекса: (от англ. superscript) — верхний индекс и (от англ. subscript) — нижний индекс. Текст,
помещённый в один из этих контейнеров, обозначается меньшим размером, чем базовый текст, и смещается относительно него вверх или вниз. В примере 1 приведено совместное использование указанных элементов и стилей для изменения вида текста.

Пример 1. Создание верхнего и нижнего
индекса

В примере одновременно встречается как нижний, так и верхний индекс. Для изменения начертания шрифта индекса применяются стили, которые задают единое оформление (рис. 1).

Рис. 1. Вид индексов после применения стилей

Можно вообще отказаться от использования и в пользу стилей. Аналогом этих элементов служит свойство , заставляющее текст смещаться по вертикали на заданное расстояние. В частности, в примере 2 в качестве значения применяется 0.8em для верхнего индекса и -0.5em для нижнего. Em — это относительная единица, равная размеру текущего шрифта. Например, 0.5em говорит о том, что текст надо сдвинуть на половину размера шрифта.

Пример 2. Использование стилей для управления индексами

В примере сама формула выводится увеличенным размером, символы верхнего индекса устанавливаются красным цветом, а нижние — синим (рис. 2).

Рис. 2. Управление положением и видом нижнего и верхнего индекса

Использование элемента делает код громоздким, поэтому лучше переопределить стили и , в частности, задать положение индекса, цвет и курсивное начертание.

Верхний и нижний индексы

Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз (рис. 5). В зависимости от положения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. H TML предлагает два элемента для создания индекса:  — верхний индекс (от англ. superscript) и  — индекс нижний (от англ. subscript). Текст внутри этих элементов обозначается меньшим размером, чем обычный текст, и смещается вверх или вниз.

Рис. 5. Базовая линия текста

В примере 5 показано применение нижнего индекса для химической формулы.

Пример 5. Использование нижнего индекса

Результат данного примера показан на рис. 6.

В примере 6 показано применение верхнего индекса для математической формулы.

Пример 6. Использование верхнего индекса

Результат данного примера показан на рис. 7.

Резюме

Семантика, как указано в этом уроке, играет важную роль для обеспечения HTML структурой и смыслом. Двигаясь вперед, мы периодически будем вводить новые элементы, каждый из которых содержит собственное смысловое значение. Смысл всех этих элементов в том, чтобы придать большее значение нашему содержимому.

Ещё раз, в этом уроке мы рассмотрели следующее:

Надеюсь, вы начинаете чувствовать себя довольно уверенно с HTML. Осталось немного, что нам ещё следует изучить, но основа уже на месте. Далее мы глубже взглянем на CSS.

На практике

На данный момент нашему сайту Styles Conference не хватает реальной структуры и содержимого для него. Потратим немного времени, чтобы немного расширить нашу главную страницу.

Рис. 2.02. Наша страница после добавления нового содержимого и структуры

Специальные символы

Элемент внутри , а также внутри содержит кое-что интересное, в частности, несколько специальных символов.

Специальные символы включают в себя различные знаки препинания, буквы с диакритическими знаками и символы. Когда они набирается непосредственно в HTML, то могут быть неправильно поняты или ошибочно приняты за другую букву, поэтому должны быть кодированы.

Каждый специальный символ начинается с амперсанда (&) и заканчивается точкой с запятой. Всё, что находится между ними, является уникальным кодом символа, будь это имя или число.

Например, мы могли бы кодировать слово «resumé» как «resumé». В нашем заголовке мы кодировали среднее и длинное тире, а в подвале символ авторского права. Для справки, длинный список кодов символов можно найти на Copy Paste Character.

Особенности текста в HTML

Прежде чем редактировать код веб-страницы, следует принять во внимание некоторые особенности, которые присущи HTML при работе с текстом.

Любое количество пробелов идущих подряд, в браузере отображается как один

Сколько бы вы не поставили пробелов между словами, это никак не повлияет на конечный вид текста. То же правило относится к символам табуляции и переносу текста. Приведённые ниже строки будут отображаться на веб-странице одинаково, несмотря на их разное написание.

Исключением из этого правила является элемент , содержимое которого отображается именно так, как оно указано в коде, с учётом всех пробелов. По этой причине часто применяется для фрагментов программ, где важны пробелы (пример 1).

Результат данного примера показан на рис. 1.

Текст занимает всю ширину окна браузера

Если вы просто напишете одну длинную строку в коде HTML, то в браузере она будет отформатирована так, чтобы текст поместился по ширине. Под форматированием подразумевается автоматическое добавление переносов текста там, где есть пробел или дефис. Соответственно, переносы текста будут меняться в зависимости от диагонали экрана устройства и размеров окна браузера.

Создание структуры

Долгое время структура веб-страницы была построена с помощью . Проблема в том, что они не обеспечивают семантическое значение и было довольно трудно определить их смысл. К счастью в HTML5 введены новые структурные базовые элементы, в том числе , , , , и .

Все эти новые элементы предназначены, чтобы придать значение организации наших страниц и улучшить семантику структуры. Это всё блочные элементы и у них нет предполагаемой позиции или стиля. Кроме того, все эти элементы могут быть использованы несколько раз на одной странице, при условии, что каждое использование отражает надлежащее смысловое значение.

Давайте засучим рукава и взглянем на них ближе.

Рис. 2.01. Один из возможных примеров структурных элементов HTML5, придающих смысл организации нашим страницам

<header>

Элемент применяется для идентификации верхней части страницы, статьи, раздела, или другого сегмента страницы. В общем, может включать в себя заголовок, вводный текст и даже навигацию.

Элемент является структурным элементом, который описывает заголовок сегмента страницы. Он находится внутри элемента .

Элемент не отображается на странице и используется в метаданных, которые включают название документа, а также ссылки на внешние файлы. Он находится непосредственно в элементе .

Элементы заголовка от до используются для обозначения нескольких уровней текстовых заголовков всей страницы.

Навигация

Чаще всего ссылки внутри элемента будут вести на другие страницы в пределах одного сайта или частей той же веб-страницы. Разные одноразовые ссылки не должны быть обернуты элементом , они должны использовать только элемент .

<article>

Элемент применяется для идентификации независимого, самостоятельного раздела содержимого, который можно классифицировать как изолированный или повторно используемый. Мы часто используем элемент для разметки постов блога, газетных статей, контента добавляемого пользователями и тому подобное.

При принятии решения, следует ли использовать элемент , мы должны определить, может ли содержимое элемента быть повторено в других местах без какой-либо путаницы. Если содержимое элемента было удалено из контекста страницы и помещено, к примеру, в электронную почту или печатную работу, то в содержимом по прежнему должен остаться смысл.

<section>

Элемент применяется для идентификации тематической группы содержимого, которая, как правило, но не всегда, включает в себя заголовок. Группа контента внутри может носить общий характер, но полезно определить всё содержимое как связанное между собой.

Элемент обычно используется для разделения страницы и обеспечения на ней иерархии.

Выбор между элементами <article>, <section> или <div>

Порой довольно трудно решить, какой из элементов , или лучше подходит для работы, основываясь на его смысловом значении. Хитростью, как и с любым семантическим выбором, является просмотр содержимого.

Оба элемента и организуют структуру документа и помогают наметить его схему. Если содержимое сгруппировано исключительно для стилизации и не несёт ценность для схемы документа, используйте элемент .

Если содержимое добавляется к схеме документа и может быть независимо повторено или перенесено, используйте элемент .

Если содержимое добавляется к схеме документа и представляет собой тематическую группу содержимого, используйте элемент .

<aside>

Элемент содержит контент, такой как боковые панели, вставки или краткие пояснения, который косвенно связан к окружающим его содержимым. К примеру, при использовании внутри элемента , может определить содержимое, связанное с автором статьи.

Мы можем инстинктивно думать об элементе в качестве элемента, который отображается слева или справа на странице. Однако мы должны помнить, что все структурные элементы, включая , являются блочными и как таковые выводятся с новой строки и занимают всю доступную ширину страницы или элемента, в который они вложены, также известного как их родительский элемент.

Мы обсудим как изменить положение элемента, поместив его справа или слева в группе контента, в уроке 5 «Позиционирование содержимого».

<footer>

Элемент определяет завершение или конец страницы, статьи, раздела или другого сегмента страницы. Обычно элемент находится в нижней части его родителя. Содержимое внутри должно быть связанной информацией и не должно расходиться с документом или разделом, внутри которого находится.

Со структурными и текстовыми элементами за пазухой наши знания HTML действительно начинает работать вместе. Сейчас самое время вернуться к нашему сайту Styles Conference и посмотреть, как мы можем немного улучшить его структуру.

Создание гиперссылок

Наряду с текстом, одним из основных компонентов Интернета выступает гиперссылка, которая обеспечивает связь одной веб-страницы или ресурса с другой. Гиперссылки создаются с помощью строчного элемента . Чтобы создать ссылку с одной страницы (или ресурса) на другую, требуется атрибут (от hyperlink reference). Он определяет назначение ссылки.

Например, нажав на текст «Shay», который находится внутри ссылки со значением атрибута как , мы перенесём пользователя на мой сайт.

Блочные элементы со ссылками

По своей природе элемент является строчным элементом и в соответствии с веб-стандартами, строчные элементы не могут оборачивать элементы блочные. С внедрением HTML5, однако, ссылкам специально разрешили оборачивать блочные, строчные и вообще любые элементы. Это отход от соглашений стандартов, но допустимо для превращения всего блока содержимого на странице в ссылку.

Относительные и абсолютные пути

Двумя наиболее распространёнными типами ссылок являются ссылки на другие страницы этого же сайта и ссылки на другие сайты. Эти ссылки различаются по значению атрибута , известному также как пути.

Ссылки, ведущие на другие страницы того же сайта, будут содержать относительный путь, который не включает домен (.ru, .com, .org, .edu и др.) в значении атрибута . Поскольку ссылка указывает на другую страницу этого же сайта, значение href должно включать в себя только имя связанной страницы: about.html, например.

Если страница в ссылке находится в другой папке, то значение также должно отразить это. Скажем, страница about.html находится в папке pages, относительный путь тогда будет pages/about.html.

Ссылки на другие сайты за пределами текущего требуют абсолютный путь, где значение должно включать полный домен. Ссылка на Google http://google.com для атрибута начинается с http и в этом случае включает домен .com.

Ниже щёлкнув на текст «О нас» вы откроете страницу about.html в браузере. Щёлкнув на текст «Google», с другой стороны, в браузере откроется http://google.com.

Ссылка на адрес электронной почты

Иногда мы хотим создать гиперссылку на наш адрес электронной почты, например, текст гиперссылки «Email Me» при щелчке открывает клиент электронной почты пользователя, заданный по умолчанию и предварительно заполняет часть данных. Как минимум, адрес электронной почты и другую информацию, такую как тема и текст письма, которые также могут быть включены.

Дополнительно может быть добавлена тема, текст и другая информация для почты. Чтобы добавить тему, мы включим параметр subject= после адреса. Первый параметр после адреса должен начинаться вопросительным знаком (?), чтобы связать его с адресом гиперссылки. Несколько слов в строке темы требуют кодирование пробелов с помощью %20.

Добавление текста работает аналогичным образом, как и добавление темы, на этот раз с помощью параметра body= в значении href. Поскольку мы связываем один параметр с другим, нам нужно использовать амперсанд (&) для их разделения. Как и с темой, пробелы должны быть кодированы через %20, а перенос строк с помощью %0A.

Вот полный код:

Открытие ссылки в новом окне

Одной из доступных особенностей связанной с гиперссылками является способность определить, где ссылка откроется при щелчке. Как правило, ссылки открываются в том же окне, в котором по ним щёлкнули, однако ссылки также могут быть открыты в новых окнах.

Для открытия ссылки в новом окне используйте атрибут со значением . Этот атрибут определяет, где именно будет отображаться ссылка, а значение задаёт новое окно.

Чтобы открыть http://shayhowe.com в новом окне, код будет выглядеть следующим образом:

Связывание частей одной страницы

Периодически мы увидим гиперссылки, которые указывают на часть той же страницы, где отображается ссылка. Типичным примером таких связей является ссылка «Вернуться наверх», которая возвращает пользователя к верхней части страницы.

Мы можем создать ссылку на странице, сначала установив атрибут , на который мы хотим ссылаться, а затем использовать его значение в атрибуте элемента .

Используя ссылку «Вернуться наверх» в качестве примера, мы можем вставить атрибут вверху для элемента . Теперь мы можем создать ссылку с атрибутом и значением , которая ссылается на начало элемента .

Наш код для этой ссылки в той же странице будет выглядеть следующим образом:

Гиперссылки невероятно полезны и сделали революцию в использовании Интернета. Итак, мы рассмотрели как ссылаться на другие страницы или сайты, как создать ссылки на адрес электронной почты и ссылки на части той же страницы. Прежде чем идти дальше, давайте сделаем несколько собственных ссылок.

Обзор семантики

Так что такое семантика? Семантика в HTML является практикой предоставления смысла и структуры содержимого на странице с помощью соответствующего элемента. Семантический код описывает значение содержимого на странице, независимо от его стиля или внешнего вида. Есть несколько преимуществ от применения семантических элементов — чтобы компьютеры, экранные ридеры, поисковые системы и другие устройства адекватно читали и понимали содержимое веб-страницы. Кроме того, семантический HTML проще для управления и работы с ним, так как ясно показывает, для чего служит каждый фрагмент контента.

Двигаясь вперед и представив новые элементы, мы поговорим о том, что эти элементы на самом деле означают и тип контента, который они представляют лучше. Прежде, чем мы это сделаем давайте рассмотрим два элемента — и , которые на деле не несут никакого семантического смысла. Они существуют только в целях стилизации.

Пришло время превратить одностраничный сайт Styles Conference в полномасштабный сайт с несколькими страницами, все они будут связаны вместе с помощью гиперссылок.

Официально мы больше не работаем с одной страницы, а работаем в действительности с полноценным сайтом.

Рис. 2.03. Наша страница после всех добавленных разных ссылок и навигации

Демонстрация и исходный код

Most web servers start out with the directory structure visible when someone comes to a directory without a default file. This view shows them information about the website that would otherwise be hidden, such as directories and other files in that folder. This transparency can be helpful during a site’s development, but after a site is live, allowing for directory viewing can be a security vulnerability.

If you are pressed for time and want to control this on your own, an easy workaround is to simply write a default web page and name it index.html. Uploading that file to your directory will help close that potential security hole. Additionally, it is also a good idea to also contact your hosting provider and ask for directory viewing to be disabled.

Заголовки

Заголовки выполняют важную функцию на веб-странице — с их помощью происходит систематизация текста и определяется иерархия подразделов. Это учитывается поисковыми системами при индексации веб-страницы и при отображении результатов поиска.

В HTML для заголовков есть шесть элементов от до . Элемент определяет заголовок первого уровня, он самый значимый и применяется обычно для заголовка статьи или поста блога. Элемент определяет заголовок второго уровня, он используется, как правило, для подзаголовков. Последним по иерархии идёт .

Синтаксис создания заголовков показан в примере 4.

Пример 4. Добавление заголовков

Результат данного примера показан на рис. 4. Содержимое элемента отображается самым крупным шрифтом жирного начертания, а  — самым мелким.

Рис. 4. Вид заголовков на веб-странице

Как правило, на веб-странице применяют заголовки с первого по третий уровень, их вполне достаточно. Редко когда приходится использовать заголовки более низкого уровня.

Переносы в тексте

HTML произвольно переносит текст на новую строку в тех местах, где встречается пробел или дефис. Но по правилам русского языка в некоторых случаях переносы запрещены. Так, нельзя разрывать переносом сокращения, вроде «т. д.», отрывать инициалы от фамилии, от значения единицы измерения (5 км) и обозначение года (1917 г.) и др. Чтобы запретить перенос в определённых местах вместо пробела применяется неразрывный пробел &nbsp;, как показано в примере 8.

Пример 8. Неразрывный пробел

И, наоборот, там, где в длинных словах желательно поставить перенос строки, вы можете использовать элемент или спецсимвол . И тот и другой вариант работает одинаково — слово отображается целиком, когда оно помещается в строке, а если не помещается, то в указанных местах делается перенос (пример 9). Есть только небольшая разница в отображении — добавляет при переносе дефис, а нет.

Пример 9. Переносы в тексте

Последнее изменение: 05.08.2023

Other Default Page Names

Besides index.html, there are other default page names that some sites use, including:

The reality is that a web server can be configured to recognize any file you want as the default for that site. That being the case, it’s still a good idea to stick with index.html or index.htm because it is immediately recognized on most servers without any additional configuration needed. While default.htm is sometimes used on Windows servers, using index.html all but ensures that no matter where you choose to host your site, including if you choose to change hosting providers in the future, your default homepage will still be recognized and displayed.

Абзацы

Как правило, блоки текста разделяют между собой абзацами. По умолчанию между абзацами существует небольшой вертикальный отступ, называемый отбивкой. Синтаксис создания абзацев следующий.

Каждый абзац начинается с открывающего тега и заканчивается закрывающим тегом . В примере 2 показано применение нескольких абзацев.

Пример 2. Использование абзацев

Результат данного примера показан на рис. 2.

Рис. 2. Абзацы текста

Как видно из приведённого рисунка, при использовании элемента между абзацами возникают отступы. От них можно избавиться, если в местах переноса строк добавить элемент . В отличие от абзаца, не создаёт дополнительных вертикальных отступов между строк и может применяться практически в любом тексте.

Так, текст примера 1 с учётом переноса строк будет преобразован следующим образом (пример 3).

Результат примера продемонстрирован на рис. 3. Видно, что расстояние между строками текста уменьшилось и текст приобрёл более компактный вид.

Рис. 3. Вид текста с учётом переносов

Учтите, что один абзац нельзя вкладывать внутрь другого.

Использование текстовых элементов

Существует много различных форм медиа, однако текст является преобладающим. Соответственно, есть целый набор разных элементов для отображения текста на веб-странице. Сейчас мы остановимся на наиболее популярных элементах, включая заголовки, абзацы, жирный шрифт для демонстрации важности и курсив для акцента. Позже, в уроке «Работа с типографикой» мы ближе рассмотрим как задавать стиль текста.

Заголовки являются блочными элементами и у них есть шесть разных рангов от до . Заголовки помогают быстро разбить содержимое и установить иерархию и они являются ключевыми идентификаторами для пользователей, читающих страницу. Заголовки также помогают поисковым системам индексировать и определять содержание на странице.

Заголовки должны быть использованы в порядке, соответствующему содержанию страницы. Основной заголовок страницы или раздела должен быть размечен с помощью элемента , а последующие заголовки должны использовать элементы , , , и , при необходимости.

Каждый уровень заголовка должен применяться с семантическим смыслом и не должен использоваться, чтобы сделать текст жирным или большим, для этого есть другие, более эффективные способы.

Вот пример HTML для всех разных заголовков и результат отображения на веб-странице.

Демонстрация заголовков

За заголовками часто следуют абзацы. Они определяются с помощью блочного элемента . Абзацы могут следовать один за другим, добавляя информацию на страницу по необходимости. Вот пример того, как настроить абзацы.

Демонстрация абзацев

Чтобы сделать текст жирным и привлечь к нему внимание мы будем использовать строчный элемент . Есть два элемента, которые выделят для нас текст жирным шрифтом: элементы и . Важно понимать семантическую разницу между ними.

Элемент семантически используется, чтобы придать сильное значение тексту и таким образом является наиболее популярным вариантом для жирного текста. Элемент , с другой стороны, семантически означает стилистическое выделение текста, который не всегда является лучшим выбором для текста заслуживающего внимания. Мы должны оценить значимость текста для которого хотим установить жирность и выбрать соответствующий элемент.

Вот два варианта HTML создания жирного текста в действии:

Демонстрация важного и жирного текста

Для курсивного текста, на котором тем самым делается акцент, мы будем использовать строчный элемент . Как и с элементами для жирного текста, имеются два разных элемента, которые устанавливают курсивный текст, каждый со своим семантическим смыслом.

Элемент применяется семантически чтобы сделать акцент на тексте, это наиболее популярный вариант для курсива. Другой вариант — это элемент , он применяется семантически для передачи текста другим голосом или тоном, почти как если бы оно было заключено в кавычки. Опять же, нам нужно будет оценить значение текста, который мы хотим выделить курсивом, и выбрать соответствующий элемент.

Вот код HTML для курсива:

Демонстрация акцента и курсивного текста

Эти текстовые элементы довольно удобны чтобы вдохнуть в наш контент жизнь. В дополнение к этому, существуют структурные элементы. В то время как текстовые элементы определяют заголовки и абзацы, структурные элементы определяют группы контента, такие как «шапка», «статья», «подвал» и др. Давайте взглянем на них.

и — это элементы HTML, которые действуют как контейнеры исключительно для целей стилизации. В виде основных контейнеров они не несут какого-либо всеобъемлющего смысла или семантического значения. Абзацы семантически уже потому, что содержимое внутри элемента известно и понятно как абзац. и не содержат какого-либо значения и являются просто контейнерами.

Блочные и строчные элементы

Большинство элементов либо блочные, либо строчные. В чём разница?

Блочные элементы начинаются с новой строки, накладываются друг на друга и занимают всю доступную ширину. Блочные элементы могут быть вложены друг в друга и обёртывать строчные элементы. Обычно мы видим как блочные элементы используются для больших кусков контента, такого как абзацы.

Строчные элементы не начинаются с новой строки. Они попадают в обычный поток документа, выстраиваются друг за другом, а их ширина основана на их содержимом. Строчные элементы могут быть вложены друг в друга, однако, они не могут обёртывать блочные элементы. Обычно мы видим строчные элементы в качестве маленьких кусков контента, таких как отдельные слова.

И и , однако, являются чрезвычайно важными при создании сайта, потому что они дают нам возможность применять целевые стили к набору контента.

является блочным элементом, который обычно используется для идентификации больших групп содержимого и который помогает построить макет и дизайн веб-страницы. с другой стороны является строчным элементом и обычно применяется для идентификации мелких групп текста внутри блочного элемента.

Мы обычно видим и с атрибутом или в целях стилизации. Выбор значения или имени атрибута или требует некоторого внимания. Мы хотим, чтобы выбранное значение было связано с содержимым элемента, а не с его оформлением.

Например, если у нас есть с оранжевым фоном, который содержит ссылки социальных сетей, нашей первой мыслью может быть дать значение как . Что произойдёт, если оранжевый фон позже сменится на синий? Значение класса потеряет смысл. Более разумным выбором для значения будет , поскольку он относится к содержимому , а не к его стилю.

Sometimes when someone visits the website, they do so without specifying one of these specific files in the address that they use for the URL. For example:

Even though there is no page listed in the URL request made to the server, that web server still needs to deliver a page for this request so that the browser has something to display. The file that will be delivered is the default page for that directory. Basically, if no file is requested, the server knows which one to serve up by default. On most web servers, the default page in a directory is named

In essence, when you go to a URL and specify a specific file, that is what the server will deliver. If you do not specify a file name, the server looks for a default file and displays that automatically—almost as if you had typed in that file name in the URL.

Преимуществом кодировки UTF-8 является то, что она позволяет напрямую вставлять символы, которых на клавиатуре нет, к примеру знаки зодиака. На сайте utf8icons.com вы можете найти множество различных символов, скопировать их и вставить в свой код HTML. Главное, чтобы текстовый редактор поддерживал кодировку UTF-8.

Спецсимвол начинается с амперсанда, затем идёт текстовое обозначение символа и заканчивается всё точкой с запятой. Любое отклонение от такой формы записи приведёт к тому, что символ отображаться не будет.

Таким образом, чтобы вывести код HTML, в тексте мы используем следующую запись (пример 7).

Пример 7. Использование спецсимволов