Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I want to align images in a text. Some pictures should be on the right side and some other on the left side. I can achieve this by adding class="right" or class="left" to the img element. But these classnames are presentational, not semantic.

Any ideas how to align images using semantically named classes?

share|improve this question
    
What do you mean by sematically correct? –  JVerstry Jul 20 '14 at 14:23
1  
@JVerstry For example, if I want to switch left and right: The images on the right side should be on the left side and vice versa. –  Yannick Ihmels Jul 20 '14 at 14:26
    
Did you try to achieve this with CSS? Or do you need an example? –  JVerstry Jul 20 '14 at 14:29
1  
I know how to achieve it with CSS. But I want to use semantic class names for it. Like even and odd or so. –  Yannick Ihmels Jul 20 '14 at 14:33
1  
@ynnckhmls: CSS is inherently "unsemantic." So to say whether something is "semantically correct" or not in CSS is a moot point. Rather, I believe what you are trying to ask is how you should name your classes such that they have semantic, not presentational, importance. I've edited your question to reflect these changes. –  chharvey Aug 27 '14 at 1:37

5 Answers 5

As you suggest in comments, the problem with using left and right as class names is when/if you later change the CSS to reposition these elements which then makes these class names confusing.

Ideally class names should describe the type of element, not its position. eg. main-image, side-image, etc.

However, if the purpose of these classes is to simply position images left/right then it can be tricky to find better names that still have some logical meaning and can be easily understood when reading the HTML source. You could use something like side-a, side-b perhaps? They don't have any real meaning, but they look they could be related and at the same time are different.

share|improve this answer
1  
or using no class name like so, article img {float:left;} or div:first-child img {float:left;}, I rarely ever assign a class to a img. –  BYBE Jul 20 '14 at 16:59
    
Thanks. I’m going to use a and b only. In the CSS I only need to write: img.a { float: left; } and img.b { float: right; }. –  Yannick Ihmels Feb 19 at 19:37
up vote 1 down vote accepted

Using CSS pseudo classes

I’m going to use the following CSS pseudo classes to align the images:

  • :nth-child(a)
    • for a = 1 ⇒ :first-child
  • :nth-last-child(a)
    • for a = 1 ⇒ :last-child
  • :nth-of-type(a)
    • for a = 1 ⇒ :first-of-type
  • :nth-last-of-type(a)
    • for a = 1 ⇒ :last-of-type

So I can select the ath image (of images). This approach completely separates markup and style.


Example

HTML:

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p>Stet clita kasd gubergren, no sea takimata sanctus.</p>
<img src="/path/to/image-1.ext" alt="Example #1">
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
<img src="/path/to/image-2.ext" alt="Example #2">

CSS:

img:nth-child(3) {
    float: right;
}

img:nth-child(5) {
    float: left;
}

/* OR */

img:nth-of-type(1) {
    float: right;
}

img:nth-of-type(2) {
    float: left;
}
share|improve this answer

Since HTML5, align is not an attribute to the img tag. As such, aligning an image is a CSS issue and not a semantic HTML one.

As a rule, semantic HTML is to explain what the content is - ie is it an image, a citation, an address etc, whereas CSS styles are more for the aesthetics - is it blue, a large font, etc. Image alignment falls under the latter category.

Giving your classes a good semantic name helps with development (allowing you to recognise your own classes in your style sheet), though there are no real standards to them (unless asked for by a third party, such as Google or Facebook, so that their robots can read them).

"Left" and "Right" are fine if you, as a developer, are sure they will always be left and right images. For example, for use in a wysiwyg editor where you would manually want to change the alignment and adding classes is used as the way of doing so.

share|improve this answer
    
What are you trying to say with the images being aligned left and right? Not using a class at all would seem the most semantic if it is purely aesthetics. w3.org/QA/Tips/goodclassnames –  Richard B Jul 20 '14 at 14:26
    
ie "mainImage" would be a more semantic class name than "left", if the image's purpose was to be the main image. However, if the only quality of that image is that it aligns to the left (which is all the information your question gives), then "left" is fine. –  Richard B Jul 20 '14 at 14:29
    
OK, so there is actually no real semantic way. –  Yannick Ihmels Jul 20 '14 at 14:36
    
If it says nothing, then there are no semantics to describe. Ultimately, there is no benefit to a semantic class (unless defined by a robot to read them) other than to the individual developer, eg calling it "left" will be confusing if you want to change it to "right" down the line. Use a name that makes it clear to you. This is a good article on the subject: brettjankord.com/2013/02/09/… –  Richard B Jul 20 '14 at 14:38

Honestly, for this kind of situation it doesn't really matter that the class names are technically insemantic. We use insemantic class names for lots of things like grid systems.

If you think about it, the decision of whether you align left or right is dependent on the content itself. The content and its presentation are tightly coupled: if the content changes, the alignment may need to change too.

From a practical perspective, at the point the alignment needs to change, you are already editing the content (HTML), so it's not a problem to change the class name.

share|improve this answer
    
In my opinion adding classes like row and column-3 or so is like using tables. OK, the divs have not a semantically meaning, but it’s still like using tables. The last argument is a good one, that the images are already the content. –  Yannick Ihmels Jul 21 '14 at 6:14
    
@ynnc Problem is, there is no way around the grid issue. You can have main/sidebar classes sometimes, but most of the time there is no semantic class you can use, unless you want to use a unique class on every single block of content. –  DisgruntledGoat Jul 21 '14 at 10:49
    
There is a way: don’t use a grid system, because we don’t need them. And you don’t have to add every time a class to an element. You also can use element selectors. –  Yannick Ihmels Jul 21 '14 at 14:29

for that you just have to add this code

style:"float:left;margin-right:10px;margin-bottom:10px;"

and it works fine

share|improve this answer
    
First off, I think you meant style=, not style:. Second, using inline styles is a bad idea, especially if this pattern is repeated many times throughout a page or site. –  chharvey Aug 27 '14 at 1:40

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.