R.I.B.H.U. Academy^®

Inline Level HTML Elements:

    Inline level HTML elements should be, generally, used inside BLOCK LEVEL elements, so that TEXTs, Images, etc. will be shown correctly. Various INLINE level HTML elements are explained below:

    <p> Paragraph Element </p> is a BLOCK level HTML element, and contents, texts, etc. inside paragraph element, with <br /> (an empty HTML element) ^{<!-- 1 -->} will make a line break. Thus, you can say, <br /> as INLINE LEVEL element.

    Any blank (white/empty) space or line-break with spacebar and Enter keys will not be recognized ^{<!-- 2 -->} by the web-browser, inside PARAGRAPH, HEADINGS, DIV and also other INLINE LEVEL elements.

    &nbsp; is used for making blank (white)-spaces inside HTML element ^{<!-- 3 -->}, except inside <pre> PRE-FORMATTED element </pre> . You should use PRE-FORMATTED tag, generally, for making spaces and new lines.

    However, when you are working in any CMS (Content Management System, for example, WordPress, or custom designed CMS), you can insert line-break and spaces with Enter / Return and spacebar keys, because in PHP, functions like htmlentities() or other similar functions in Python, etc. are used by the CMS.

You can see different font styles in above and this line, because <hr /> is an empty element, which is inserted inside the <p> Paragraph Element </p>. You can also inspect this in your web-browser, by moving your mouse to top-right of your web-browser, e.g., Google Chrome, and clicking ⋮ (at top-right) ⇒ More Tools ⇒ Developer Tools with left-mouse-button or pressing Ctrl Shift i keys.

<pre>  Pre    Formatted    Texts  </pre>   is also BLOCK level HTML element.

<span> </span> is an INLINE level HTML element, which behaves just like DIV element. It also has no visual existence, just like other BOX type HTML elements. It also represents children, that is, contents / texts inside it.

    In the previous page, you have seen that DIV element (a block level element,) can also be used as an inline HTML element, because DIV is nothing but represents its children, and following code explains the same:

Explaination:

    In the above example, you can see that first <p> </p> element, ( just after <h1></h1> ) has texts with many blank (empty/white)-spaces, and also in the nested DIV of second outer DIV element, two paragraphs (texts) are separated by Enter key (line-break), but these texts are shown in web-browser, with no extra white-spaces.

    Texts inside <pre> </pre> having extra white-spaces and new-line (with Enter key) are shown in web-browser, as much white-spaces and new-line are inserted with keys in keyboard.

    The nested DIV (having PINK background) inside first outer DIV is moved to right.

    The nested DIV (having YELLOW background) inside second outer DIV is enclosed with previous and next TEXTS (contents) outside it. (See result in Example page.)

    REMEMBER: Each HTML element, whether BLOCK level or INLINE level has its own default properties (assigned by different WEB BROWSERs differently). You also can assign default properties to TEXTs as how much size they have, which font-family should be displayed as default, etc. in your web-browser, e.g., Google Chrome, by clicking ⋮ (at top-right) ⇒ Settings ⇒ Appearance ⇒ Customize fonts with left-mouse-button.

    You should not change these settings, especially Font-size to Tiny (9) or Huge (72), otherwise you will see very tiny font-size or very huge font-size of each website or web-page. Reset all settings of your web-browser, if you are uncomfortable with any changes.