ವಿಕಿಸೋರ್ಸ್

ಸಹಾಯ:Block and inline elements

←
Help:Templates
Block and inline elements
→

This help page describes the difference between inline and block elements, and when the distinction is important.

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

Block (div-based) templates

Further reading

ಸಂಪಾದಿಸಿ
"https://kn.wikisource.org/w/index.php?title=ಸಹಾಯ:Block_and_inline_elements&oldid=259818" ಇಂದ ಪಡೆಯಲ್ಪಟ್ಟಿದೆ