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 at 14:23
    
@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. –  ynnckhmls Jul 20 at 14:26
    
Did you try to achieve this with CSS? Or do you need an example? –  JVerstry Jul 20 at 14:29
    
I know how to achieve it with CSS. But I want to use semantic class names for it. Like even and odd or so. –  ynnckhmls Jul 20 at 14:33
    
There is no meaning to be expressed, hence no markup can be semantic, or even structural, when you have not said what the meaning of aligning left or right is. If left or right alignment is all that is said, then the only meaning is the visual placement. If you somehow classify the images by their meaning or role, then you can ask how to make it so that some classes are aligned left, some right. But then it is a different question (and probably has rather straightforward, even trivial answer). –  Jukka K. Korpela Jul 20 at 20:40

4 Answers 4

up vote 2 down vote accepted

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 at 16:59

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
1  
I know what semantic html is… left and right are not semantic class names. So I don’t want to use them for aligning images. This is no answer on my question. If I want a button blue, I don’t add a class blue to it, because it isn’t semantic. –  ynnckhmls Jul 20 at 14:19
    
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 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 at 14:29
    
I want to say nothing, it’s only for presentation as in a magazine. It’s not possible to use no classes. –  ynnckhmls Jul 20 at 14:30
    
OK, so there is actually no real semantic way. –  ynnckhmls Jul 20 at 14:36

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. –  ynnckhmls Jul 21 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 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. –  ynnckhmls Jul 21 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 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.