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.)
Атрибут target
По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега . В XHTML применение этого атрибута запрещено.
Синтаксис
Обязательный атрибут
Значения
В качестве значения используется имя окна или фрейма, заданное атрибутом name . Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.
_blank Загружает страницу в новое окно браузера. _self Загружает страницу в текущее окно. _parent Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self .
Значение по умолчанию
Валидация
Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного .
Открыть в новом окне
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
HTML target Attribute
The target attribute specifies where to open the linked document:
Definition and Usage
The target attribute specifies where to open the linked document.
Browser Support
Syntax
Attribute Values
| Value | Description |
|---|---|
| _blank | Opens the linked document in a new window or tab |
| _self | Opens the linked document in the same frame as it was clicked (this is default) |
| _parent | Opens the linked document in the parent frame |
| _top | Opens the linked document in the full body of the window |
| framename | Opens the linked document in the named iframe |
❮ HTML tag
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.