In the source code, Outlook.com has this:
<title>Outlook.com - [my email address]</title>
However, when the page is run in a browser it displays with the title underlined in a browser tab:
I am running Firefox 33.0 on Windows XP, however this persists on Firefox 33.0.2 on Windows 7.
How is this possible? There doesn't seem to be any CSS rules defined for the title tag. Is it even possible to style the title tag?
The answer to your question of is it possible to style the tag is no.
From W3C:
The title of a document is specified by the TITLE element. The TITLE
element should occur in the HEAD of the document.
There may only be one title in any document. It should identify the
content of the document in a fairly wide context.
The title is not part of the text of the document, but is a property
of the whole document. It may not contain anchors, paragraph marks, or
highlighting. The title may be used to identify the node in a history
list, to label the window displaying the node, etc. It is not normally
displayed in the text of a document itself. Contrast titles with
headings . The title should ideally be less than 64 characters in
length. That is, many applications will display document titles in
window titles, menus, etc where there is only limited room. Whilst
there is no limit on the length of a title (as it may be automatically
generated from other data), information providers are warned that it
may be truncated if long.
Read More
The browser however could style it tho I'm not sure why they would. I cannot replicate this as I'm using a mac and have a Windows 8 VM, but I would guess the browser handles some URL's differently.
do you have Webmail notifier installed? LINK
Related
Scenario/Request
I would like to send a link to someone, to a website which I don't control / can't change
As the page is quite long (11 paragraphs), I would like to point users to a specific point on webpage
However there are no ID/name attributes in the page, the content is all made-up of either un-named <h2> and <p> tags.
Scenario/Request
Is there anyway I can generate a link to something like a relative CSS anchor (e.g. the 3rd <H2> tag on page, please?
There isn't a cross-browser way to do this yet. There have been two proposals in the last decade with unofficial and/or official implementations, of which one is in active development and may soon be available as a cross-browser standard.
The first proposal was CSS Selectors as Fragment Identifiers, which would have allowed you to use a CSS selector to link to a specific element in the page via a URL fragment:
https://example.com/index.html#css(h2:nth-of-type(3))
(This does not actually represent the 3rd h2 on the page. It is not possible to write a CSS selector for that.)
A draft was written, some discussions were had (that I was personally involved in), and some proofs-of-concept in the form of browser extensions were made, but it never took off. See also CSS selector fragment support
The second proposal, and the one currently in active development, is Text Fragments, which allows you to link to arbitrary text in a URL fragment:
https://example.com/index.html#:~:text=Example Heading
The first implementation was by Google themselves in the form of an extension for Google Chrome and Microsoft Edge, but this feature has since actually been shipped in a number of Chromium-based browsers as of 2020. Try searching for a phrase in your question or my answer.
I have just started learning HTML from W3Schools. I tried my first code and even if I change my title in my HTML code, it doesn’t make any difference. The resulting page remains the same.
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
<h1>HTML lesson 1</h1>
<p>My name is John</p>
</body>
</html>
What difference does it make if I use a random title? what effect will it have?
Look on w3.org at http://www.w3.org/Provider/Style/TITLE.html
It is well explained. Quoting it:
(bolding mine)
The title of a document is specified by the TITLE element. The TITLE element should occur in the HEAD of the document.
There may only be one title in any document. It should identify the content of the document in a fairly wide context.
The title is not part of the text of the document, but is a property of the whole document. It may not contain anchors, paragraph marks, or highlighting. The title may be used to identify the node in a history list, to label the window displaying the node, etc. It is not normally displayed in the text of a document itself. Contrast titles with headings . The title should ideally be less than 64 characters in length. That is, many applications will display document titles in window titles, menus, etc where there is only limited room. Whilst there is no limit on the length of a title (as it may be automatically generated from other data), information providers are warned that it may be truncated if long.
The reason why you don't see any changes in the browser's window title is because the "try it" examples in W3Schools are run in elements called "IFRAME" (you'll learn about them later). The window's title changes according to the tag when the HTML is displayed in that window (not in any nested IFRAME). In W3Schools you are probably reading "Tryit Editor v2.5" instead of the title specified in the HTML because the "main" HTML's title tag contains that string. Try right-clicking anywhere in the page and click "View Source" and check the tag's content.
Most browsers put the <title> in the title of the window or tab.
As explained in previous answers, the title tag is the title of a document and will usually show up on the tab/window of whatever browser is displaying it.
More noteworthy in these days, though, is that the title tag is what many search engines use to display your pages in their search results. Furthermore, the words used in the title of a page are crucial to optimize your position in the search engine rankings (read more about search engine optimization (SEO) online).
Here's an only slightly validated page for more information:
Title Tag
Title tags are one of the most important elements of on-page SEO. They are used by browser tab titles, saved bookmark descriptions, search engine result pages (SERP) and increasingly by social media sites when linking to web pages.
Search engine results page (SERP) displaying the title in a large font.
A missing <title> element from a page will result in an invalid HTML page. You can use Google’s HTML Improvements tool to identify any missing title tags on your website.
What is the "correct" way to deactivate tooltips on a given page so that the title attribute of a tag does not get shown?
There is no specific "correct" way.
If you don't want a title on an element, don't put one there.
If they must exist, you can use JavaScript to remove the title from any element you need to.
The issue here is that how the attribute is displayed is browser dependent - the spec says so:
Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object).
The fact that they display as a tooltip in most visual browsers does not mean they have to be. And there is no specific standard mechanism to "disable" this behavior.
There's LyX and such editors that attempt to ensure you write text that has a distinct structure. I want same behavior from a html5 contentEditable field except I don't know how.
My requirements:
No DIV -tags are created.
Text is not allowed outside a text container. (paragraphs, headings, pre -blocks and inline -elements)
I also need to figure out how to traverse the content and push it to the server in that restricted form.
(I'll also love a good documentation on things I can do for a contenteditable -field)
Here is the DOM specification for what it means for an element to be editable: http://www.w3.org/TR/html5/editing.html#editable
It sounds like just making all the existing paragraph tags and heading tags contenteditable will give you what you want, if I understand what you're asking. If you want the user to be able to insert new paragraphs and headings, the Enter key while editing will insert line breaks as <br> tags in Chrome, but if the user types in HTML tags they'll be escaped and just show up as text. As for inserting other formatted content, that's entirely up to the user agent; my tests in Chrome show that it apparently does not allow the user to insert bold/italic/etc. text.
EDIT: apparently in Chrome (and presumably by extension, Safari as well), pressing Control-I, Control-B, Control-U cause the same behavior you might expect from a rich text editor!
I also tested in Firefox and found that, unlike Chrome and not quite contrary to the spec, it does in fact insert new <p> tags instead of <br>'s, with a _moz_dirty="" attribute added on. You shouldn't need to remove this; if Firefox follows the spec, it'll never break the DOM by inserting text outside a tag that way. But, do note that users using Chrome and Firefox will produce different HTML structures, which you might want to smooth over with Javascript or server-side sanitization... I also don't have IE available on this machine to figure out how it handles newlines, unfortunately, and Microsoft's documentation doesn't specify.
As for pushing it to the server, you can do that with AJAX by pulling the text content of the elements in question (or just make the whole <div> contenteditable), building an array of their text contents, and then POSTing it to the server. This is pretty easy to do with jQuery (further help with this can be provided for this upon request).
I am trying to add different styles within a textarea eg bold, different colors etc
WYSIWYG editors (eg tinyMCE) used in web pages typically do this but I am having trouble working out how they do it.
You cannot do this:
alt text http://www.yart.com.au/test/html.gif
So how do they achieve it?
Owen has the right idea. Those libraries replace the textarea with an iframe and then put the iframe's document into designMode or contentEditable mode. This literally enables you edit the html document in the iframe while the browser then handles the cursor and all keystrokes for you and gives you an api that can be called to make styling changes (bold, italic, and so on). Then when the user submits the form they copy the innerHTML from the iframe into the original textarea. For more details about how to enable this mode and what you can do with it see: https://developer.mozilla.org/En/Rich-Text_Editing_in_Mozilla
However, my suggestion to you is to use one of the existing rich text control libraries if you would like this ability on your site. I have built one before and found that you will spend huge amounts of time dealing with browser inconsistencies in order to get something that works well. Beyond the differences in how you enable editing features, you will also want to normalize the html that is created. For example, IE creates <br> elements when the user presses enter and FF creates <p> tags. For style changes IE uses <b>, <i>, etc. while FF uses spans with style attributes.
Usually they will overlay the textarea with their own display component like a div. As the user types, javascript will take the content typed and apply the styles in the display area. The value of the textarea is the text with the html tags needed to render it in the specified style. So visibly the user sees the styled text.
This is a simplified explanation of course.
I believe tinymce specifically uses a table/iframe for display purposes (which is substituted in place of the existing textarea). Once you're ready to save it copies all the info back to the textarea for processing.