I got a comment for my question form Tobia Tesan but I can't msg in here.
php echo vs return, which way is better?
He suggest me change to <span class="wuuk_time"> instead of using <b>, which you'll define in a CSS file, thus achieving separation of database logic, output logic and presentation/styling.
First, what is so bad about using <b>?
Second, how do you separation of database logic, output logic and presentation/styling? I use CSS. is that not separation of logic and output?
It's a matter of 'best practices'. Avoiding inline styling, such as the use of the <b> tag is done to improve readability. You can then reuse the class "wuuk_time" throughout your HTML later, as you see fit.
Moreover, if you would like to change the styling to italicized instead of bold for example, it would be easier to change the "wuuk_time" class to reflect your desired changes throughout the webpage as opposed to hunting down all the individual <b> tags in your HTML.
Readability, Maintainability.
Historically, <b> meant 'bold'. Since HTML4 it's meaning have been changed, so now it's a span of text stylistically different from normal text. There is nothing wrong in using <b> tag in your markup as long as you use it according to its semantics.
Related
I tried to search the web about what is the purpose of the HTML <var> Tag and didn't find any good explanation or let say I'm not satisfied yet. I can read what they say about it but I don't understand the purpose. I tried two different lines of code and both gives me the same thing now I need to know what exactly is <var> and why we should use it rather than a single style.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
<p style='font-style:italic'>y = mx + b</p>
Reference to name only one: https://html.com/tags/var/
Funny because I read the explanation but I still don't see what is the use of <var> other than just making the text italic!
Here is how W3Schools defines HTML:
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
The way I see it is that, even though <var> and <i> have the same output printed to the browser, they mean different things, specially if you are "reading" pages without opening a browser like search engines do.
Check it is not particular to the example you mentioned. Look at the example on <b> and <strong> (https://www.w3schools.com/html/html_formatting.asp). They also have the same output but mean different things.
Semantics.
<p> tags are generic paragraph elements, typically used for text.
<var> elements represent the name of a variable in a mathematical expression or a programming context.
If you italicize a paragraph it may resemble the default styling of the <var> element, but that's where the similarities end. Also, they're different to screen readers.
Here's an example using both elements and you can see that semantically, it's a paragraph of text that contains references to variables in a mathematical sense:
<p>The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where <var>l</var> represents the length, <var>w</var> the width and <var>h</var> the height of the box.</p>
When I want to emphasize or discuss a word that is related to computer code inside a block of normal text, I use the <code> tag. For example:
If you set the variable foo to the value 'bar', then something will happen. If you set foo to any other value, then nothing that's any good will happen.
What is the best semantic HTML5 tag to use to emphasize or discuss a word that is not related to computer code? The way I am thinking of this, it would be (or could be) styled like <code> but not monospace. For example:
The word math is a shortened version of the word mathematics, which has its root in some ancient language that I am not going to research right now.
If you're looking for the tag indicates that its content is being referenced / used as an object for discussion
you can use <dfn> tag. According to MDN:
The HTML Definition element (<dfn>) is used to indicate the term being defined within the context of a definition phrase or sentence.
I just found the updated meaning of the <i> tag for HTML5. From MDN:
The HTML <i> element represents a range of text that is set off from the normal text for some reason. Some examples include technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type:
Musa is one of two or three genera in the family Musaceae; it includes bananas and plantains.
It is a good idea to use the class attribute to identify why the element is being used, so that if the presentation needs to change at a later date, it can be done selectively with style sheets.
So, this is what I am going to do for this case... <i class="example"> or similar.
I'm using <label> to wrap an input such that its success and error messages can appear inside its label for association. What do you think is the most semantic markup for this scenario?
<label>
<b>Username</b>
<input>
<strong>Username already taken :(</strong>
</label>
For errors is strong appropriate? Or is span better? Is role=status appropriate?
The WCAG provides an example of error displaying using both aria-invalid and aria-describedby properties.
In your example, the code would be:
<label>
<b>Username</b>
<input aria-invalid="true" aria-describedby="error">
<strong id="error">Username already taken :(</strong>
</label>
The strong is appropriate as it appears to be an important notice. An alert role (rather than status) would be more appropriate to be applied to the #error element according to the W3C.
Using a strong tag is appropriate.
Strong tags signify something is of bigger importance, and the password being incorrect is important, as it blocks the user from proceeding.
Technically both elements can be used to create the appropriate looking error message that you are looking for (with the proper css). The most semantic, in my opinion would be to use the Strong tag, purely because I would want to stress the importance of a password being incorrect, without needing to use the font-weight:bold;in css.
Also since the question of accessibility is involved, the Strong tag is better for screen readers and in turn makes it more accessible.
Overall, I think its quicker, easier and better to use <strong>over <span> in this scenario.
Strong is good because "Username is already taken" is a serious notice rather than a casual one.
I'd suggest to keep it strong tag
and also make use of CSS red color to display it as an error.
Yet another tag that was given new meaning in HTML5, <small> apparently lives on:
http://www.w3.org/TR/html-markup/small.html#small
The small element represents so-called “fine print” or “small print”,
such as legal disclaimers and caveats.
This unofficial reference seems to take it a little further:
http://html5doctor.com/small-hr-element/
<small> is now for side comments, which are the inline equivalent of
<aside> — content which is not the main focus of the page. A common
example is inline legalese, such as a copyright statement in a page
footer, a disclaimer, or licensing information. It can also be used
for attribution.
I have a list of people I want to display, which includes their real name and nickname. The nickname is sort of an "aside", and I want to style it with lighter text:
<li>Laurence Tureaud <small>(Mr.T)</small></li>
I'll need to do something like this for several sections of the site (people, products, locations), so I'm trying to develop a sensible standard. I know I can use <span class="quiet"> or something like that, but I'm trying to avoid arbitrary class names and use the correct HTML element (if there is one).
Is <small> appropriate for this, or is there another element or markup structure that would be appropriate?
The spec you're looking at is old, you should look at the HTML5 spec:
https://html.spec.whatwg.org/multipage/
I suggest <em> here instead of small:
<p>Laurence Tureaud also called <em>Mr. T</em> is famous for his role
in the tv series A-TEAM.</p>
<small> is not used commonly in an article sentence, but like this:
<footer>
<p>
Search articles about Laurence Tureaud,
<small>or try articles about A-TEAM.</small>
</p>
</footer>
<footer>
<p>
Call the Laurence Tureaud's "life trainer chat line" at
555-1122334455 <small>($1.99 for 1 minute)</small>
</p>
</footer>
Article sentence:
<p>
My job is very interesting and I love it: I work in an office
<small>(123 St. Rome, Italy)</small> with a lot of funny guys that share
my exact interests.
</p>
Personally I would think <small> would not be the correct tag for this as it suggests the text will be physically smaller which doesn't seem to be the case with your example. I think using a <span> would be more appropriate or possible the HTML <aside>. http://dev.w3.org/html5//spec-author-view/the-aside-element.html
You should ask yourself how you would prefer the document to be displayed when style sheets are not applied. Select the markup according to this, instead of scholarly or scholastic theories about “semantic markup” (see my pragmatic guide to HTML).
If smaller size is what you want, then use <small> or <font size=2>. The former is more concise and easier to style, and it is more “resistant” (on some browsers, settings that tell the browser to ignore font sizes specified on web pages do not remove the effect of small). So it’s a rather simple choice.
On the other hand, font size variation inside a line of text is typographically questionable. In printed matter, it is much more often accidental, an error, rather than intentional. Putting something in parentheses is normally a sufficient indication of being somehow secondary
I make heavy use properties from bundles in my application as I strive to keep code maintainable in future. Because of this all HTML text is fetched from a key/value properties file eg. 'index_en.properties'
This has become problematic where I need the browser to render bold text and I don't find any topics online that address this problem.
Best solution I can then up would be to break every fetched value down with use of the
<h:outputText> tags that are child elements of the `<b>` tags.
What I need here is a methodology/tips/solution from someone who uses property files often.
I tried using html escape codes directly in the properties file, but this does not work.
Any tips?
Thank you,
Yucca
PS I doubt CSS will help me here.
Put HTML <b> in bundle and use escape="false" on <h:outputText> to disable standard HTML escaping by the component:
<h:outputText value="#{msg.text}" escape="false" />
Be sure that you never do this on user-controlled input as it would put XSS attack holes open. Also be sure that you don't go overboard with putting HTML in bundles. For basic text formatting with <b>, <u>, <i>, <s> and so on it's okay, but not for semantic markup like <p>, <div>, <h1>, etc.