Help:Block and inline elements
This page in a nutshell: Do not place block elements (a.k.a. div-based templates like {{center}}), tables, lists or paragraph breaks inside either inline elements (e.g. span-based templates like {{smaller}}) or <p> tags. |
Block and inline elements
[edit]Wikisource uses HTML to structure content and CSS to style it. Sometimes "wikicode" is used to simplify the HTML, but it's always rendered to HTML in the end.
HTML has two fundamental types of elements: inline elements and block elements. Generally, content is inline and block-level elements provide structure and grouping in the document. They have the following properties:
Inline | Block | |
---|---|---|
Example HTML tags | span, b, i | div, p, table, li, hr, h1-6 |
Space taken | Take only the space they need | Expand to fill parent containers (by default) |
New lines | Are in-line with surrounding elements | Cause a line break where they are inserted |
Alignment | Aligned according to parent container | Can have their own internal alignment |
Width | Based on the content | Default to the full width of the container. Can be set with CSS |
Can contain | Inline elements only | Block and inline elements |
An HTML document is made up of block and inline elements nested inside each other. However, there is one important rule: it is not valid for an inline element to contain a block element. Inline elements can contain only other inline elements and block elements can contain either other block elements and/or inline elements.
If you do nest an inline element in a block element, it results in invalid HTML, which may not render correctly. It will also trigger a "HTML5 misnesting lint error", and will be listed automatically at Special:LintErrors/html5-misnesting.
It is possible to make inline elements be styled like block elements using the CSS display
property. However, even if you set an inline element to have display:block;
or display:inline-block;
, the HTML is still structurally malformed if a <div>
tag is placed inside it.
Paragraph tags
[edit]It is also invalid for any block element to be nested inside a paragraph(p
) tag, even though the p
is itself a block element.
MediaWiki sometimes implicitly wraps text in p
tags, which can occasionally cause issues, particularly with line-breaks in Wikicode inside templates that use span
. For example, the following would be incorrect:
<span style="color:red;">{{{1}}} {{{2}}} </span>
This is because a p
will occur inside the span
tag.
If you only wanted a gap in the code for readability, you could use an HTML comment to avoid injecting a paragraph break:
<span style="color:green;">{{{1}}}<!-- This is within a comment, it will not appear in the output -->{{{2}}} </span>
if you actually want a paragraph break, then you should used a <div>
, not a <span>
.
Block and inline templates
[edit]Some Wikisource templates use inline elements (e.g. {{smaller}}) and some use block templates (e.g. {{center}}). This means that it is invalid to nest some templates inside others:
{{center| {{smaller| This is allowed: span inside div}}}} {{smaller| {{center| This is not allowed: div inside span}}}}
Some Wikicode constructs also end up as block-based HTML, and so they should never be placed inside an inline element:
Paragraph breaks like this result in <p> tags * Lists are * also block-based {| | As || are || tables |}
Some inline span-based templates have block-based counterparts. For example, {{smaller}} is span-based, and {{smaller block}} is block-based.
You may nest block-based templates inside other block-based templates:
{{smaller block| {{center| This is allowed: div inside div.}}}}
List of templates
[edit]Below is a non-exhaustive list of examples of common span and block templates:
Inline (span-based) templates
- font style templates:
- {{letter-spacing}}
- {{small-caps}}, {{uc}}, {{lc}}
- {{dropinitial}}, {{largeinitial}}
- {{blackletter}}
- {{bold}}, {{italic}} {{color}}, ...
Block (div-based) templates
- Font size templates:
- {{smaller block}}, {{x-smaller block}}, ...
- {{larger block}}, {{x-larger block}}, ...
- Alignment
- {{center}}, {{right}}
- {{float left}}, {{float right}}
- {{block center}}, {{block right}}
- Indentation
- {{hanging indent}}, {{text-indent}}
Further reading
[edit]- HTML Block and Inline Elements at w3schools.com