Адрес в HTML


Содержание

HTML тег address

Тег определяет информацию об авторе документа или статьи.

Если тег расположен внутри тега , то он представляет информацию об авторе документа. Если тег расположен внутри тега , то он представляет информацию об авторе статьи.

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

Тег не должен использоваться для предоставления почтового адреса, если только он не является частью информации об авторе.

Как правило, элемент включается наравне с другой информацией в элемент .

HTML ссылки: как создавать ссылки на другие веб-страницы

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

Гипертекстовые ссылки могут использовать абсолютные, а также относительные URL-адреса и адреса относительно корня сайта.

Абсолютные адреса

Это относится к случаю, когда URL-адрес содержит полный путь. Например:

Относительные адреса

В этом случае в URL-адресе указывается путь относительно текущего положения. Например, если мы хотим сослаться на URL-адрес https://www.quackit.com/html/tutorial/ , а наше текущее местоположение — https://www.quackit.com/html/ , нужно использовать следующую ссылку:

Адреса относительно корня сайта

Это относится к URL-адресу ссылки HTML , в котором определен путь относительно корня домена.

Например, если мы хотим ссылаться на URL-адрес https://www.quackit.com/html/tutorial/ , а текущее местоположение — https://www.quackit.com/html/ , нужно использовать следующую ссылку:

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

Цели ссылки

Также можно определить, где будет открыт URL-адрес : в новом окне или в текущем. Это можно сделать с помощью атрибута target . Например, target = «_ blank» открывает URL в новом окне.

Атрибут target может принимать следующие значения:

Ссылки перехода

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

Вот как сделать ссылку в HTML на эту же страницу:

  1. Добавьте идентификатор к цели ссылки

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

  1. Создайте гиперссылку

Теперь создайте гиперссылку. Это делается с помощью идентификатора цели ссылки, которому предшествует символ хэша ( # ):

Приведенные выше фрагменты кода размещены в разных частях документа. Получается примерно следующее:

Это необязательно должна быть одна и та же страница. Можно использовать этот метод, чтобы перейти к идентификатору любой страницы. Для этого перед тем, как вставить ссылку в HTML , добавьте целевой URL-адрес перед символом «#» . Например:

Конечно, предполагается, что на странице есть идентификатор с этим значением.

Ссылки на электронную почту

Также можно создать гиперссылку на адрес электронной почты. Для этого используйте атрибут mailto в теге ссылки:

Нажатие на эту ссылку приведет к открытию вашего почтового клиента по умолчанию с уже заполненным адресом электронной почты получателя.

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

Базовый href

Можно задать URL-адрес по умолчанию, с которого будут начинаться все ссылки HTML на странице. Для этого поместите тег base ( вместе с атрибутом href ) в элемент .

Пример HTML кода :

Данная публикация представляет собой перевод статьи « HTML Links: How to create Links to other Web Pages » , подготовленной дружной командой проекта Интернет-технологии.ру

Веб-разработка. Абсолютные и относительные адреса.

Хотите изучить HTML с помощью наставника бесплатно? Это здесь.

Осталось одно место.

При разработке веб-страниц очень часто приходиться сталкиваться с задачей указания адреса к тому или иному месту в сети Интернет или файлу.

Адреса нужно указывать:

+ Когда вы даете ссылки на что-либо;

+ Когда вставляете изображения;

+ Указываете в качестве фона какое-либо изображение;

Есть 2 основных способа, как вы можете указать адрес на веб-страницах:

Способ 1. Абсолютный адрес.

Способ 2. Относительный адрес.

Каждый из этих способов имеет свои достоинства и недостатки и каждый из них можно использовать в своей ситуации.

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

Относительные адреса:

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

Чтобы понять, как это работает, давайте рассмотрим несколько примеров.

1) Структура следующая. Имеем 2 веб-страницы формата html, которые находятся в одной папке.

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

Например, ссылка с файла file1.html на файл file2.html будет выглядеть просто:

2) Следующая ситуация.

Имеем 2 файла html:

file1.html находится в папке folder1, а file2.html находится на уровень ниже.

Чтобы создать ссылку в файле file1.html на файл file2.html, нужно написать следующий код:


Оператор ../ означает, что происходит обращение на уровень ниже.

3) Теперь обратная ситуация.

Нужно создать ссылку в файле file2.html на файл file1.html.

Для этого используем следующий код:

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

Использовать относительные адреса возможно в том случае, если файлы расположены на одном сайте.

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

Абсолютные адреса.

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

