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
    
@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
    
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
    
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 '14 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 '14 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
    
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.