target=blank
I never knew this! I credit this tweet explanation.
I created a very basic demo page to show off the functionality (code). Watch as a new tab opens when I click the first link. Then, subsequent clicks from either also open tab open that link in that new second tab.
I think use cases here are few and far between. Heck, I’m not even that big of a fan of target=»_blank» . But here’s one I could imagine: documentation.
Say you’ve got a web app where people actively do work. It might make sense to open links to documentation from within that app in a new tab, so they aren’t navigating away from active work. But, maybe you think they don’t need a new tab for every documentation link. You could do like…
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.
Comments
Along with this, consider the
Back in the days of frames it was used to tell the browser which frame to update with a clicked link. A frame with the navigation in it uses the link to update the content frame
Anyone who worked extensively with frames/framesets in the 1990s or early 2000s knows the difference between target=”_blank” and target=”blank/something”. The mercy of the early birth.
I think you’re playing with fire if you use “blank”, it’s too confusingly close to the special keyword “_blank”. You’re going to end up with people mistaking them. Remember targets are a holdover from before we had Ajax and people would use Frames to to update portions of the page with content from the server. Targets were meant to have semantic names like “shopping-cart” or locations like “right-sidebar”. Latterly naming a frame or window “blank” doesn’t make much sense.
Also, be aware of the fact, opening a new tab/window using target=”blank” has potential privacy and security implications (_though I do believe newer browsers now set rel=”noopener” by default). Alex Yumashev, over at Jitbit, has an excellent explanation of the issue(s):
Target=”_blank” – the most underestimated vulnerability ever
If I didn’t blog things because I was worried that some people might already know it, there would be zero blog posts on this site.
I think the thing is every day born mullions of babies and every day thousands people learning something new. That’s why posts with simple and easy info are actual.
If you reload the initial page or open two instances of it, using “_blank” will open two different “new tabs”. Is there a way to keep the new content in only and exactly one opened new tab?
I didn’t knew this, as I am newbie to web development. Thank you for sharing this information. Love to know more .
I have a website that I created from the early days, (around 2009) where I kept all my diary related stuffs. Still working to this day and the site uses framesets. One of the coolest things back then.
One could argue that “the early days” might encompass the entire decade of the 1990s, but I believe that nobody with any knowledge of history would ever classify 2009 as “the early days” for much of anything unless that was the year in which they were born.
Hi! If you open the index.html in two tabs which are practically the same the links with target=”_blank” do not open in the same tab, but actually it would open them in two different tabs for the two initial tabs.
I hope i explained it ok. 🙂
Is there any way to make links from different pages (if i have many instances of the same page ) open in the exact same tab, every time?
The example above is for target=blank (without underscore), not target=_blank (with underscore). Also,
In the case of the no-underscore target=”blank”, the blank part is just a name. It could be anything. It could be target=”foo” or, perhaps to foreshadow the purpose here: target=”open-new-links-in-this-space”.
And,
The difference:
target=”_blank” is a special keyword that will open links in a new tab every time.
target=”blank” will open the first-clicked link in a new tab, but any future links that share target=”blank” will open in that same newly-opened tab.
Thanks for the answer! I understood the difference between “blank” and “_blank”. If i have opened two webpages website.com which uses target = “newTabEveryTime”, for all the hrefs on website.com, it opens two new tabs for the two instances of website.com. Does that have anything to do with tabId? I would really like to find a way a href from any page of the website.com (if you work with lets say 15 opened tabs of the website.com content) to open always in only one new tab.
This has mainly be used to create page using different iframes. I did this to create a simple static website with menu and without php back in 90s.
It is well explained https://www.w3schools.com/html/html_iframe.asp Do not forget security concerns when you use target attribute like explaineed in
https://medium.com/sedeo/how-to-fix-target-blank-a-security-and-performance-issue-in-web-pages-2118eba1ce2f
I thought the target attribute was deprecated but I see they reversed that, I did wonder why a site like this would be writing about a deprecated attribute … hard to keep up, thanks for the enlightenment. I still think it’s an attribute of the past, javascript was simple to implement. Maybe a framework required it, does anyone know?
The best 2021-real-world example of this I can think of is straight out of WordPress! The preview link in the post editor uses target=»wp-preview-1234″ where 1234 is the post ID. That means there’s only ever one tab with the preview of a specific post. If you preview multiple times, it always updates refreshes the existing named tab rather than spawning a second, third, or fourth tab. (Tangent: I’ve seen people accidentally spawn multiple Edit screens of the same post by opening a preview and then clicking the “Edit Page” button in the admin bar. I wonder if it’s possible for a page to name its own tab when opened—not as a new tab—so that the edit links could also prevent people from editing the same page in multiple tabs. I’m guessing no, but maybe there’s some trickery out there that makes it possible.)
Атрибуты ссылок
Атрибут download позволяет скачать файл по ссылке вместо его открытия в браузере. Это иногда полезно для типовых файлов браузера — изображений, текстовых файлов, HTML-документов, PDF. В примере 1 показаны две ссылки на одно и то же изображение. При этом обычная ссылка просто открывает картинку в браузере, а вторая, с атрибутом download , выводит окно для сохранения файла на жёстком диске компьютера.
Пример 1. Использование download
Результат данного примера при щелчке по ссылке для скачивания зависит от настроек браузера (рис. 1). Если установлена галочка «Всегда выдавать запрос на сохранение файлов», то при щелчке откроется окно для указания места сохранения. Если эта галочка не стоит, то файл будет сохранён автоматически в указанную папку.
Рис. 1. Настройки браузера для сохранения файлов
Ссылка с атрибутом download по внешнему виду никак не отличается от рядовых ссылок, поэтому, чтобы как-то обозначить ссылку для скачивания, к ней можно добавить одиночный символ или текст. Для этого мы воспользуемся селектором a[download] , который будет задавать стиль всех элементов с атрибутом download . Сам вывод текста делается с помощью комбинации псевдоэлемента ::before (выводит до ссылки) или ::after (выводит после ссылки) и свойства content (пример 2).
Пример 2. Стилизация ссылок с download
Различные иконки для своих задач можно взять на сайте utf8icons.com. Достаточно найти подходящий символ, скопировать и вставить его как обычный текст в значение свойства content .
Вместо текста можно использовать и картинку в любом подходящем формате. Свойство content позволяет задать адрес изображения через функцию url() . В примере 3 показано как вставить картинку после текста ссылки.
Пример 3. Добавление картинки после текста
Результат данного примера показан на рис. 2.
Рис. 2. Иконка возле ссылки для скачивания
Бесплатно картинки в формате SVG можно взять с сайта svgrepo.com.
У этого метода есть существенный минус — картинка показывается исходного размера и её нельзя масштабировать через CSS. Чтобы обойти это ограничение, будем выводить картинку как фоновую через свойство background-image, а масштабировать её через background-size (пример 4).
Пример 4. Вывод картинки через фон
Псевдоэлементу, созданному через ::after, задаём фиксированные размеры через свойства width и height. Ширина и высота элемента не применяется к строчному элементу, которым здесь является псевдоэлемент, поэтому мы добавляем свойство display со значением inline-block . Сама картинка выводится как фон через свойство background-image, а масштабируется этот фон через background-size. Итоговый результат показан на рис. 3.
Рис. 3. Фоновая картинка идёт после ссылки для скачивания
target
Атрибут target позволяет открывать ссылку в новой вкладке браузера или в конкретном фрейме (он создаётся через ).
Открытие ссылки в новой вкладке
По умолчанию любая ссылка открывается в текущей вкладке, но если к элементу добавить атрибут target со значением _blank , то ссылка откроется в новой вкладке:
_blank (именно так, с подчёркиванием впереди) — это зарезервированное значение для открытия новой вкладки браузера. Каждая ссылка с _blank откроет свою отдельную вкладку. К примеру, если открыть 10 таких ссылок, то браузер создаст 10 вкладок и в каждую из них загрузит свою веб-страницу. Опять же, атрибут target не влияет на внешний вид ссылки, поэтому догадаться, как она будет открыта — в текущей или в новой вкладке, можно только по поведению. Чтобы различать ссылки с target и без, воспользуемся селектором a[target=_blank] , который задаёт стиль ссылок с атрибутом target и значением _blank .
Давайте для разнообразия выведем картинку перед ссылкой через библиотеку иконок Font Awesome.
Сперва подключаем стилевой файл со всеми иконками библиотеки через .
Выбираем на сайте fontawesome.com/icons/ подходящую бесплатную иконку для наших задач и щёлкаем по ней. В открывшейся панели нас интересует код иконки, он показывается рядом со словом Unicode (рис. 4).
Рис. 4. Код иконки Font Awesome
Копируем код и вставляем его как значение свойства content.
Заметьте, что перед кодом иконки ставится косая черта, она показывает что это не просто такой текст, а символ Юникода. Полный код приведён в примере 5.
Пример 5. Стилизация ссылки с target через Font Awesome
Для разнообразия добавляем картинку не после, как это делали раньше, а перед ссылкой через псевдоэлемент ::before (рис. 5).
Рис. 5. Фоновая картинка перед ссылкой в новой вкладке
Открытие ссылки во фрейме
Вместо значения _blank можно указать имя фрейма, заданного атрибутом name элемента . Такие ссылки будут открываться в указанном фрейме, а не в текущей вкладке (пример 6).
Пример 6. Открытие ссылки во фрейме
Чебурашка
Крокодил Гена
Шапокляк
Если совершить ошибку и указать несуществующее имя фрейма, то браузер откроет ссылку в новой вкладке. Однако эта вкладка будет именованной и все ссылки с одним значением target будут открываться уже в ней. В примере 7 в качестве значения target используется blank (без подчёркивания, заметьте). Поскольку фрейма с таким именем в коде нет, то все ссылки будут открываться в одной и той же новой вкладке.
Пример 7. Открытие ссылки в именованной вкладки
hreflang
Атрибут hreflang содержит код языка того сайта, на который ведёт ссылка. К примеру, вот как будет выглядеть HTML с указанием языка (пример 8).
Пример 8. Использование атрибута hreflang
В качестве значения hreflang обычно пишется двухбуквенный код языка. В частности, для русского — ru; для английского — en; для французского —fr. Если требуется уточнить страну языка, то она добавляется через дефис. К примеру, для немецкого языка пишем de, но австрийский вариант немецкого уже пишем как de-AT.
Сам hreflang не оказывает влияния на внешний вид ссылок и предназначен в первую очередь для поисковых систем. Однако, используя этот атрибут, мы можем добавить к ссылкам иконку или текст, опять же, через селектор атрибута (пример 9).
Пример 9. Стилизация ссылок с hreflang
Здесь к каждой ссылке с соответствующим значением атрибута hreflang добавляется текст с обозначением языка. Результат данного примера показан на рис. 6.
Атрибуты download , target , hreflang должны добавляться только при наличии атрибута href .
Итоги
- Мы рассмотрели следующие атрибуты элемента :
- download — позволяет скачать файл по ссылке, а не открывать его в браузере;
- target — используется для открытия ссылок в новой вкладке или в окне фрейма;
- hreflang — указывает язык сайта или веб-страницы по ссылке;