உதவி:Block and inline elements

Block and inline elements

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

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

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

Below is a non-exhaustive list of examples of common span and block templates:

Inline (span-based) templates

• Font size templates:
  • {{smaller}}, {{x-smaller}}, ...
  • {{larger}}, {{x-larger}}, ...

• font style templates:
  • {{letter-spacing}}
  • {{small-caps}}, {{uc}}, {{lc}}
  • {{dropinitial}}, {{largeinitial}}
  • {{blackletter}}
  • {{bold}}, {{italic}} {{color}}, ...

• Inline items
  • {{gap}}
  • {{bar}}
  • {{illegible}}
  • {{redact}}

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}}

• Rules
  • {{rule}} (uses <hr>)
  • {{***}}

• Columns
  • {{div col}}
  • {{multicol}}

• Tables and containers
  • {{AuxTOC}}
  • {{TOC begin}}

Further reading

• HTML Block and Inline Elements at w3schools.com