В интернет абсолютный адрес представляет собой url и полный путь относительно домена сайта (его корня) до того места, где лежит файл.

Предположим, что файл лежит в папке folder1, которая лежит в корне сайта site1.ru.

Абсолютный адрес до этого файла будет следующий:

Наверняка вам не раз уже приходилось видеть адреса в таком виде.

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

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

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Или зарегистрируйтесь через социальные сети:

Что такое html тег address и как он работает?

Всем хорошего и бодрого утра! На линии обучения азам сайтостроительства Макс Метелев и сегодня мы рассмотрим такой интересный тег, который применяется в html 5 версии – address.

В него можно включить информацию об авторе и владельце ресурса, а также любые элементы html – ссылки, выделения, текст и т.д.

Илон Маск рекомендует:  animation-name в CSS

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

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

Тег address парный, т.е его нужно закрывать.

Учебник HTML5

» Всё о HTML5 на русском

Использование тега address

Этот элемент был введен еще в спецификации HTML3 в 1995 году и дожил до сегодняшних дней в спецификации HTML5. Но на протяжении всех пятнадцати лет разработчики спорили как правильно использовать этот элемент. Давайте вместе разберемся с этим!

Давайте обратимся к спецификации, где говорится примерно следующее:

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

Из всего вышесказанного можно построить небольшой пример:

p > Над сайтом работали следующие люди: p >
address >
a href =»http://alexandersavelev.com/» > Александр Савельев a > ,
a href =»http://example.com/» > Вася Пупкин a > ,
a href =»http://хтмл5.рф/» > Василий Тёркин a > ,
address >

Теперь давайте разберемся как не следует использовать элемент address? На следующем примере показано неправильное использование этого тега:

address >
Вася Пупкин br >
Чичканова, br >
Тамбов, br >
Россия br >
Tel: +7 (920)XXX XX XX
address >

Никак не можете понять, что тут неправильно? Все очень просто! В спецификации сказано, что элемент address нельзя использовать для выделения почтовых адресов, кроме тех, что явно связаны с данным документом.

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

div class =»vcard» >
p class =»fn» > a class =»url» href =»#» > Вася Пупкин a > p >
p class =»adr» >
span class =»street-address» > Чичканова 35 span > br >
span class =»region» > Тамбов span > br >
span class =»postal-code» > 392008 span > br >
span class =»country-name» > Россия span >
p >
p class =»tel» > +7 (920)XXX XX XX p >
div >

Адрес в HTML

Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

Дизайн лендинга

Создавайте дизайн любых сайтов — для себя и на заказ!

Популярное

  • Главная
  • ->
  • Материалы
  • ->
  • Анатомия URL и относительные адреса

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!


Создайте свой сайт за 3 часа и 30 минут.

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Изучите основы HTML и CSS менее чем за 4 часа.

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

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

*Наведите курсор мыши для приостановки прокрутки.

Анатомия URL и относительные адреса

Наиболее часто используемая схема URL — это http схема. Схема http используется для поиска документов, которые находятся на веб-серверах.

Веб-сервер правильнее называть HTTP-сервером. HTTP — это HyperText Transfer Protocol (Протокол Передачи Гипертекста), специально разработанный для передачи документов по сети Интернет. Он используется для передачи практически любых документов, которые мы загружаем при использовании браузера.

URL со схемой http можно разбить на подчасти, как показано ниже:

1. http

