Ok, so im trying to remake my website and i wanted to ask if this HTML syntax im using is proper.
The HTML code is something like this:
<a href="http://the_url.com" target="_blank">
<img src="../img/id.png" width="32" height="32" alt="id" />
<h4>Title</h4>
<p class="des">Description</p>
</a>
and for the CSS i mainly make the tag to display as block.
Is this proper coding or should i remake it a different way? You can see an example at http://varemenos.com
According to the HTML5 specification of the <a> tag, this syntax is valid. It was not in former HTML versions.
If the construct suits its semantic meaning is still up to you and the actual content. If you use it for short snippets of text (esp. in the description), I think it's fine. If the content gets longer, you might want to think about splitting it up and moving the anchor a bit down the hierarchy to make it clearer to the users which parts of the page are actually link targets.
This website may interest you: W3 validator.
According to the validator, your website is HTML5 valid.
You are using block elements (h4 and p) inside an inline element (a). This isn't "proper".
This can be fixed by adding a CSS rule so that the a has display:block or display: inline-block.
Related
I need to create a website and I would like to increase the size of the buttons because it looks really really bad.
I'm not allowed to use any form of CSS or JavaScript for this project and the solutions I found so far all use CSS.
I've tried inserting the buttons into a table but that didn't do anything to help me and all the solutions I found on the internet either don't work or use CSS
You can use header elements like <h1>, <h2> etc. Semantically it may not be very 'clean' to use in this way (you are not creating headers as one would do in e.g. a publication), but I'm afraid there's not much else.
<button>Standard size</button><br />
<br />
<button><h1>Using h1</h1></button>
<button><h2>Using h2</h2></button>
<button><h3>Using h3</h3></button>
<button><h4>Using h4</h4></button>
I need to add space between "who" and "we are". If I add space inside it's delete in DOM.
<h2>
<span>who</span>
<br>we are
</h2>
I want to add this space, becouse in seo audits i have:
whowe are
I want:
who we are
Well, for SEO and maybe accessibility (as well as using some browser related features like Mozilla Firefox reading mode, RSS Feeds and such sings), you will improve the structure of your markup by using a close to english language, using a single sentence and then use css styles to put the content in two lines.
That's what CSS is for, set the apparence of your content. In your case you use HTML which is intended to structure your content. Changing HTML purpose is the cause of your issue.
<h2>
<span>who</span> we are
</h2>
with a style that will lead to a one liner span should do the job :
h2 span {
display: block;
}
Or anyone of the others solutions to this simple CSS behavior.
Use
<h2>
<span>who</span>
<br/>we are
</h2>
I am attempting to add itemprop="image" for a corporation's logo (as shown here: http://www.schema.org/Corporation), but I am using the Gantry Logo plugin from the Gantry framework for Wordpress. As a result, the image is actually loaded by a reference in CSS, and not using the HTML tag.
Unfortunately, it seems that the itemprop="image" can only be added to that tag, as that is where it grabs the URL from.
Can anybody think of a way around this without attempting to hide a logo on the site and place the tag on it?
(The site I am specifically referring to is http://www.bpsresolver.com for reference.)
"Can anybody think of a way around this without attempting to hide a
logo on the site and place the tag on it?"
That's exactly what needs to be done.
The way to do it is to open the source for this Gantry Logo plugin and find the logo's <a id='logo'></a> that the css refers to and change it to <img src='yourimage.jpg'/> I usually use WindowsGrep to find id='logo' or whatever it may be in your case.
But to answer your question: "Is there a way to add microdata to an image referenced in CSS?" - No :)
What I ended up doing to fix it was going to the logo.php plugin located in /plugins/gantry/widgets/. At the bottom of that file is where the <a> tag is that miro mentioned.
Instead of removing it and replacing it (since it had a number of other CSS properties attached that needed to stay the same), I simply added the <img> tag in between the <a> tags, and changed the CSS that referred to the image from background: url(url_to_image); to background: transparent;.
Lastly, I wrapped the whole thing in a <div> tag which I used to indicate the scope, and placed itemprop inside <img>.
I want to dig into html5, I have used html5boilerplate which has modernizr.js I wrote following code but it seems IE7 do not support it. What is the workaround for it using modernizr so it can work in IE7? I am not very familiar with html5, html5bp and modernizr.
<a href="/somlink">
<img src="/img/someimage.jpg" alt="some image">
<span>Some Caption</span>
<h1>Some Heading<span class="subtext">Inside Anchor</span></h1>
</a>
Based on comments above, this will work in IE7 without doing anything.
The problem is that you are using position:absolute on the span and h1. They are still clickable, but the cursor makes it look like they are not. Just add a cursor:pointer to get round this.
See: http://jsbin.com/ilojim/4/
I want to do 2 things:
Know that I am SEO friendly and that I inserted correctly the text (so search engines would know that this is "my logo"
Learn how to resize the logo in case the screen is lower than a specific width (assuming that I know how to work with media-queries)
<div id="myLogo">
<a href="#">
<img src="css/img/my_logo.png" alt="My Logo">
</a>
</div><!--End of #myLogo-->
What should I do to achieve them both? What should be my CSS and did I wrote the code correctly?
<h1>
Text that search engines will see but not users
</h1>
And the css
h1{
background-image:url(mylogo.png);
width:100px;
height:100px;
text-indent: -99999px;
}
Edit:
The stack overflow logo uses this technique, use firebug and have a look :p
Edit:
Q: What's the difference between not adding it and it being invisible?
A: Most search engines will read what you put in the alt tag, this will also show for people using text browsers. More complex search engines are said to work differently, though the text-indent trick is currently as far as all my tests go the best way to get search engine readable text into things like logos and menus that use images. It generally comes down to user choice. The alt tag is a valid way of doing it. I've personally just had better seo results from text-indent.
What you have using alt attribute will work for your first requirement. This text is used by search engines and not shown in browsers.
This will also be used when for some reason(e.g. user has disabled image loading) image can not be loaded.
If you use <h1>, than add background-image to <a> not the <h1> itself, like in the older example from "tom at zepsu dot com".
JSFiddle Demo (try the demo with removed "a" selector in CSS code - and you won't be able to click on the logo)
<h1 id="hlogo">
Stack Overflow
</h1>
CSS:
#hlogo a { /*code goes here*/ }