alignleft

alignleft is a CSS class commonly used in web content to align media elements, such as images, to the left side of a page or post. It is not an HTML attribute by itself; rather, it relies on CSS rules defined by the site’s theme or stylesheet to take effect.

When applied to a media element, alignleft typically floats the element to the left and adds margins to separate it from surrounding text. A typical implementation uses rules like float: left; margin-right: 1em; margin-bottom: 1em, though exact values vary by theme. The surrounding text then wraps on the right side of the media, creating a layout where the image sits alongside the narrative.

alignleft is part of a set of alignment classes often used in content management systems such as WordPress. It is commonly used alongside aligncenter and alignright, which apply corresponding horizontal alignments. In practice, editors add the class to an image or media block to control its placement within the flow of content, with behavior influenced by the theme’s CSS.

Because the class relies on theme-defined styling, its appearance and responsive behavior can vary. On narrow viewports, floated elements may stack or require clearfix handling, so themes sometimes provide alternative responsive rules. Accessibility considerations remain the same as for any media: include descriptive alt text and ensure that layout decisions do not substitute for meaningful content.

Related concepts include aligncenter and alignright, which offer complementary alignment options.