My professor in an assignment wants us to list our education by colleges/highschools. He specifically states "Enclose the above <h3> inside of an <a> element with the fully qualified URL of the school’s main website as the href and set the target attribute to _blank. By enclose, I mean place the <a> tag immediately before the <h3> and the </a> immediately after the </h3>." I do exactly as stated and it does not work, and creates a "target ="_blank" text below two other <a> elements in <nav>. This line of code is written in <main>.
I expected a <h3> that is hyperlinked to my University homepage, that displays my University name on it.
Did you do it like this?
<a href="https://github.com/" target="_blank">
<h3>GitHub</h3>
</a>
<a href="https://stackoverflow.com/" target="_blank">
<h3>Stack Overflow</h3>
</a>
<a href="https://www.linkedin.com/feed/" target="_blank">
<h3>LinkedIn</h3>
</a>
I've tested and it worked; if that's not it, please provide more details and i'll try to help you.
Related
Here is the alt text I am trying to verify:
<a class="module-List-module-link—CtkbR—" href="/first/2041" alt="text">sample text (ABC)</a>
The original html snippet is:
<a class="module-List-module-link—CtkbR—" href="/first/2041">sample text (ABC)</a>
I only added the alt="text" to make it 508 compliant. My question is: Is that valid?
I am taking my cue from:
<article>
<a href="news.html">
<h3>Budget Debate Continues in Parliament</h3>
<p class="subhead"><img class="alertimg" src="alerticon.png" alt="Breaking News" height="30" width="30">Members of Parliament continued vigorous debate on three challenging issues surrounding the upcoming year's budget.</p>
<p>Read more</p>
</a>
</article>
reference: the WCAG section
When i scan the page using Compliance Sheriff, i get an issue:
Anchor element does not have alternative text which describes purpose of the link
for :
<a class="module-List-module-link—CtkbR—" href="/first/2041">sample text (ABC)</a>
There is no correct usage of the alt attribute for an <a> element.
alt is used for images when the image cannot be loaded or understood by a user (e.g. because the image file didn't load, the browser is text only, or the user is blind).
I have an error :
Links do not have a discernible name Link text (and alternate text for
images, when used as links) that is discernible, unique, and focusable
improves the navigation experience for screen reader users. Learn
more.
I tried to include an aria-label but it doesn't work. This makes an error:
<a href="https://...../demo/index.php/Products/Description/Apple-Cinema-27/products_id-1" c="Apple Cinema 27">
<img src="images/products/130_61ajN-dgGxL._SL1000_.jpg"
alt="Apple Cinema 27"
title="Apple Cinema 27"
width="130"
height="130"
class="media-object img-fluid">
</a>
Thanks
Try use aria-label="...." - this is alternative text for image.
<a
href="https://...../demo/index.php/Products/Description/Apple-Cinema-27/products_id-1"
data-c="Apple Cinema 27"
aria-label="yourdescription">
Perhaps the alt attribute just needs a slight modification. The alt attribute should identify the destination or purpose of the link. Here is a very simplified example:
<a href="contact.html">
<img src="contact.png" alt="Return to the contact page">
</a>
You may not therefore need an aria-label attribute.
Consider this example:
<section id="news_block_left" class="block" itemscope="" itemtype="http://schema.org/ItemList">
<a href="http://dev.com/index.php?controller=NewsList" title="News" itemprop="url">
<h2 class="title_block" itemprop="name">News</h2>
</a>
<div class="block_content">
<ul class="news-list">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/NewsArticle">
<a href="http://dev.com/index.php?id_news=7&controller=News" title="News Title1" itemprop="url">
<span><span itemprop="datePublished">2015-03-30</span> <em itemprop="headline">News Title1</em></span>
</a>
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/NewsArticle">
<a href="http://dev.com/index.php?id_news=8&controller=News" title="T230 series (1999–2006)" itemprop="url">
<span><span itemprop="datePublished">2015-03-08</span> <em itemprop="headline">T230 series (1999–2006)</em></span>
</a>
</li>
</ul>
<meta itemprop="numberOfItems" content="2">
<a class="more_news" href="http://dev.com/index.php?controller=NewsList" title="More news">
<span>More news</span>
</a>
</div>
</section>
This block exists in the sidebar, it doesn't contain full news element data, only a couple of link this them.
The link "More news" leads to a more complete list with more markup (but still only a list with links to the actual articles).
Is there a benefit in putting Microdata on such preview lists? Or is Microdata intended for complete pages (complete news page with body, product page, etc.)?
P.S. Don't mind the unfriendly URLs, it's only dev version.
That’s fine. It’s in no way required to use Microdata only for certain content. The same goes for the vocabulary Schema.org. The more the merrier.
Thanks to using Schema.org’s url property for each NewsArticle item, consumers have the chance to learn that these items have separate URLs with probably (but not necessarily) more relevant content.
On a side note: You might want to use name instead of headline (or name in addition). The name property, as it can be used on all Schema.org types, has probably more support than the headline property, which can only be used on CreativeWork types. (Currently it gets discussed if headline should be marked superseded by name.)
I have a HTML markup for each brand in my page like this
<ul>
<li>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
<h2>mallname</h2>
</div>
</a>
</li>
</ul>
is that heading position ok inside a hyperlink, or should I change it to
<ul>
<li>
<h2>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
mallname
</div>
</a>
</h2>
</li>
</ul>
which one is the more right way to write it, and what is the result that will be read by crawler for the heading in both case?
If in the first one, the heading content is only mallname, will the second one be read as mallname mallname mallname as there is a title attribute in the hyperlink and alt attribute in the image inside the heading
here's one of the result of the list item
In your first example, the h2 doesn’t describe the content of the li. In scope of this heading is everything following it, until the next heading starts. So in fact, the previous heading would describe the following content, and so on. This problem always arises when using headings without sectioning elements in lists.
In your second example, the h2 probably contains more than it should (two times "mallname"; the one in the title attribute is not considered to be part of the heading content). But what is the actual content here? There is only a heading, which doesn’t seem to make sense.
Your alt content is probably not correct/useful. When it is exactly the same as the corresponding heading, the you should probably use an empty alt value. But it’s likely that the image represents something in addition to the heading: describe this in the alt content.
Duplicating the heading content in the title attribute doesn’t seem to make sense, either. Only use it for additional helpful (but not essential) content.
So you should use something else: sectioning elements. Judging from the screenshot, it might be the case that article is appropriate (if not, use section).
By using a sectioning element like article, the heading doesn’t have to be placed on the top.
<ul>
<li>
<article>
<a href="/brand/mallname">
<img src="/Images/mallname.png" alt="Mallname offers … and …. It’s ….">
<h2>mallname</h2>
</a>
</article>
</li>
</ul>
However, use this only when the h2 describes the ìmg! When the image is only an alternative to the heading (or only decoration, and the actual image content isn’t relevant in this context), why use headings at all? In that case you’d have just a list of links:
<ul>
<li><img src="/Images/mallname.png" alt=""> mallname</li>
</ul>
Inside of <ul> should go <li> tags, so I think the first markup is more right, if to close eyes on the <div> elements inside of <a>.
Set your <a> to display: block; and you'll be correct with the first one.
You are missing the <ul> tags that are required as a parent for the <li>-tags.
Assuming you'd add the <ul>-tags that are missing: <ul> is not allowed as a child element for <h2> so that renders the second version as no good => first one is "more right".
The tests, I took the liberty to add the missing <ul>'s & mandatory parents, the doctype is HTML5:
W3C markup validator gives green light for this one:
<!DOCTYPE HTML>
<html><head><title>tets</title></head><body>
<ul><li>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
<h2>mallname</h2>
</div>
</a>
</li></ul>
</body></html>
W3C markup validator gives the aforementioned error to this one:
<!DOCTYPE HTML>
<html><head><title>tets</title></head><body>
<h2><ul>
<li>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
mallname
</div>
</a>
</li>
</ul></h2>
</body></html>
Just trying to get the hang of using the semantically correct XHTML markup.
Just writing the code for a small navigation item. Where each button has effectivly a title and a descrption. I thought a definition list would therefore be great so i wrote the following
<dl>
<dt>Import images</dt>
<dd>Read in new image names to database</dd>
<dt>Exhibition Management</dt>
<dd>Create / Delete an exhibition </dd>
<dt>Image Management</dt>
<dd>Edit name, medium and exhibition data </dd>
</dl>
But...I want the above to be 3 buttons, each button containing the dt and dd text. How can i do this with the correct code? Normally i would make each button a div and use that for the visual button behaviour (onHover and current page selection stuff).
Any advice please
Thanks
<ul>
<li>Import images</li>
<li>Exhibition Management</li>
<li>Image Management</li>
</ul>
thats good enough.
using <dl> for navigation is not very clever. or use a <span> inside the <li> with the description. <dd> will give you much headache since they aren't inside the <dt> and don't care about its position and styling
I am slightly confused by the use of your term "button". If you mean a link, then you could do:
Import images
If, however, you mean the input tag, then one way to do this would be to use input type=image and then provide an alt description.
For instance:
<input type="image" src="image.jpg" value="Import images" alt="Read in new image names to database"/>
You could use <label> elements instead of <dt> elements:
<ul>
<li>
<a href="#">
<label for="import-images">Import images</label>
<span id="import-images">Read in new image names to database</span>
</a>
</li>
<li>
<a href="#">
<label for="exhibition-management">Exhibition Management</label>
<span id="exhibition-management">Create / Delete an exhibition</span>
</a>
</li>
<li>
<a href="#">
<label for="image-management">Image Management</label>
<span id="image-management">Edit name, medium and exhibition data</span>
</a>
</li>
</ul>
... the for attribute of the <label> element need only match the id of another element in the document to be valid.