Does anyone know if there is a convention for including inline definitions of words within HTML text?
I've made a documentation platform. It auto-generates glossaries, but I also want the user to have the option of having terms from the glossary definable inline, as the user reads, so they don't have to jump to the glossary page.
Possibilities:
transperambulation (?)
transperambulation [DEF]
transperambulation [def.]
transperambulation (nothing after the word, but the word itself underlined with dotted border)
It would need to be a hover (tooltip) effect as the word may also be a link, so clicking it is reserved for the link target.
Or is this a bad idea in general?
what about the abbr tag? it uses the title attr with a dotted underline http://www.w3schools.com/tags/tag_abbr.asp
i would use that
Related
`<h6><u>TIP</u>: Hover over underlined words for more info</h6>`
`<p title="A delicious bread based food with tomato sauce, served open with melted cheese and other toppings optional"><u>Pizza</u> was used to ensure that the everyone was satisfied during Sprint planning, even if they weren't satisfied with the plan itself :-)</p>`
In the above HTML code, the title tag is giving a tooltip effect on the paragraph. How can this be isolated to span only one word, for this example, the word "Pizza" at the beginning of the sentence, which is also underlined?
Things tried:
Putting the span tags before the title tag and after the word pizza (including the underline tag).
Alternatively trying the tooltip as a link with tooltip in the span like this (got this from a post in Stackoverflow):
Text <span>Tooltip</span>t
Using a reverse editor (html-online.com) to play around with it.
introducing CSS, code example (also gotten from stackoverflow):
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; }
Lastly I tried looking around google and stackoverflow using tags "html" and "tooltip" for the same question answered already, no results. Maybe it's such a basic question that nobody would ask it here, but I am just learning from youtube videos from scratch, any tips appreciated, thank you for your time :-)
There are several methods, however you need to think about screen readers and the non-sighted/low vision users, so think semantic html. It all depends on your use case.
Head on over to MDN for a great resource: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference
Option 1:
You may look at the semantic use of the tag for a definition of a word. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn
Option 2:
You may look at the semantic use of for an abbreviation. This can be used with the dfn tag. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr
Option 3:
You can use span with aria labels to make it relevant to screen readers, however, spans and divs are not semantic by default. Try to avoid using spans if the meaning is semantically relevant. Spans are good for UI and interactive functionality as my preference. Do not forget tags that have a closer coupling and purpose to your use case.
Option 4:
You could use CSS :hover, :target on a span: dfn, abbr elememts to add a visual, not semantic, purely presentational only and non a11y styling to the title.
Additionally
And you can CSS selector element[title] and style those elements that have a title.
Note that the title attribute is the one providing the tooltip hover as a global attribute, and it is available on all tags. Use wisely and sparingly.
And finally, look beyond stack overflow and at web.dev, css tricks and other html/css/browser/front end specialist places.
Here is an advanced one
https://stackdiary.com/useful-css-tricks/#simple-tooltip-using-attr
And please avoid using <u>, <i> etc tags ... these are no longer kosher in use and are only kept in the HTML spec for backwards compatibility.
I've just ran into the <kbd> tag for the first time, and it doesn't appear to do anything besides default the text to monospace, which can be done by simply changing the font to monospace using CSS. Does the <kbd> tag have some underlying logic to it that makes it practical, similar to how the <time> tag translates the code to be machine-readable?
I've traditionally seen in-text changes done via a <span> tag, and it appears the <kbd> tag displays the exact same output as a <span> tag with font-family: monospace. What is the point of the <kbd> tag if it simply changes the font? I've searched on SO and other websites for an explanation, but haven't found anything besides the change in font.
span {
font-family: monospace;
}
<p>Please press <span>Ctrl</span> + <kbd>Shift</kbd>.
The kbd tag is more a semantic tag than a tag used for styling. By default UA is using monospace font to style it but its purpose is to
represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands). ref
In the MDN page you can also read:
The HTML Keyboard Input element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the HTML standard.
It is used to denote user input, often from a keyboard (Useful for tutorials, walkthroughs, etc.) There is no other functionality that it offers.
Although in most user-agent stylesheets it will only change the font to monospace as you have discovered, you can use it to style keyboard or other input the way you want without having to use spans with classes.
After much research and thought I came up with this answer. The kbd tag is just another one of a number of meaningless bland "blank slate"tags that can be used to hang CSS defined properties on. Another is the span tag.I will also point out that for obvious reasons the kbd tag is a favoUrite when using CSS to style a small rectangular image to look like a keyboard key as a nice alternative to simply typing Shift or Ctrl in plain text (see the several hundred examples on the "wiki" at https://en.wikipedia.org/wiki/Table_of_keyboard_shortcuts or any thread regarding keys on stack overflow example:- https://stackoverflow.com/questions/1550019/how-to-hijack-the-caps-lock-key-for-cut-copy\-paste-keyboard-operations
Just my 2 cents worth!! Please keep the change!!
What is the use of the title attribute on a html element?
<div class="myDiv" title="This is the title"> Stuff </div>
Is it intended to be used as a tooltip? Does it have any further use?
Pretty much. The HTML spec calls it advisory text, but it uses the word "tooltip" as well, because that's how it is typically represented:
The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; on interactive content, it could be a label for, or instructions for, use of the element; and so forth. The value is text.
Its role in relation to the content depends entirely on the context given by the content, but in general it serves as optional, supplementary information for that content.
Title attribute is for tool tip. IN title attribute we can pass some text to tell the user for what purpose that particular element is.
This topic is already well explained. But it is important to remember that using the title attribute is not very useful when it comes to HTML accessibility and usability. The use of this attribute is neither recommended by W3C. In W3C words:
Relying on the title attribute is currently discouraged as many user
agents do not expose the attribute in an accessible manner as required
by this specification (e.g., requiring a pointing device such as a
mouse to cause a tooltip to appear, which excludes keyboard-only users
and touch-only users, such as anyone with a modern phone or tablet).
If you give an object a Title, try hovering your mouse over it, It will show a subtext which contains the text you set as title.
"The title attribute allows the author to provide extra information about any element on a page."
Typically, this attribute’s content is rendered as a tooltip that appears when the user hovers the cursor over the element to which the title is applied.
Yeah.. It is mainly intended for tooltip... But also we are using for identification.. Whenever two or more divisions are placed one behind other, to identify each one we can use that.....
The title attribute is a descriptor, like the alt attribute for images. It is not required, but would be good practice to use where it makes sense. An old school example might be if you have a table of information on your page. Adding the title attribute to the table tag with a brief notation of what the table is (e.g. 2014 Daytona 500 Race Results) would make sense.
Once upon a time, search engines treated the contents of title attributes as content. I don't believe they do anymore (though I'm not 100% sure) though.
Hope that helps!
First of all, I realize that styling in HTML should be handled by CSS, and I don't want to change that.
I just want a solid tag I can use for underline, a tag that is meant for underlined text, or one that makes sense to use as such. Then I can style it with CSS.
Now where is that tag?
Why is strong, b, em, i etc. perfectly fine (and often auto-styled in browsers), but underlined is the forbidden fruit?
I would hate to write
<span style="blabla: underline">some underlined text</span>
OR <span class="underlined">some text</span>
when I can just use
<u>hello</u>
and style it?
The u element was meant for underlining, ever since HTML 3.2. HTML 4.01 frowns upon it by “deprecating” it, and HTML5 proposes to redefine its meaning in an obscure manner. Yet, in reality, it works in all browsers, and will keep working, and has the exact effect of underlining.
Whether you should underline anything but links on web pages is a different issue. So is the question whether you should think in terms of logical structure rather than visual rendering.
Underlining text is generally a bad idea because it should be exclusively reserved for links. Users just generally expect to be able to clock on underlined text and have something happen.
That said, there is one main exception I can think of:
Price: <del>£12.34</del> <ins>£9.87</ins>!
Most, if not all browsers will render the new price there with an underline, and people will understand it to be an insertion.
I think the whole issue is better approached if we try to understand what the HTML spec writers are trying to accomplish.
On the early days, HTML was basically the only tool to create hypertext documents so it tried to provide all the necessary stuff. As the web grew up it soon become obvious that this all-in-one solution did not scale. Mixing content and presentation didn't provide full control on either. So two steps were taken:
A new language was created to take care of visuals
HTML itself was cleaned up to focus on content definition
The problem with underline is that it doesn't really have any meaning by itself. It will have a meaning if you assign it one in your app context (you can decide, for instance, that underline text will be used for book authors in your on-line library catalogue). So when the guys at W3C created HTML tags for several content types (titles, abbreviations, dates...) they simply didn't consider underlining: it was deliberately outside the language scope. There's no HTML tag for "underline" for the same reason that there's no tag for "red circle" or "uppercase Comic-Sans text".
Of course, in fact there is a <u> tag but underline is only a serving suggestion because the important part is the semantics—like printing <h1> with a large font.
It is not forbidden , but a better practice not to use it ,as underline tag is deprecated in HTML 4 http://www.w3.org/TR/REC-html40/present/graphics.html#edef-U so won't validate.
Underline an element is more a style quetion. So, it's better to give a class like "underline_style" and in the CSS give the correct rules.
The u element you can still use for underlining but because it's more complex than b, i,strong and em you will need CSS to style it in detail. Underline has style and color property which is not the case with other mentioned elements. You have more on this topic here.
We were discussing with a co-worker and trying to decide on what HTML element to use for a form validation error message.
One of us is saying that we should use a span or a div because it is a part of an input field, and the other is saying that it should be a p element because it is a text.
What do you guys think?
I believe you should use a <label> which directly associates the error message with the input element.
quoting the W3 specs
The LABEL element may be used to attach information to controls.
and
More than one LABEL may be associated with the same control by creating multiple references via the for attribute.
See also Error Message: <span> vs <label>
In principle, the choice of element should be dictated by the meaning, not by "how and where you want to display" it (as #Babiker suggested). That's kind of the whole idea, not to mention the effects the choice will have on (for example) visually-impaired users (for whom the "where you display it" may be totally lost).
It does seem unfortunate that even HTML 5 doesn't have an element for this. Perhaps 'aside' (http://www.w3.org/TR/html5/sections.html#the-aside-element) would be the closest? The spec describes it in Section 4.3.5 as:
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
WCAG2.0 guidelines, on
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Lists as sufficient techniques.
G138: Using semantic markup whenever color cues are used
And
H49: Using semantic markup to mark emphasized or special text
Based on those, I infer that the only appropriate tags for errors are <em> and <strong>
Using <label> in not enough as it shows relationship between the label content and the target field, but doesn't communicate the importance of the content.
There is no right tag to use for an error message. It all depends on how and where you want to display the error. Once you decide on these things, your choices will be narrowed, as tag properties and limitations differ. But how did <p> come in this?
Just throwing into the jar: What about <ul>-Elements. If an input-field's validation fails for more than one reason, than you may want to attach more than one error-message to that field.
Example for an file-upload-field:
The file you tried to upload has the wrong format. (Only png, gif and jpg are allowed)
The file you tried to upload is to large. (Max 1MB)
and so on...
The Zend-Framework Error-Decorators for example are using ul-Elements.
However if I had to choose, between div, p and span, my choice would be div. Best stylable (Background-color for example).
You could use
<pre>Error</pre>