Первая часть — имя схемы, об этом мы уже говорили (см. Структура HTML-документа, понятие URI и URL). Затем идет двоеточие и два слэша (//).

2. WebReference.com

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

Компьютеры в Интернет имеют цифровые адреса, называемые IP-адресами. IP-адрес — это несколько групп чисел в диапазоне от 0 до 255. Например, IP-адрес компьютера, на котором запущен HTTP-сервер сайта WebReference.com, следующий:

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

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

Так была создана система, названная DNS (Domain Name Service или Domain Name System — Система / Сервис Доменных Имен). Назначение DNS — трансформировать имена компьютеров в IP-адреса. В этом случае компьютеры имеют имена, которые легко запомнить пользователям.

Такие адреса называются FQDN (Fully Qualified Domain Name — Полностью Определенное Доменное Имя, или просто Доменное Имя). Доменное Имя компьютера может быть использовано где угодно в сети для того, чтобы однозначно идентифицировать компьютер и перевести его имя в IP-адрес.

Например, доменное имя сайта codeharmony.ruwww.codeharmony.ru. По сути, это просто псевдоним; компьютер может иметь более одного доменного имени, каждое из которых указывает на один и тот же IP-адрес.

Можно, например, получить доступ к моему сайту, используя имя codeharmony.ru, а не www.codeharmony.ru, потому что это тоже алиас (псевдоним) того же самого компьютера.

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

Заметьте, что доменные имена не чувствительны к регистру. www.codeharmony.ru — это то же самое, что и WWW.CODEHARMONY.RU и www.CodeHarmony.ru. Обычно доменные имена пишутся в нижнем регистре, но это не значит, что это единственный способ.

3. :80

Третяя часть URL, которая не является обязательной — это номер порта. Компьютеры имеют определенное количество так называемых портов. Смысл порта в том, что через него происходят взаимодействия определенного рода. Один поддерживает HTTP-взаимодействия, другой — передачу почты и т.п.

Порты имеют свои номера, и большинство взаимодействий «привязаны» к определенным портам, через которые эти взаимодействия осуществляются. HTTP-взаимодействия обычно идут через порт 80, но не обязательно. В случае, если используется порт 80, то его не нужно указывать, если же используется другой порт (что бывает крайне редко), то необходимо указывать его, используя знак двоеточия и номер порта.

Илон Маск рекомендует:  Пример использования свойств ссылок. Java Script

4. html/tutorial2/2.html

Четвертая часть также не обязательна. Это путь до документа, который мы хотим запросить. Путь — это набор символов, разделенных слэшами (/). Это очень похоже на пути до папок и файлов на вашем обычном компьютере. Есть корневая папка (директория), внутри нее есть другие папки, которые, в свою очередь, могут содержать другие папки и файлы. Взгляните на следующие примеры:

/
/html/
/html/tutorial2/2.html
/html

В первом случае мы ссылаемся на корневую директорию. Второй вариант — ссылка на директорию /html/. Третий пример — ссылка на документ 2.html в папке /html/tutorial2/. Наконец, четвертый пример — ссылка на документ html в корневой директории, а не на папку /html/. Это так, потому что в четвертом примере нет в конце слэша.

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

Важно отметить такой момент: путь не имеет ничего общего с форматом возвращаемого документа. В случае с WebReference.com все вышеприведенные примеры вернут HTML-документ.

Также, «расширение» в конце третьего примера (часть .html) не обязательно означает тип документа, как это бывает на операционных системах семейства Windows. Документ http://WebReference.com/cgi-bin/suggest.cgi имеет расширение .cgi, но является при этом HTML-документом.

5. ?query

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

Только что мы рассмотрели синтаксис URL-адресов со схемой http. Вы, вероятно, уже видели подобные адреса сотни раз, бороздя просторы сети; теперь Вы знаете, как они устроены. Ну а сейчас давайте рассмотрим понятие Относительных URL-адресов.

Относительные URL-адреса

URL-адреса, как Вы уже знаете, нужны для того, чтобы указать местоположение чего-то. Зачастую путь до «чего-то» может быть очень длинным, поэтому есть возможность для сокращения длины адресов, используя так называемые относительные адреса.

Все URL-адреса, которые мы рассматривали до этого были абсолютными. Они идентифицируют ресурсы независимо от их контекста. URL-адрес http://WebReference.com/html/ идентифицирует конкретную директорию в не зависимости от того, напечатали ли вы данный адрес в адресной строке, написали на клочке бумаги для своего друга, либо просто вспомнили «в голове».

Относительные же URL-адреса — это способ идентификации ресурса с учетом его контекста.

Вот простая аналогия.

Представьте, что Вы в гостях на Дне Рождения у друга и кто-то спрашивает Вас, где живет какой-то из Ваших знакомых. Вы, вероятно, ответите, что-то вроде: «А вот — через дорогу в 7 доме.» Едва ли Вы скажете: «В России, в г. Москва, в районе Таком-то, на улице Такой-то, в доме номер 7.» В данном случае такой ответ был бы избыточен.

Относительные URL-адреса — что-то вроде этого. Они похожи на объяснения, типа: «вниз по переулку, потом налево, через два квартала по правой стороне.» Они имеют смысл только, если используются в определенном контексте. И этот контекст называется Base URL (Базовый URL).

Базовый URL ресурса — это все, что находится в пределах пути, включая и слэш на конце. Вот некоторые примеры:

Абсолютный URL-адрес Базовый URL-адрес
http://WebReference.com/ http://WebReference.com/
http://WebReference.com/html/ http://WebReference.com/html/
http://WebReference.com/html/about.html http://WebReference.com/html/
http://WebReference.com/foo/bar.html?baz http://WebReference.com/foo/

Таблица ниже показывает относительные адреса, для которых базовым URL является http://WebReference.com/html/ а также те абсолютные адреса, в которые «превращаются» относительные.

Относительный URL-адрес Абсолютный URL-адрес
about.html http://WebReference.com/html/about.html
tutorial1/ http://WebReference.com/html/tutorial1/
tutorial1/2.html http://WebReference.com/html/tutorial1/2.html
/ http://WebReference.com/
//www.internet.com/ http://www.internet.com/
/experts/ http://WebReference.com/experts/
../ http://WebReference.com/
../experts/ http://WebReference.com/experts/
../../../ http://WebReference.com/
./ http://WebReference.com/html/
./about.html http://WebReference.com/html/about.html

Отметим также, что если относительный URL-адрес пуст (не содержит ни одного символа), то он указывает на тот же самый ресурс в котором находится сам.

Да, использование относительных адресов позволяет сэкономить немного времени, но это не повод их использовать.

Очень важно понять то, что они используются только для указания на ресурс в определенном контексте. Это принципиально. Потому что URL-адреса не могут всегда использоваться в одном и том же контексте.

По материалам www.webreference.com
Перевод — Дмитрий Науменко.

P.S. Обратите также внимание на уроки ниже. Первый бесплатный курс позволит вам освоить работу с HTML и научиться создавать «каркасы» для сайтов. Второй курс покажет 5 прикладных техник для «резиновой» верстки сайтов:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Что такое абсолютный и относительный адрес сайта


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

Абсолютный адрес URL

Абсолютный адрес сайта — это полный адрес ссылки включая протокол, домен и путь к файлу. Например:

Подробное описание, что означает протокол http://, доменное имя и другие вопросы рассмотрены в статье про URL.

Относительный адрес URL

В относительном адресе URL отсутствует протокол и адрес домена. Т.е. адрес рассчитывается исходя из текущего домена. Например

Если сделать таблицу соответствия относительных и абсолютных адресов, то получится такая картина:

Абсолютный адрес Относительный адрес
https://zarabotat-na-sajte.ru/wiki/url.html /wiki/url.html
https://zarabotat-na-sajte.ru/uroki-html/chto-takoe-absolyutnyi-i-otnositelnyi-adres-url.html /uroki-html/chto-takoe-absolyutnyi-i-otnositelnyi-adres-url.html
https://zarabotat-na-sajte.ru/investitsii/kak-zarabotat-na-forex.html /investitsii/kak-zarabotat-na-forex.html

Причем относительный адрес можно написать и по другому. Например

Непонятый многими. Тег address.

Тег address относится к малоизведанным тегам, которые редко использует среднестатистический веб разработчик. А зря, не от нечего делать его же придумали. Давай разбираться зачем же этот тег увидел свет, да еще так давно — в 1995 году вместе со спецификацией HTML 2.0.

Неверное предположение

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

Рекомендации W3C о теге address

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

Из приведенного примера в спецификации можно сделать вывод какую именно информацию может содержать этот тег:

  • ФИО автора материала
  • его контактные данные: почтовые адреса, номера телефонов, адреса сайтов и email, icq и так далее
  • дата создания (последней модификации) материала

Примеры

В тему использование address для контактной информации автора статьи (вакансии, резюме, заметки и т.п.):

Если материалы, расположенные на сайте, принадлежат владельцам сайта, тогда контактную информацию расположенную в шапке (подвале или любом другом месте) тоже следует заключить в address:

На странице с контактной информацией тоже можно использовать address, т.к. тут предоставлены координаты и каналы связи с владельцем (автором) сайта.

Но не следует применять address для адресов, не связанных с авторством материала. Например, в каталогах компаний его применение будет ошибкой :

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

Выводы

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

HTML учебник. Бесплатные уроки HTML для начинающих разработчиков и веб-мастеров. Пробуем создать простой HTML сайт.

Ссылки в HTML. Якоря в HTML. Виды HTML навигации. Пути ссылок в HTML

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Ссылка — один из самых важных элементов веб-страницы, при помощи ссылок посетители могут перемещаться по сайтам, ссылки мы используем, чтобы делиться информацией, найденной в интернете с другими людьми. В общем, если бы в HTML не было ссылок, то их обязательно придумали, иначе сейчас мы бы не пользовались сетью Интернет.

Илон Маск рекомендует:  Что такое код asp asprequestqueuemax

Ссылки в HTML. Якоря в HTML. Виды HTML навигации. Пути ссылок в HTML

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

Применение ссылок в HTML

Ссылки – один из самых важных элементов HTML документа, по-другому их еще называют гиперссылками. При помощи HTML ссылок мы можем переходить между страницами на сайте, между сайтами и между разделами HTML документа. Но ссылки могут вести пользователя не только между гипертекстовыми документами, но и на другие документы и файлы других форматов.

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

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

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

Виды ссылок в HTML

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

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

Но HTML ссылки можно разделить еще и на абсолютные и относительные. Абсолютные ссылки содержат абсолютные URL (такие URL не зависят от своего физического расположения и работают везде), например URL главной страницы моего сайта ZametkiNaPolyah.ru является абсолютным и доступен с любого компьютера, подключенного к сети Интернет, по HTTP протоколу. Относительные адреса HTML ссылок строятся относительно какой-нибудь физической области на жестком диске, например, относительно корня сайта или относительно корня диска C, можно даже относительно какой-нибудь отдельной папки.

SEO оптимизаторы делят еще ссылки на внутренние и внешние. Внутренняя HTML ссылка ведет на другую одного и того же сайта. А внешняя HTML ссылка ведет на страницу другого сайта.

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

Атрибуты HTML ссылок

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

  1. Атрибут accesskey. Позволяет активировать HTML ссылку при помощи определенных комбинаций клавиш, которые указываются в данном атрибуте.
  2. Атрибут coords. Позволяет установить координаты активной области HTML ссылки внутри тэга .
  3. Атрибут download. Позволяет сказать браузеру, что данная ссылка является ссылкой на скачивание.
  4. Атрибут href. При помощи этого атрибуты мы можем указать путь, по которому ведет HTML ссылка.
  5. Атрибут hreflang. Этот атрибут определяет язык документа, на который ведет HTML ссылка.
  6. Атрибут name. При помощи данного атрибута мы указываем имя HTML якоря.
  7. Атрибут rel. При помощи атрибут rel мы указываем в каком отношение находится ссылаемая HTML страница, с текущей (на которой находится пользователь).
  8. Атрибут rev. Данный атрибут позволяет задать отношение между текущим документом и тем документом, на который ведет HTML ссылка.
  9. Атрибутs shape Изображения в HTML могут быть ссылками, данный атрибут поможет вам задать область HTML изображения, которая является ссылкой.
  10. Атрибут tabindex. Не у всех ваших посетителей есть мышка, поэтому можно задать порядок получения фокуса HTML ссылки при помощи данного атрибута, чтобы посетителю было удобнее пользоваться вашим сайтом.
  11. Атрибут target. Данный атрибут позволяет указать имя окна или фрейма, куда браузер будет загружать документ, указанный по ссылке.
  12. Атрибут title Полезный атрибут, который позволяет создать подсказку при наведении курсора мыши на HTML ссылку.
  13. Атрибут type Этот атрибут служит для указания MIME-типа документа, на который ведет ссылка.

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

Внешние ссылки в HTML. Межстраничная навигация по сайту

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

Убираем .html, .php и .htm в конце URL-адресов на Apache/Nginx

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

В любом случае, убирать или оставлять эти окончания, решать вам, я же покажу, как это реализовать на статичном сайте (то есть сайте, находящемся не на CMS). Почему только на статичном? Потому что для различных CMS это реализовывается разными методами, о которых я также расскажу в последующих статьях.

Не утверждаю на 100%, что этот метод не будет работать на какой-то из CMS – пробуйте и о результатах отписывайтесь в комментариях.

Убираем .html, .php и .htm на Apache

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

1. Подключитесь к сайту по FTP и в корне сайта найдите файл .htaccess. Откройте его. Если такой файл отсутствует – создайте.

2. Найдите строчку, содержащую:

Сразу после нее вставьте следующие правила.

Если вам необходимо убрать .php:

Если вам необходимо убрать .html:

Если вам необходимо убрать .htm:

Если строчка «RewriteEngine On» отсутствует в файле – добавьте ее в самое начало.

После чего сохраните изменения и отправьте файл обратно на сайт. Если раньше адреса на вашем сайте были вида

то теперь вы можете открыть эту страницу по адресу:

Убираем .html, .php и .htm на Nginx

1. Для того чтобы подобную настройку произвести в Nginx, откройте файл конфигурации по адресу:

в FTP (если вам позволяют права) либо через панель управления сервером.

2. Далее, в секцию location / <…>, вставляем необходимые правила.

Если вам необходимо убрать .php:

Если вам необходимо убрать .html:

Если вам необходимо убрать .htm:

Если в процессе настройки у вас что-то не получается – пишите об этом в комментариях.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL