So I want to create this markup using emmet:
<h5></h5>
<p></p>
<h5></h5>
<p></p>
<h5></h5>
<p></p>
<h5></h5>
<p></p>
<h5></h5>
<p></p>
How do I achieve that?
h5p*5 just gives me tags
h5>p*5 creates a single h5 with 5 paragraphs
h5*5p*5 does nothing
Thanks
Found the solution after reading the cheat sheet and playing around a bit:
(h5+p)*5
Related
Hey so Im new to boostrap 3 and Im trying to recreate a site as practice. I need to find a way to add 3 rows with (various col-md*sizes) of boxes to the left and a large picture to the right that stretch to the bottom of the page without disturbing my other boxes/rows that are on the left side. Ive looked up multiple ways to do this but if someone out there can provide a code on how this is possible with an explanation that would help me with this project and many more to come. If you go to the link below, the example is the first one with the guy wearing the yellow rain coat:
http://www.geckoandfly.com/13189/7-impressive-online-cv-resume-template-successful-job-hunting/
Well if you show you code will be a bit easier but ... the code should look something like this
<div class="row col-lg-12">
<div class="col-lg-8 leftSide">
<!--This is the left side of that"div"and here you can add rows as much as you want-->
<row>
<div class="col-lg-6"></div>
<div class="col-lg-6"><div>
</row>
<row>
<div class="col-lg-7"></div>
<div class="col-lg-5"><div>
</row>
</div>
<div class="col-lg-8 right side">
<!--The image part is here-->
</div>
</div>
Im making responsive table and I want it be fully accessible for every people. But in this case i'm not sure where i should use rowheader and where to use columheader.
Here is my code (ofcourse it is just example, there is not actual data):
<div role="grid">
<div class="row" role="row">
<div class="hidden-xs col-sm-offset-4 col-sm-3 " role="columnheader">
<img class="img-responsive" style="width:200px;" src="http://blogmedia.whoishostingthis.com/wp-content/uploads/2013/04/free-hosting.jpg" alt="Vendor 1">
</div>
<div class="hidden-xs col-sm-offset-1 col-sm-3 " role="columnheader">
<img class="img-responsive" style="width:200px;" src="http://jennmoney.biz/assets/free.gif" alt="Vendor 2">
</div>
</div>
<hr class="line">
<div class="raty-table" role="row">
<span class="col-xs-12 col-sm-4" role="rowheader">
Title 1
</span>
<span class="visible-xs-block col-xs-4" role="rowheader">
Vendor 1
</span>
<span class="col-xs-8 col-sm-4" role="gridcell">
Content
</span>
<span class="visible-xs-block col-xs-4" role="rowheader">
Vendor 2
</span>
<span class="col-xs-8 col-sm-4" role="gridcell">
Content
</span>
</div>
</div>
Here is a fiddle:
For vendors should I use rowheader or columnheader? And how I should tag "How long can I sing?" Once it is rowheader and on different screen size it can be columnheader.
I see, it is hard to undestand what I mean, so I made two mocks, but thanks to StackOverflow I can't post it, becouse I have to low reputation...
I must post it as a link: http://postimg.org/gallery/j2elhzmc/ - first picture shows how it looks on desktop, second how it looks at smartphone (if you have the same order as me).
Your grid must be defined as non editable
A grid is considered editable unless otherwise specified. To make a grid read-only, set the aria-readonly attribute of the grid to true.
You should explicitly indicate relationships
If relevant headers cannot be determined from the DOM structure, authors SHOULD explicitly indicate which header cells are relevant to the cell by referencing elements with role rowheader or columnheader using the aria-describedby attribute.
Note that you might reference a "display:none" element in the aria-describedby attribute. I will say that the more semantic choice will then be to set aria-hidden attribute on your rowheader elements.
TL;DR:
Set aria-readonly=true on the grid
Set aria-describedby attribute on your "gridcell" cells referencing each one of your "not always visible" columnheader
Remove role="rowheader" and set aria-hidden="true"
Sorry if I'm missing something obvious but columnheader should be used at the top of each column. (You could have a columnheader in the middle of the table, but that's not typical, although I could see it used as a repeating header if it split across pages.)
A rowheader is usually the first cell in the table for that row. You can have multiple rowheaders but it's not common unless you're showing a multi-dimensional table (eg, a sales report that has a year header for all rows, then quarter headers for every three months, then month headers).
You start getting unreliable results (from screen readers) if you have row headers spread across several non-contiguous cells.
I'm assuming you don't want to use <table> and <th scope='row|col'>
My output of product schema look like this.
Shell I remove the html code from "meta itemprop="description" content=" or it must be plain text only?
<span itemscope itemtype="http://schema.org/Product">
<meta itemprop="url" content="http://www.testest.com/bo-clark-collection.html" >
<meta itemprop="name" content="Bo Clark Collection" >
<meta itemprop="productID" content="1194" >
<meta itemprop="description"
content="<html><body><div><p>Special eye-catcher: test.</p></body></html>" >
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" content="10,00 EUR" />
<meta itemprop="priceCurrency" content="EUR" />
<link itemprop="availability" href="http://schema.org/InStock" />
</span>
</span>
Microdata should be embedded in HTML, but tags with microdata in them can contain HTML. Description is a <meta> tag in your code though, so it does not need the HTML because it will never be displayed.
It looks like you are putting key structured data in non-visible tags, that's OK for currency, price, dates, but google states normally you should fit the microdata around your existing displayed data. The microdata can be in many different tags or block structures on the page, as long as they are nested under a single block structure (or a - but and seem most useful). Anything in HTML tags that don't have microdata will not cause problems - it just gets ignored when searching structured data.
Consider altering your code so the microdata is spread out, eg
<div itemscope itemtype="http://schema.org/Product">
<meta itemprop="url" content="http://example.com/sales" />
<h3 itemprop="name">Bo Clark Collection</h3>
<img src.... >
<strong>Product code:</strong><span itemprop="productID">1194</span> (in stock)<link itemprop="availability" href="http://schema.org/InStock">
<br>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">Price: <span itemprop="price">10,00</span><span itemprop="priceCurrency">EUR</span></span>
<div itemprop="description">
<p>Special eye-catcher: the silver Guess Wordmark test test.</p>
<ul><li>Silver Guess Wordmark</li>
<li>Leather in Croco-Style</li>
<li>Inner lining Suede</li>
<li>Tailor-made cutouts for ports and camera</li>
<li>Color: <span itemprop="color">Black</span></li></ul>
</div>
</div>
One piece of microdata can be embedded within another, as I've done here with color (Black) which is also part of Description. It works well for list items. Price done as above follows the google example of price.
Yes.
You should only use plain text instead of html tags. Refer to the Product schema example at https://developers.google.com/structured-data/rich-snippets/products
Just write in following pattern:
<p itemprop="description">Special eye-catcher: the silver Guess Wordmark test test. Silver Guess Wordmark. Leather in Croco-Style. Inner lining Suede. Tailor-made cutouts for ports and camera. Color: Black</p>
It is recommended to use plain text in description as Google shows that description in plain text on their SERPs. In my view, Google only displays description in plain text rather than italic, bold or underlined fashion so using tags like , and are irrelevant here.
Say I have multiple price quotes from multiple retailers, how will I retrieve the 5th value from a particular retailer - say Target or Walmart ? I can get to the 5th entry using the matching image logo bit how do I retrieve the value ?
Adding Html Code to make things more clear .I need to retrieve the ratePrice value (198)
<div id="rate-297" class="rateResult standardResult" vendor="15">
<div class="rateDetails">
<h4>Standard Goods
<br>
<img src="http://walmart.com/walmart/ZEUSSTAR999.jpg">
</h4>
<p>
<span class="vendorPart-380">
<img alt="Walmart" src="/cb2048547924/icons/15.gif">
<br>
<strong>
<br>
MNC
</span>
</p>
</div>
<div class="ratePrice">
<h3>
$198
<sup>49</sup>
</h3>
<p>
<strong>$754.49</strong>
<br>
</p>
<a class="button-select" href="https://www.walmart.com/us/order/95134/2013-05-14-10-00/95134/2013-05-17-10-00/297"> </a>
</div>
</div>
If you could provide some HTML it would help. Speaking generally from what you're asking you'd get a locator to the price div or whatever HTML element and then get its text using something like:
_driver.FindElement(locator_of_element).Text
The trick is understanding the HTML in order to target the 5th element. So if you can find the row that has the 5th entry then it's simply a matter or then finding the price div in that row and getting the text of it.
EDIT based on more info provided by OP in comments
Using the HTML you provided (which isn't well formed by the way, missing closing strong tag, a tag, etc.). I'd say do the following:
_driver.FindElement(By.XPath("//div[#class='ratePrice'][5]/h3")).Text
is the following syntax good to go to emhpasize a multicolumn headline totalling around 20 ~ 30 words? I dont want to use CSS3 multicolumns since it is not supported in IE9 etc.
<H3>
<div id="headingLeft" >blaa blaa blaa</div>
<div id="headingRight">blue blue blue</div>
</H3>
In response to a request from the OP:
[That's] what I was looking for! Place it as an answer so that I can accept is as an answer! The up-vote in your answer would be for the quality of the link you added. Explains everything in very clear language!
Have you considered using html5's header element, and the html5 doctype of course?
The headings shouldn't have div's inside of them. Maybe something more like this... The data in the two headings must not be too closely related, otherwise you shouldn't be splitting them apart at all. I'm assuming it's like a callout or something.
<div class="headings">
<h3 id="headingLeft" >blaa blaa blaa</h3>
<h4 id="headingRight">blue blue blue</h4>
</div>
Why not use a <div> with a class associated to it (or a css selector) instead of using H3 this way. I'm not sure this is the more SEO-friendly way of doing what you want to do.
<div class="headline">
<div id="headingLeft">blaa blaa blaa</div>
<div id="headingRight">blue blaa blue</div>
</div>
It doesn't seem that you're using H3 in a semantic way.