About the title/alt attributes - title

I understand the purpose of the title and alt attributes, but I just do not understand the best use for them or if I can use the same title/alt more than once.
For example, take a website about dogs:
From my understanding all img tags need an alt attribute:
<img src="Husky.png" alt="Husky" />
<img src="Rottweiler.png" alt="Rottweiler" />
Is it good practice to use the same alt attribute for multiple pictures on the same subject?
<img src="Husky2.png" alt="Husky" />
<img src="Husky3.png" alt="Husky" />
<img src="Husky4.png" alt="Husky" />
Is it good practice to use a title/alt attribute in every tag? What about using the same attribute more than a few times?
Example:
<ol title="This Dog">
<li title="This Dog"> Dogs </li>
<li title="This Dog"> Dogs </li>
<li title="This Dog"> Dogs </li>
<li title="This Dog"> Dogs </li>
<li title="This Dog"> Dogs </li>
</ol>
<div id="body">
<p title="This Dog"> </p>
<p title="This Dog"> </p>
<p title="This Dog"> </p>
<p title="This Dog"> </p>
</div>
My understanding is that the title attribute acts as a tooltip that appears when hovering over text. The kind of thing that has to be done in newer browsers but alt and title used to do the same thing back in older browsers. Those attributes also serve as a method for search engines to recognize your website.

My understanding is that the title tag acts as a tool tip/hover over information type of thing in newer browsers and the alt tags use to do the same back in the older browsers.
No, the title and alt attributes have a different meaning/purpose (not old method vs. new method).
title
The title attribute is a global attribute, which means that you can use it on all elements. In general (note that one some elements (e.g. the abbr element) it has a special meaning) it is defined as:
The title attribute represents advisory information for the element […]
You should read the definition of the attribute, it explains how it should (not) be used.
alt
The alt attribute can only be used on the area, input (for image buttons) and img element. For img, it has this meaning:
the value of the alt attribute is the img element’s fallback content, and provides equivalent content for users and user agents who cannot process images or have image loading disabled.
There are many rules how you should (not) use this attribute.
So, the alt attribute is an alternative to the image: EITHER you see the image OR you read the alternative text. The alt value should not be given/presented as an addition to the image.
The title attribute gives additional information, that would be provided to both (the users that see the image and the users that read the alternative text). However, you shouldn't use the title attribute as the only means for information of importance, because …
… the typical presentation is often "hidden" behind a tooltip (users don't necessarily know that a tooltip is present at all, because they don't hover over all elements)
… keyboard or touchscreen users often cannot see the tooltip at all, because they can't hover
… screen readers often don't read/announce the title value (in the default settings)

ALT:
Alt text mean alternative information source for those people who have chosen to disable images in their browsers and those user agents that are simply unable to “see” the images. It should describe what the image is about and get those visitors interested to see it.
Without alt text, an image will be displayed as an empty icon: without alt
In Internet Explorer Alt text also pops up when you hover over an image. Plus, Google officially confirmed it mainly focuses on alt text when trying to understand what an image is about.
An Image with alt but image is not displaying.
<img src="a.png" alt="Ann Smarty">
Another image without alt and image is not displaying.
<img src="a.png">
Title:
Image title (and the element name speaks for itself) should provide additional information and follow the rules of the regular title: it should be relevant, short, catchy, and concise (a title “offers advisory information about the element for which it is set“). In FireFox and Opera it pops up when you hover over an image: An image with title and displaying image.
<img src="a.png" title="Optimize Images For Search Engines, Social Media">
Read More:http://www.searchenginejournal.com/image-alt-text-vs-image-title-whats-the-difference/

Related

Bootstrap Popover Link Inside a Label

On a form, I have a typical opt-in text checkbox but also have a link in that label. That link doesn't go anywhere but rather triggers a Bootstrap 3 Popover for additional detail.
It works, however clicking the popover link also unchecks the checkmark. Saw other questions on SO and solutions but they were for normal links and didn't apply to a javascript link link like this. Any thoughts?
The of course first thing one would think of is to have the link outside the label, but then the text won't wrap with the preceding text and will always have to appear beneath the disclaimer text which is not desired.
<div class="checkbox">
<label>
<input class="optin" type="checkbox" checked value="">My disclaimer text here. <a type="button" data-toggle="popover" title="Popover Title Here" data-content="Popover body text here">My Link</a>.
</label>
</div>
Assuming I need to integrate stop propagation somehow but can't seem to determine how to integrate in this scenario.

How to make work DataURL and Lightbox together

I want to use Lightbox. Images are binding from back-end in VB.NET(database-sqlserver).
Here is HTML which is inside a datalist controler:
<a href='<%# Eval("images")%>' rel="lightbox[Brussels]">
<img alt="" src='<%# Eval("images")%>' height="150" width="150" class=" img img-thumbnail" />
</a>
I am not storing the images filepath. Just storing the images in varbinary(max) So cant give href attribute of Link.
I referenced hyperlink href attribute via dataurl.Its value is coming in base64
dr("images") = "data:Image/png;base64," & Convert.ToBase64String(imgbyte)
where imgbyte is byte array().
Whenever I am clicking on the Image(binded from database),it should come in front using Lightbox.
But problem is arousing as image poping out is partial clear or 30% clear rest blured or nothing at all.Don't know the exact reason why?
I have read somewhere that Internet Explorer 6 or 7 is not using dataurl. And it can show upto 32kb size image. But I have checked it in IE11.It does't work.
Any possibility how can we show images of big size using dataurl in LightBox?
Any other possibility how can we achieve this?
The only way I see is to implement a custom endpoint, say Generic Handler or a more tailored one, which returns a proper binary stream by providing the Identifier of the corresponding image.
For example
/MyCustomImageProvider.ashx?Id=1
This endpoint will be reachable via URL and such URL can be fed to LightBox, while keeping your images stored in a Table rather than a physical file.
In the end, your aspx code could like the following
<a href='<%# Eval("images")%>' rel="lightbox[Brussels]">
<img alt="" src="/MyCustomImageProvider.ashx?Id=<%# Eval("imageId")%>" height="150" width="150" class=" img img-thumbnail" />
</a>

