Using `<i>` vs parentheses [closed] - html

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
When writing for the Web, should authors use the <i> element with a class, or should they use regular parentheses to indicate parenthetical phrases?
Example:
<p>I was walking to my car <i class="paren">on the other side of town</i>, when...</p>
<p>I was walking to my car (on the other side of town), when...</p>
Accompanied by:
.paren {
font-style: normal;
&::before {content: '(';}
&::after {content: ')';}
}
Just wondering which is the more semantically appropriate method. Of course the easier choice would be to simply type shift + 9 instead of having to mark it up with HTML, but according to The Draft, the <i> element should be used to indicate a change in voice, which is exactly what parenthetical phrases are: typically preceded by a short pause and a lowering of the volume and pitch of one's voice.
The same question applies to phrases surrounded by em dashes—which serve a similar purpose as phrases in parentheses—although em dashes can be much more flexible.

Parentheses already have meaning in English and you could argue that they are "markup" for a phrase. Parentheses indicate the text's relationship to the enclosing sentence/paragraph and provide a presentation cue (how to read/speak the text). In other words, adding HTML markup doesn't give you much semantic value that isn't already present by virtue of the plain text.
The extra markup serves a purpose if you want to differentiate the phrase from the rest of the paragraph or you need to add attributes that apply only to specific text. Putting tags around text allows you to work with that text in a clear fashion; you can style it, access it with script, parse it with a screen reader, etc. I would probably suggest a span instead of i; even though i has a broad potential usage, parenthesized text seems contrary to the common expectation.
Even though you can set it apart, parenthesized text probably does not always need to be set apart.1
Lastly, using CSS to provide the parentheses seems like excess work for the developer (and anyone reading it afterwards). It adds a level of indirection to a meaning that was already present.
1: There are cases where punctuation does not provide enough structure and should be augmented with markup. A simple example is a telephone number, as described here in 3.3.2.

http://www.w3schools.com/tags/tag_i.asp
I think this is pretty much correct. For accessibility reasons (such as software that reads out text), along with others, if parenthesis indicate a change in tone in text then i tag is the element that is appropriate. As a side note, as the original poster would seem to know : it no longer means "italics"in html5.
Just to beat this to death: most text readers that can handle the i tag probably don't make a sound that sounds like de-emphasis or whatever you might be trying to indicate with parenthesis, so if it's really important to get it just right, i'd suggest creating a class called de-emphsis that does not create parethesis and using parenthesis as well. Sounds like overkill but here's the reasoning.
De-emphasis can be used without parenthesis in other places.
The i tag probably does not sound like de-empahsis to text readers.
Visually impaired users might want to know actual parenthesis are there.
So, the crazy suggestion I'll make is this:
<p>I was walking to my car (<i class="de-emphasis">on the other side of town</i>), when...</p>
I do not have enough reputation to comment or I would have commented, so my final recommendation is an opinion, not a fact or anything like that. Just try to keep accessibility in mind when you make decisions about this kind of stuff.

Related

Is there any meaning behind so many tags in html? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 months ago.
Improve this question
So I am now learning html, and I was just wondering why tags such as cite even exist. When I open a website as a user, I still see the text as italic when the code is written as cite.
I found that the tags are useful when it comes to screen readers, so basically for users that have problems with their vision.
Are there any more reasons for these tags? Thank you so much in advance!
Tags are small snippets of HTML coding that tell engines how to properly “read” your content. In fact, you can vastly improve search engine visibility by adding SEO tags in HTML.
When a search engine’s crawler comes across your content, it takes a look at the HTML tags of the site. This information helps engines like Google determine what your content is about and how to categorize the material.
Some of them also improve how visitors view your content in those search engines. And this is in addition to how social media uses content tags to show your articles.
In the end, it’s HTML tags for SEO that will affect how your website performs on the Internet. Without these tags, you’re far less likely to really connect with an audience.
About cite tag: The tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.). Note: A person's name is not the title of a work. The text in the element usually renders in italic.
Regarding the cite tag, according to MDN:
The HTML element is used to describe a reference to a cited
creative work, and must include the title of that work. The reference
may be in an abbreviated form according to context-appropriate
conventions related to citation metadata.
This enables you to manage all the css applied to quotes easily, were that to be your use case (if you happened to have a lot of quotes on a site). The italics you have observed are part of that css, or rather the default css applied by the browser.
In the broader spectrum
Oftentimes you will run into tags that as of today are not in use anymore. There's different industry standards for different time periods.
All of the tags exist, because there was a reason for web browsers to have a specific way of reading a piece of content.
For example centering a div used to be an almost legendary task that was achievable using multiple methods, all of which had different advantages and disadvantages. However, nowdays it's customary to use the flexbox.
Bottom line is its a way for web browsers and search engines to read and interpret the content you're providing
Tags such as and are used for text decoration nothing else you can also change text fonts and styles by using CSS.

