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
The website I'm making is for an author/illustrator and she wants words in the navigation bar to be written in her own handwriting, so the links in the navigation bar and her own name, which serves as the title, are all in the form of pictures rather than text.
Similarly, the homepage consists of some of her illustrations, each accompanied by a handwritten link, so that there is no text at all. I'm starting to realise from reading online that this may be seen as 'bad practise', so I want to ask those with more experience than me: how problematic is the lack of text?
I am not too worried about loading times and such - I've managed to make the image files quite small - but more things concerning accessibility and whether the site will appear in search engines.
And are there any ways I can avoid problems whilst still using the handwriting?
When you want to use images as navigation elements and are concerned about SEO and accessibility, you can use the alt-tag which you should use anyways.
Example:
<img src='images/nav1.png' alt='Home' />
Screenreaders and search engines use these tags to deal with images which they of course can not read.
There are two issues here. First, people who do not see images (for one reason or another) will find the site almost impossible to navigate, unless the img elements have alt attributes. Correctly written alt attributes resolve this problem and can be expected to provide adequate information to search engines as well. Second, people who use normal graphic browsers will see the texts in a specific appearance. This may mean that they find it less legible than normal text, perhaps even illegible. This greatly depends on the style of the text, including size and the contrast between text and background color.
If a downloadable font were used instead, via #font-face, then the latter problem would in principle be less severe, since users could disable page fonts and see the text in their preferred font. This is rather theoretical, though, and creating a font is nontrivial and probably not worth the effort here.
On the practical side, write the alt attributes and ask the author consider whether the font is legible enough to all visitors, including people with eyesight problems. It’s up to the author to decide whether the reduction in usability and accessibility is justified by the artistic impression made.
You can choose from many handwritting fonts and link them via #font-face.
If she wants to use her 'font', use images (ideally one image - looking for sprite) and put text underneath - it's call image replacement.
Related
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.
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 last year.
Improve this question
When creating close buttons, usually for a card of some sort, I often find the need for some visual symbol resembling the cross/multiplication symbol we all associate with closing things.
In most cases, I find myself preferring to use the HTML entity.
×
But I've seen use of the "regular" x key on a traditional EN keyboard. As well as SVGs like those available at Feather and Hero Icons, so on.
What I would like to ask is whether there is a recommended option amongst these, and why? And if not, which option is most widely supported and/or most performant?
Thanks
Some background below, not necessary to read:
The Entity felt the best bet for me, for a while. I was a fan of having to load or package one less asset into my app, however small, if I had the opportunity. This and, I'd assumed that what is the "x" key on my keyboard might mean different things and be different codes to different encoders across the wider world. ×(;) will only ever be ×(;). That's my hope anyways. That said, I've noticed some issues with what appears to be irremovable padding of that entity; whitespace above and below the character which grows rather large as the font size increases. As a result CSS cursor effects fire prematurely, at a point where the cursor is significantly (visibly) far from the symbol proper. That and the inability to adjust the equivalent of the 'stroke-width' property for that symbol have me wondering if these newfangled SVGs, and all the unique features they bring, might be the best choice here regardless. `
Based on my experience (as this seems like an opinionated topic), I don't think there is a recommended best practice. In the beginning, to achieve a working state, I would use a capital X since it's universally supported. Later on, the use of a SVG would be a good option primarily because SVGs are easily scaled for any device and are supported practically universally.
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.
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 5 years ago.
Improve this question
all of this are only for make it more easy to read the html code? because they dont have any function more than that right ? ;( we can do all without that
<Div>
<p>
Example
</p>
</div>
<p>
same Example
</p>
all of this are only for make it more easy to read the html code? because they dont have any function more than that right ?
Not exactly.
These things make it easier for the browser and the website crawlers, screen readers, page printers, meta recorders, etc., -basically, any no-human/digital entity- to read the structure of the page, (combined with Schema metadata this can be quite powerful).
This means that you can put what you like in the <nav> tag or the <aside> HTML5 tag because the browser can read the syntax structure and know these are navigation links (therefoe useful for screen readers or for mobile devices to handle correctly) rather than core contents of the page central to the issue discussed on the page (such as details about why HTML5 is a good thing).
A good full answer to your question can be found here:
Why bother with Semantics.
Summary points from the link above:
More consistant cross browser implementation
Style normalization
Semantic markup makes glaring differences less likely.
Less typing
Craftsmanship: When something is well built it is less likely to break.
Accessibility
Maintainability: Code that makes sense is more maintainable.
Please bare in mind this article above was written in 2014 so it's references to "some browsers not being up to dat is now moot and old hat.
Your original statement including <div> tags is incorrect as ths is not HTML5 specific and a <div> is simply a container element that is used by your webpage styling and application level code such as javascript and CSS. A div can be anything you want it to be.
it supposes that it helps search engines to give a rank at the webpage and it could be used also for SEO.
https://www.codesmite.com/article/is-there-any-seo-value-in-html5-semantic-elements
Take from the above link:
Even in 2017 there are very few published case studies or official acknowledgements by Google that having an semantically HTML5 correct website will move you up in the rankings, or create better exposure from public searches. But it is safe to acknowledge that the more semantical detail you provide to bots then the better search engines will be able to understand and index your content. Using HTML5 elements surely can’t hurt.
https://www.inboundnow.com/html5-semantic-elements-mean-seo/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
I run a site that was recently indexed by Google (a few days ago). The main page has a few small images separating paragraphs of text. When I search Google for the site, it happens to show the parts of the paragraphs with the images, in the search snippet, which would be fine except it displays the alt text of the images, which looks bad.
Is there a way to stop this from happening, besides removing the alt text or toying with the images' placement?
As far as I know, there is no way to prevent this. But looking at your problem with a more technical perspective, you could off course:
simply remove the alt text or use a better alt text
remove the images from the DOM and instead put a placeholder element instead of it like:
<div class="img-holder" data-src="/img/example.jpg"></div>
With javascript you could find all instances of .img-holder and replace them with an inline image with the given source (and alt-text when you also store that as data attribute).
You cannot prevent search engines, or other user agents, from doing whatever they like with attributes in your markup. You can add attributes, or change their values, in client-side scripting, and then the odds are that search engines do not see such additions or changes (since they normally do not run client-side script code).
If the images are just decorative separators between paragraphs, then you should simply use alt="", avoiding this problem (and other problems too).