Why doesn't <figure> not align with everything else by default? Just curious

HTML-CSS
1

I started the html course. It shows how to add an image. I’m also doing it also along side a book that mentions adding captions to images using and . The thing is, the image is maybe half an inch to the right side of everything else. I haven’t learned any css yet but I am just curious why add a new features (html5) and have it look like crap by default by being not aligned?

Also not a fan of strong and em. Just get rid of b, i, strong, and em all together because from what I’ve been seeing, all people are doing is replacing b wth strong to say it’s html5.

<img src="images/quokka.png" alt="A quokka" title="Similar in size to a cat." width="620" height="349"/>
	<p>A quokka <abbr title="also known as">aka</abbr> the worlds happiest animal is making a come back.</p>
   
<figure>
	<img src="images/quokka.png" alt="A quokka" title="Similar in size to a cat." width="620" height="349" />
		<figcaption>
			A quokka <abbr title="also known as">aka</abbr> the worlds happiest animal is making a come back.</p>
	    </figcaption>
</figure>
2

By default the figure element has a margin of 1em on the left and right and 40px on the top and bottom. This is why it is not aligning with the rest of your content. Why it is these values by default I do not know.

You can remove the margin with the following CSS:

figure {
     margin: 0px;
}
3

  1. HTML is not for styling but for marking up the document semantically, default styles are given by the browser (user agent stylesheet).

  2. W3C do not control the default styles, they do make recommendations.

This is my long-winded, semi-technical, boring answer/speculation on why <figure> has the default styles it does. In case anyone actually cares (i doubt it).

  1. It is self-contained content.

The HTML <figure> element represents self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit.

  1. It is a sectioning root.

Being a sectioning root, the outline of the content of the element is excluded from the main outline of the document.

Defining Sectioning Roots

Solid Statement: Section roots break out sections of a document into their own separate outlines. They are ‘root’ objects that have no ancestors. According to the W3C, the only HTML5 elements that are section roots are body, blockquote, fieldset, figure, and td. These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.

  1. Here is the W3C recommended default style sheet for HTML 4 (does not include figure), if we look at another sectioning root element, namely the <blockquote>, we can see it has (more or less) the same styles as the <figure> element.
blockquote { margin-left: 40px; margin-right: 40px }

blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }

There you have it, it basically has the same style as a blockquote, presumably because it belongs to this group of section root elements, and the blockquote element is the one it has the most in common with.

  1. The <strong> and <em> elements carry semantic meaning, <b> and <i> do not. They are in fact not interchangeable (should not be used as such).

  2. The <strong> and <em> elements are not HTML 5 elements, although the meaning of <strong> was redefined

Differences Between HTML 4.01 and HTML5
In HTML 4.01, the <strong> tag defines strong emphasized text, but in HTML5 it defines important text.

2 Likes
4

I was going to mention that i, b, em and strong have value to people who use screen readers, but the page here https://developer.paciellogroup.com/blog/2008/02/screen-readers-lack-emphasis/ says they don’t by default, I’ve not been able to find a more recent article to see if the defaults have changed.

However, assuming that one day the defaults will change if they haven’t already, and there will be advanced users who already change the defaults, the tags have value to screen readers. How else can emphasis on text be universally coded? Wrapping text in a span and applying style that way so that it is bold or italic takes more characters, you have to define the style yourself, AND there will be no global naming consistency. It’s far easier to just use the existing tags for the purpose they’re intended. i and b for purely visual decoration and em and strong for emphasis.