I've written valid XHTML 1.0 Transitional Code. I want to add social sharing buttons (twitter, facebook and google+), but all of these buttons invalidate my code. Is there any solution available?
Many articles on this topic of whether valid html is important. The majority say it isn't and I'm going to completely disagree with them. I have brought sites up to front pages of google just by validating the code and trying (as much as possible) to have the indentation formated. But as I say more disagree with me than agree.
So when I used the social media buttons I found one that will validate. I used the "share this" system and deleted the 'displayText' attribute for each span. This means that the alt text (tooltip) when you hover the icon won't show. But if someone has an account with that social media then they will prob recognise the icon anyways.
http://sharethis.com/
So the code that they say to use is:
<span class='st_stumbleupon_large' displayText='StumbleUpon'></span>
<span class='st_digg_large' displayText='Digg'></span>
<span class='st_pinterest_large' displayText='Pinterest'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_sharethis_large' displayText='ShareThis'></span>
<span class='st_email_large' displayText='Email'></span>
and i changed it to:
<span class='st_stumbleupon_large'></span>
<span class='st_digg_large'></span>
<span class='st_pinterest_large'></span>
<span class='st_facebook_large'></span>
<span class='st_twitter_large'></span>
<span class='st_sharethis_large'></span>
<span class='st_email_large'></span>
and now validates to xHTML (should work for html5) as well.
Validity are not rules, but are guidelines. Keeping things valid or not valid does not actually make that huge of a difference.
If they work, and your break appears correct in browsers then it should not be an issue to you if it validates or not.
Related
Google Webmaster Tools is reporting Structured Data > hentry errors for my Wordpress site (Divi theme)
Missing: author
Missing: updated
When I check the page with Google's Structured Data Testing Tool, it contains the following markup
<p class="post-meta">
<span class="author vcard">
Author Name
</span>
<span class="published">Dec 1, 2016</span>
</p>
I have two questions:
What is wrong with this markup that is preventing the hentry author and
updated attributes from being detected? (or, where is a link to up-to-date markup requirements, Google searching reveals many variations).
The page also contains complete and error free JSON-LD structured
data. Are there any conflicts/ issues with having two structured
data formats on the same page?
1) I would recommend to use Microdata or JSON-LD to describe your objects
2) It is hard to make a proposition without seeing that. Also, it is not understandable what object you tries to describe.
Thanks
I am building a website using asp.net mvc-5, and I want to provide our company contact details such as telephone, email, postal address, etc.., so I used the <address> tag as follow inside our "Contact US" page (I replace the real data by ***):-
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 address">
<h2>Addresses</h2>
<address>
<div class="info">
<p><span class="footercolor">Telephone: </span><span>+******</span></p>
<p><span class="footercolor">FAX: </span><span class="marginfax">+*****</span></p>
<p class="mainaddress">3rd Floor, Bldg. 1(....),<br />... Str. .CityName</p>
<p><span class="footercolor">P</span>.<span class="footercolor">O</span>.<span class="footercolor">Box: </span><span>*****,**** 1212,CountryName</span></p>
<p><span class="footercolor">Email:</span><span> info#*****.com</span></p>
</div>
</address>
</div>
so I have a couple of questions about using the <address> tag:-
inside this link they mentioned the following about the address tag Tip: The <address> tag should NOT be used to describe a postal address, unless it is a part of the contact information.... so why I should not add the postal address inside the <address> tag?
Is the <address> tag the correct way to provide our company's contact details as I am currently doing, or it should be used to provide details about the web site owner such as who created the web site and when ....
What are the advantages of providing the contact info inside <address> tag compared to writing the contact info inside a basic <div> or <p>?
When you should use an address tag
From the W3C (https://www.w3.org/TR/html-markup/address.html):
If an address element applies to a body element, then it represents
contact information for the document as a whole. If an address element
applies to a section of a document, then it represents contact
information for that section only.
In summary, an address tag is for contact information. If your contact information is just a phone number, then only the phone number should be included in the address block. If your contact information is a phone number(s), postal address, and e-mail as in your case, then all of this information (including the postal address) should be contained within the address block.
When you should NOT use an address tag
The point is, you should not be including a postal address in the address block if it is NOT contact information. So for example, if you have a real estate website, and you're listing information about available houses, the address of a house listing should not be in the address block. On the other hand, the real estate agent's address should be included in the address block, since this is contact information.
Why use the address tag
HTML is meant to be semantic. Ie/ you provide content and give meaning to that content. The more meaning you can give to the content, the better. Address conveys a lot more meaning than just div or p, so if address is appropriate, you should use address. In fact, here's what the W3C says about divs (https://www.w3.org/TR/html5/grouping-content.html#the-div-element):
Authors are strongly encouraged to view the div element as an element
of last resort, for when no other element is suitable. Use of more
appropriate elements instead of the div element leads to better
accessibility for readers and easier maintainability for authors.
Acceptable content within an address tag
Divs and Ps inside an address block are perfectly acceptable. More specifically, here's what you can use within an address block (from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address):
Flow content, but with no nested <address> element, no heading content
(<hgroup>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>), no sectioning content
(<article>, <aside>, <section>, <nav>), and no <header> or <footer>
element.
Divs and Ps are flow content.
tl;dr: Maybe you could make your code a little prettier. But regarding your usage of the address tag, you're good!
It might help to look at this answer about address formats
Advantages include semantic markup being easier for search engines to use.
By the way, you've got a lot more span tags in that sample than you actually need - you could remove most of the middle ones.
Let me see if I can answer all of your questions :), please note I'm not an HTML pro so I'm not 100% sure on everything.
inside this link they mentioned the following about the address tag Tip: The <address> tag should NOT be used to describe a postal address, unless it is a part of the contact information.... so why I should not add the postal address inside the <address> tag?
Of course you can always write whatever you like, so if you want to include the postal code that's your call. There are no set rules to as of what you can do and what not.
Is the <address> tag the correct way to provide our company's contact details as i am currently doing?, or it should be used to provide details about the web site owner such as who created the web site and when ....
I don't think that there is a 'correct' way of using the <address> tag, as you are free to use it for whatever you like.
What are the advantages of providing the contact info inside <address> tag compared to writing the contact info inside a basic <div> or <p>???
https://stackoverflow.com/a/34862011/5806274, I think that he describes it pretty good, it's mostly easier for Search Engines such as Google.
I have a honey pot input field on a form to prevent bots from submitting it, hidden with absolute positioning. I would like assistive technologies such as screen readers to ignore the honey pot field, so I added the aria-hidden="true" to it.
Will adding the aria-hidden="true" attribute to my honey pot field prevent bots from filling it in, similar to adding a "display:none" property? Or will they still fall for the trap and fill in the field?
Form fields are tab focusable, so while adding aria-hidden will not cause the field to be announced, it will still receive focus when a screen reader user tabs through the page.
This will cause confusion because the screen reader will not read out any label for the field. To solve this problem, you could add tabindex="-1" to take the field out of the natural tab order. I am not sure, however, whether that will cause it to be ignored by the bots.
Will adding the aria-hidden="true" attribute to my honey pot field prevent bots from filling it in?
No. They read Stackoverflow like everyone. After reading your message, they will update their algorithm and ignore aria-hidden=true fields ;-)
Of course not. As long as this solution can be skirted, writing it publicly does not give you the benefit of security through obscurity.
EDIT: added a smiley (but this is however a serious answer)
EDIT 2: added a second sentence for people lacking of humor
When adding schema data to your site for SEO, it seems like a no-brainer to keep all your schema data within one itemscope. Or at least on the same page with redundant itemscopes of the same type.
But let's say I'm following a style guide and only display certain properties on the site (e.g. not enough room in the footer to list all the item properties). Yet, I still want this information to show up in a search engine (e.g. hours of operation or a Google Map).
If I have a footer using the HealthAndBeautyBusiness schema data but only want to show some of the fields, is it okay to just list them and apply class="visuallyhidden" to the item properties I don't want to display?
<div class="contact_info" itemscope itemtype="http://schema.org/HealthAndBeautyBusiness">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<p itemprop="streetAddress"></p>
<p>
<span itemprop="addressLocality"></span>,
<span itemprop="addressRegion"></span>
<span itemprop="postalCode"></span>
</p>
</span>
<p itemprop="email" class="visuallyhidden"></p>
<p itemprop="telephone" class="visuallyhidden"></p>
</div>
In other words, is there a clearly defined way to distinguish between a malicious versus a proper use of the .visuallyhidden class?
Additional question: when a search engine crawls your site, does it crawl the entire site and store the aggregate schema data? Or does it treat schema data on each page as separate?
As far as Microdata and schema.org are concerned, this is valid.
Note that Microdata allows the use of meta and link elements in the body, which are typically hidden by default, especially for the purpose of adding properties for content that is not visible on the page.
Consumers (like search engines) might have additional rules about what they will ignore, what they will parse, what they will penalize, etc. However, discussing this is about SEO, which is off-topic here on Stack Overflow.
Is this possible an correct to have more than one element on a page marked with role="main" attribute?
There is a page with search results divided into portions. Portions are similar to pages, but a new portion appears on a page when more data came with AJAX.
I would like users of JAWS (and so on) understand the structure of the document and provide them with information that there is a search result page in front of them and it is divided into portions.
This markup is pronounced by JAWS exactly as I wish:
<div class="main" role="main" aria-label="Search results">
<div class="main__portion" role="main" aria-label="Page 1">
Link 1<br/>
Link 2
</div>
<div class="main__portion" role="main" aria-label="Page 2">
Link 1<br/>
Link 2
</div>
</div>
But is looks overheaddy to mark every single portion with role="main". Which role suits better? And the requirement is that JAWS has to read "Search results page 1" when focusing on the first link.
Marking each div as main will validate, but it doesn't provide useful information to a non-sighted user. Main is used to mark the primary content as distinct from secondary content, so using it on your outer div as you already have is appropriate. Putting it on all the inner divs as well just becomes noise and one more thing to listen to before they get to the actual content.
Screen reader users will find it more useful to know how many results there are in total and which one they're up to. This can be done using list markup, or giving a total at the top of the page then numbering each result as part of its title/heading/link text. As a general rule, any information which is obvious to a sighted user should also be present in the content or the markup, with ARIA only providing a fallback or additional support if necessary.
WAI-ARIA main role:
Within any document or application, the author SHOULD mark no more than one element with the main role.
But it’s a SHOULD, not a MUST.
(Note that HTML5’s main element may only be used one time in a document.)