What weird non-font is this text?

This sounds like the dumbest question, but what font is used on this webpage?
http://aquey.info/loaded-broccoli-potato-soup/
If it copy-pastes the same, then it's like this text here:
𝘮𝘦𝘥𝘪𝘶𝘮 𝘴𝘪𝘻𝘦𝘥 𝘤𝘢𝘳𝘳𝘰𝘵𝘴
I checked using DevTools, of course, but I don't think it's really a ... font? If I copy-paste the text into Gmail and choose "remove formatting", the text still looks like same, like Gmail doesn't see it as text. Gmail also doesn't spellcheck within the text. Notepad++ also doesn't un-format the text and View>Summary counts each letter as a word.
I'm seeing if it's possible to read this text in javascript (that's the programming bit), but right now I just want to understand what it is.
They are Unicode glyphs, specifically from the Unicode block Mathematical Alphanumeric Symbols.
As the name implies, they are intended for use within mathematics contexts but are commonly abused in places like social media where other formatting controls are not available to end users.
This may go without saying (and, I fully admit, outside the scope of the question), but it's worth mentioning to future readers that this is extremely counterintuitive to use such glyphs in any context other than their intended use as they pose a huge accessibility problem. It’s especially arbitrary in this particular context when styling the text in question with CSS would net an extremely similar visual effect while preserving usability for screen readers.

Is using the visually hidden technique better than img alt text? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I'm curious whether the CSS visually-hidden technique, most commonly used on font icons, for alternative image text is preferable to using the alt attribute. The argument against the alt attribute being that a screen reader announces "Graphic" any time it sees and <img> which is less natural. For example:
<p>ABC <img src="right-arrow.png" src="converts to"> XYZ</p>
Reads as "ABC graphic converts to XYZ"
<p>
ABC
<span class="visually-hidden">converts to</span>
<img src="right-arrow.png" src="" aria-hidden="true">
XYZ
</p>
Reads as "ABC converts to XYZ"
I can agree it's less natural when screen reader reads "Graphic" every time we focus on some image. From the other hand, straightforward explanation of type of content may be extremely important for people with impairments. Navigating through site is hard enough, so if we can narrow the field of interpretation, it's advised to do it.
What I mean is surfing the Internet with screen reader is not a perfect experience. But for the moment we have to stick to it and by making some things more schematic, we actually make it a little more clearer.
Also we can look to WCAG docs about this issue where there's a few advised techniques to choose from.
Situation A: If a short description can serve the same purpose and present the same information as the non-text content:
G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content using one of the following techniques:
Short text alternative techniques for Situation A:
ARIA6: Using aria-label to provide labels for objects
ARIA10: Using aria-labelledby to provide a text alternative for non-text content
G196: Using a text alternative on one item within a group of images that describes all items in the group
H2: Combining adjacent image and text links for the same resource
H35: Providing text alternatives on applet elements
H37: Using alt attributes on img elements
H53: Using the body of the object element
H86: Providing text alternatives for ASCII art, emoticons, and leetspeak
So basically we could choose also from aria-attributes (and we can sometimes, but only if alt is not enough) BUT there is also one more strong argument for using alt attributes - SEO
Using alt text on your images can make for a better user experience, but it may also help earn you both explicit and implicit SEO benefits. Along with implementing image title and file naming best practices, including alt text may also contribute to image SEO.
While search engine image recognition technology has vastly improved over the years, search crawlers still can't "see" the images on a website page like we can, so it's not wise to leave the interpretation solely in their hands. If they don't understand, or get it wrong, it's possible you could either rank for unintended keywords or miss out on ranking altogether.
quote from here
Both techniques are counterproductive and useless.
In your example :
ABC → XYZ
This means nothing to me. I'm not blind, I have no screenreader. And I still don't understand what is this curious arrow.
Of course having an img tag (with an alt) may help me to understand the meaning of this arrow by hovering with a mouse. But, how can I guess that this arrow is in fact an img tag and that I have to hover with my mouse? How can I do without using a mouse?
Let's try another method :
ABC converts to XYZ
We don't use img tag, we don't use visually hidden text. Everybody with or without screenreader will understand.
There are a lot more people targeted by accessibility than blind people and you should always try to satisfy everybody.

Does the CSS property "text-transform" affect SEO results?

I am building a site with a ton of 1999 style capitalization of navigation and headings. I have been simply adding in the text content as it appears (capitalized), but the other designer on the project insists on using lower case text in his HTML and capitalizing it with an applied style:
.tedious {text-transform:uppercase;}
I understand the argument of separation of style from content, but in this case it really doesn't matter because I personally will not maintain the site, nor do I ever imagine that the client will need to un-capitalize all of this text. The question is: 1. will search engines pay any attention at all to capitalization of text in a document and 2. would a crawler go so far as to read my style sheet and look for such things (me thinks not). I know that BOLD, STRONG, EM, etc have a (diminishing) effect on SEO so I can imagine a scenario where CAPS would, but have never heard of anyone actually claiming, let alone confirming this.
Digging this site the last few months. First post.
It will only effect what is shown in the search results, you colleagues work will show as lower case in the results.
You mentioned separation of style from content, but i'm not convinced that text-transform is a style really, it's a change of content, i'm sure some people would argue the other side though.
if i was a search engine - I wouldn't care about casing. I would care about the content.
From a human readability standpoint - upper case isn't as easy to read.
Well, I was taught at school that all proper nouns (eg names and names of places) should begin with capital letters.
How would Google know whether I was talking about reading (as in a book) or Reading (as in the town of Reading, Berkshire), without taking into account the capitalisation? I would argue that capitalisation is definitely a semantic indicator rather than simply a case of aesthetics, and is therefore one factor that could be used for SEO.
As noted elsewhere, Google clearly does have knowledge of the CSS being used to render a page (eg Google can spot black-hat techniques such as white text on a white background).
So if capitalisation (or lack of) is a relevant SEO factor, can the CSS text-transform (or lack of) value also be an SEO factor?
Yes - because Google considers page speed to be an important factor. Text that doesn't need to be transformed by CSS will display faster.
Answer from google:
I don't think we'd do anything special with all-caps headings, but it feels like the kind of thing you'd want to do in CSS instead of in the content, since it's more about styling.
https://mobile.twitter.com/JohnMu/status/1438159561391751170?s=19

Sentence Spacing [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
What is the best way to present the additional spacing that should come between sentences (using [X]HTML+CSS)?
<p>Lorem ipsum. Dolor sit amet.</p>
^^ wider than word spacing
Since HTML and XML both require whitespace folding, the above two spaces must behave as a single space.
What options are there?  There are a few obvious ones below, what others exist?  (Anything in CSS3?)  What drawbacks, if any, exist for the these, including across different browsers?  (How do the non-breaking spaces below interact with line wrapping?)
..ipsum. Dolor..
..ipsum. Dolor..
..ipsum. Dolor..
There's a lot of FUD on the net which claims this was invented for typewriters, but you can see it in documents such as the U.S. Declaration of Independence.  (And yes, I realize you shouldn't follow all the conventions from over two hundred years ago, the DoI is merely a handy example showing this predates typewriters and monospaced fonts.)  Or a typographer claiming that the additional space is distracting—after changing the background color so the example cannot be anything else!
To put it bluntly, while I appreciate opinions and discussion on whether additional spacing should be used or not (which isn't programming related), that is not what I'm asking. Assume this a requirement, what is the best way to implement it?
You can use white-space: pre-wrap to preserve sequences of spaces, while still wrapping text:
<p style="white-space: pre-wrap;">Lorem ipsum. Dolor sit amet.</p>
This is not supported in IE until IE 8 in IE 8 mode, nor in Firefox until 3.0.
You could also use   or   for spaces one em or one en wide. I do not know how widespread support of these is, but they seem to work on the latest WebKit and Firefox on Mac OS X.
A sequence of two characters will prevent line breaks in that space; that's what means, non-breaking space. The sequence A sentence. Another. causes the to appear on the second line, indenting text slightly, which is probably undesireable. The sequence A sentence. Another. works fine, with line breaking and not adding any extra indentation, though if you use it in justified text, with the at the end of the line, it will prevent that line from being properly justified. is intended for the case of writing someone's name, like Mr. Torvalds, or an abbreviation ending with a ., in which typographical convention says that you shouldn't split it across lines in order to avoid people being confused and thinking the sentence has ended.
So, using sequences of is undesirable. Since this is a stylistic effect, I'd recommend using white-space: pre-wrap, and accepting that the style will be a bit less than ideal on platforms that don't support it.
edit: As pointed out in the comments, white-space: pre-wrap does not work with text-align: justify. However, I've tested out a sampler of different entities using BrowserShots (obnoxious ads, and somewhat flaky and slow, but it's a pretty useful service for the price, which is free). It looks like a pretty wide variety of browsers, on a pretty wide variety of platforms, support   and  , a few that don't still use spaces so the rendering isn't too bad, and only IE 6 on Windows 2000 actually renders them broken, as boxes. BrowserShots doesn't let me choose the exact browser/OS combos I want, so I can't choose IE 6 on XP to see if that's any different. So, that's a plausible answer as long as you can live with IE 6 on Win2K (and maybe XP) broken.
Another possible solution would be to find (or create) a font that has a kerning pair for the ". " combination of characters, to kern them more widely apart. With #font-face support in all of the major browsers at this point, including IE back to IE 5.5 (though IE uses a different format than the other browsers), using your own font is actually becoming reasonable, and falling back to the users default font if not supported would not break anything.
A final possibility might be to talk the CSS committee into adding a style feature that would allow you to specify that you want wider spacing at the end of sentences (which would be determined by a period followed by a space; acronyms and abbreviations would need an in order to avoid getting the wider space). The CSS committee is currently discussing adding more advanced typography support, so now might be a good time to start discussing such a feature.
For all you 'antiquated' and 'mono-space-only' naysayers - Read a book. Professional publishers have used a single   between sentences for time immemorial, and THAT is where the monospace two-space standard came from. Learn from history instead of spouting rhetoric with no basis in fact. I have to admit, though, that an   looks better in most browsers:   is just too wide. What do you think of the readability of this paragraph? Stackoverflow's editor allows some HTML, and I'm using   between all sentences.
Wrap each sentence in a span, and style the span perhaps. (Not a great solution).
isn't the correct character to use, semantically speaking. It's a non-breaking space: a space which won't be used as a line break. Perhaps use a space an a   or a single  , or (my personal recommendation) don't bother with the antiquated double-space style on your page.
Just wanted to throw out there that if your goal is to override the default browser whitespace implementation to provide "proper" sentence spacing, there is actually some debate as to what constitutes proper spacing. It seems that the double-space "standard" is most likely just a carryover from when typewriters used monospace fonts. Money quote:
The Bottomline: Professional
typesetters, designers, and desktop
publishers should use one space only.
Save the double spaces for
typewriting, email, term papers (if
prescribed by the style guide you are
using), or personal correspondence.
For everyone else, do whatever makes
you feel good.
Unless you have this as a strict requirement, it does not seem worth the effort to try and "fix." (I realize this is not an answer to your stated question per se, but wanted to make sure that you are aware of this info as it might influence your decision to spend a lot of time on it.)
is the worst possible method, as it disrupts justification. Pre-wrap as suggested gives coarse control but can't be justified. There are other space entities like &thinspace; and &nspace;, as well as a bunch of Unicode space characters that should give somewhat better control and should not break justification. These entities are the best non-CSS solution in my opinion.
For better control you need a CSS solution. You can either span the sentences, the obvious choice, or you can span the space between sentences. The latter to me seems more incorrect, but it is easier to achieve, especially if you have the common two-space typing habit - you can simply search and replace all period-space-space with a span around a space. I have some javascript that does this on the fly for blogger.
Don't use the box model (padding-right) as it will break the right margin of fully justified text (and even if not fully justified, causes lines to wrap "early"). If you are spanning the space between sentences you can just alter the word-spacing on these elements. If you are wrapping sentences, you can set your paragraph or other container to have bigger word-spacing, and the set the sentences back to normal, or you can do it in one step with the after selector:
.your_sentence_class:after { content:" "; word-spacing:0.5em; }