HTML Block And Inline Elements - DYclassroom | Have Fun Learning :-)

Trang chủ » Html Form Block Element » HTML Block And Inline Elements - DYclassroom | Have Fun Learning :-)

Có thể bạn quan tâm

dyclassroomHomeCoding RoundWebCodeDatabaseAppContentGame DarkHTML IntroductionHTML Getting StartedHTML Tags and ElementsHTML Basic TagsHTML AttributesHTML Head ElementHTML Meta TagsHTML FormattingHTML CommentsHTML LinksHTML Block and Inline elementsHTML ListsHTML ImagesHTML TablesHTML FormsHTML Image MapHTML AudioHTML VideoMenuHTML Block and Inline elements

HTML

Share ← PrevNext →

HTML elements are divided into two groups namely BLOCK elements and INLINE elements.

What is a Block element?

A block elements is an element that always start on a new line and take up the entire width and any other element starting after it will start from the next line.

List of HTML Block elements

Div <div>

Form <form>

Heading tags

<h1><h2><h3><h4><h5><h6>

Paragraph <p>

List

<ol><ul><dl>

Horizontal Line <hr />

Blockquote <blockquote>

Preformatted <pre>

Address <address>

What is an Inline element?

An Inline elements is an element that not necessarily start on a new line and take up only the required amount of width.

List of HTML Inline elements

Span <span>

Bold <b>

Italic <i>

Underline <u>

Subscript <sub>

Superscript <sup>

Big <big>

Small <small>

Emphasize <em>

Strong <strong>

List item <li>

Citation <cite>

Definition <dfn>

Insert <ins>

Code <code>

Keyboard <kbd>

Variable <var>

Grouping elements

We use two tags to group HTML elements namely the <div> tag and <span>.

The div tag

The div tag is a block element that is commonly used to group different HTML elements to form a group.

Following is an example of div tag used to create an address container of user.

<!-- 1st user address container --> <div class="address-container"> <p>Mr. A Bc</p> <address> #123, 3rd Main Street, ABCD Layout, Bangalore, Karantaka 560001 </address> </div> <!-- address container ends here --> <!-- 2nd user address container --> <div class="address-container"> <p>Ms. X yz</p> <address> #99, 7th cross, 8th Main road, PQR Layout, Bangalore, Karnataka 560001 </address> </div> <!-- address container ends here -->

Output

<!-- 1st user address container -->

Mr. A Bc

#123, 3rd Main Street, ABCD Layout, Bangalore, Karantaka 560001<!-- address container ends here --> <!-- 2nd user address container -->

Ms. X yz

#99, 7th cross, 8th Main road, PQR Layout, Bangalore, Karnataka 560001<!-- address container ends here -->

The span tag

The span tag is an inline element that is commonly used to group different HTML inline elements to form a group.

Following is an example of span tag used to create some inline groups.

<p>This is a sample line having <span>a <strong>CAPITAL</strong> letters word</span> and <span>a <small>small</small> letters word</span>.

Output

This is a sample line having a CAPITAL letters word and a small letters word.

← PrevNext →Share

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

  • HOME
  • ABOUT
  • PRIVACY
  • TERMS
  • CONTACT
  • BUG
  • CONTENT
  • APP

© 2014 - 2025 dyclassroom. All rights reserved.

Từ khóa » Html Form Block Element