Aurelia eating my Bookmarks

I am working on a legacy application that is being rewritten using Aurelia, the application has a bunch of static html in a tblHelp that needs to be displayed. I am using innerhtml.bind on a div in my view to databind the stored static HTML into the view. Each record is essentially a document complete with a full table of contents that links to other divs within the document (Bookmarks).
Something like:
<div id="toc">
<h1>Table of Contents</h1>
<ul>
<li>Section 1<li>
<li>Section 2<li>
</ul>
</div>
<div id="section1">
<h2>Section 1</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
<div id="section2">
<h2>Section 2</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
When I display the resulting page in my Aurelia view and click on the links, rather than moving to the proper Div on the current page, it seems to be attempting to route to an unknown route and ends up returning to the home page (that is my unknown route behavior). How do I make the Aurelia Router know that I am just moving around the same page and do not require it to route to another page?
I think you need to change your <div id= to <a id= which is the correct syntax for anchors. Hopefully Aurelia will recognize them as legitimate anchors when formatted correctly.
Also, since an anchor tag shouldn't wrap the whole content, you'll just open and close it at the top of the div. You can even leave the divs there but should not duplicate the id.
Update:
That being said, I created a GistRun that actually demonstrates that Aurelia should be able to handle the <div id= anchor targets. So, I'm not exactly sure why you're having problems.
Maybe this GistRun or the more standard <a id= approach will help you.

SEO - Google index a specific part of a link

Google displays links to pages in its search results by taking all the text inside an tag as the link. So this:
<a href="#">
<span>1</span> This is a great story
</a>
displays in Google search results as:
1 This is a great story
Is there any way to tell Google to index a specific part of the link text, e.g.
<a href="#">
<span class="dont-index-me">1</span>
<span class="index-me">This is a great story</span>
</a>
So I can have just: 'This is a great story'.
Or is the only option to change the markup:
<span>1</span> This is a great story
No. Google will index an entire page's contents. there is no way to tell Google to ignore part of a page. There are black hat techniques, of course, but those just get you banned if you get caught and aren't worth the risk.
just change the markup (2nd solution) ie. move it out of <a> tag

How to manipulate strings in a Blogger template. Impossible?

This question is about Blogger Template manipulation. People developing/changing or manipulating Blogger templates in any way know its syntax hence can provide some input.
I write a development blog on Blogger and I've changed my blog template so posts display HTML head title differently (post name first) from default (blog name first).
But. Since I format my inline programming code words similarly to Stackoverflow (gray background mono-spaced font) and do the same when I use any of them in blog post title... I enclose such code words inside <code/> element and then I have CSS set for this particular element to add it gray background and set mono-spaced font on it. This formatting works on blog post titles and its content.
But the problem I'm having is that these <code/> tags I use are also displayed in the HTML head title (displayed in browser window title). What is even more importan is that these get displayed in web search results as well. That's even more annoying.
Default template uses <data:blog.pageTitle/> in title element, which strips out any tags, but displays all titles as Blog Name: Blog post title (Google search results are quite meaningless because blog post title gets cut off). That's why I'm using <data:blog.pageName/> instead to display just blog post title in the head, but it still has all tags and I should strip them out somehow.
Check this blog post example. Load it, and look at browser's window title bar that still has tags displayed. I want them gone.
How do I strip tags from the post title when adding it to head element?
UPDATED
ok, so far this is what i worked out:
under settings -> Title -> put a nice
use <data:blog.pageTitle/> as title;
under design -> edit html -> replace theese lines
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='  (Intestazione)' type='Header'/>
</b:section>
with your custom header like
<div class="header section" id="header">
<div class="widget Header" id="Header1">
<div id="header-inner">
<div class="titlewrapper">
<h1 class="title">
aSeptik Site</h1>
</div>
<div class="descriptionwrapper">
<p class="description">
<span>
</span>
</p>
</div>
</div>
</div>
</div>
<title> will result from:
jQuery <em>"scroll into view"</em> plugin (with an additional <code>":scrollable"</code> selector filter)
to
: jQuery "scroll into view" plugin (with an additional ":scrollable" selector filter)
hope this help, demo http://aseptik.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html
try with a little bit of javascript in your <body> like this
<script type='text/javascript'>
document.title = document.title.replace(/(<([^>]+)>)/ig,'');
</script>
</body>
copy and past as is don't convert entities,
DEMO: http://aseptik.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html
although, i'm not sure this is the
right solution for you since spiders
usually avoid js execution, and i
don't know how "html tags in the title"
affects the search results.