New Posts
Home / Web Designing / HTML / Understanding HTML Content Model.

Understanding HTML Content Model.

HTML Content Model.

In this article, we will learn about HTML Content Model. We have seen many  elements that can be used to markup text, it is important to make an observation about all the elements that live inside the <body> element because each one can fall into one of two Catg:

HTML Content Model

Using Block and Inline Tags.

In HTML4 elements typically belongs one or two content models.

Block level elements could contain either block lever or inline. Whereas inline content.

html 4 content model

Block level occupies their own line in the document flow. The inline element usually is found within the content of block level elements. Content model defines the type of content expected inside an element, and control syntax rules such as element nesting.

Almost every element belongs to at least one content model, these content models to help user agents to know what type of content expect within an element they control certain aspects of syntax such as which element can nest within another element something like that.

Most HTML elements are defined as block level elements or inline elements. The kinds of block level elements always start with a new line. When they are shown in web browsers.

Examples: <h1>, <p>, <ul>, <table>.

Inline elements are normally displayed without line breaks.

Examples: <b>, <td>, <a>, <img>.

Grouping Elements with Div and Span.

  • The <div> element is used to group block-level elements.
  • The <div> element is a block-level element that is used to group block-level and inline elements.
  • A <div> element always starts and ends on a new line since it’s a block-level element.
  • The <span> element is an inline element that is used to group inline elements only.
  • The <span> element should be used when you want to group a part of a paragraph, a sentence, or any other inline element.

Example of (Block Element).

<!doctype html>

<html>

<head>

<title>

        Block Mode

</title>

</head>

<body>

<h1>    Block Mode</h1>

<div>

Allah helps those, who help themselves.Allah helps those, who help themselves. Allah helps those, who help themselves.Allah helps those, who help themselves.Allah helps those, who help themselves.

<div>

Allah helps those, who help themselves.Allah helps those, who help themselves. Allah helps those, who help themselves.Allah helps those, who help themselves.Allah helps those, who help themselves.

</div>

<div>

Allah helps those, who help themselves.Allah helps those, who help themselves. Allah helps those, who help themselves.Allah helps those, who help themselves.Allah helps those, who help themselves.

</div>

</body>

</html>

Example of (Inline Element).

<!doctype html>

<html>

<head>

<title>

  Inline Mode

    </title>

</head>

<body>

<h1>

    Inline Mode

</h1>

<p>

Allah helps those, who help themselves.Allah helps those, who help themselves. Allah helps those, who help themselves.Allah helps those, who help themselves.Allah helps those, who help themselves.

<img src=”images/new-design.png” />

Allah helps those, who help themselves.Allah helps those, who help themselves. Allah helps those, who help themselves.Allah helps those, who help themselves.Allah helps those, who help themselves.

</p>

</body>

</html>

About imran

My Name Mohammad Ramzan Bhutto. Live in District Jacobabad, Sindh, Pakistan. I have started blogging on Information Technology, my selected areas are Online Business, Digital Marketing, Make Money Online.

Check Also

External Style Sheet

How to Use External Style Sheet. 

How to Use External Style Sheet. An External style sheet is simply texting files with …