Difference between HTML inline element and block element
- Jun 24, 2021
- 2 min read
Updated: Jul 3, 2021
HTML code ရေးတိုင်းတစ်ချို့ tag တွေက နောက်တစ်ကြောင်း ကို နေရာယူပြီး တစ်ချို့ tag တွေက ဘာလို့ဆက်တိုက်နေရာယူသွားရလည်းဆိုတာကို ရှင်းပြပါမယ်။
HTML tag မှာ level ၂ မျိုး ရှိပါတယ်။
Block-level element / Block element
Inline-level element / Inline element
Block-level element
Block-level element တွေက page / container တစ်ခုလုံး နေရာအပြည့်ယူကြပါတယ်။
HTML block-level element တွေက line အသစ်တစ်ခုကနေသာ စတင်သော element တွေဖြစ်ပါတယ်။ Block-level element တစ်ခုသည် line တစ်ခုသို့မဟုတ်တစ်ခုထက်ပိုသော line များအထိနေရာယူနိုင်ကြပါသည်။ ဥပမာ အားဖြင့် <p>, <div>
<div>Hello I am div element</div>
<p>Hello I am paragraph element</p>Block-level element တွေက တော့
<address> - Shows contact information.
<applet> - Embed a Java applet.
<article> - Contains the article's content.
<aside> - Describe a section of content.
<blockquote> - Denote a section that is quoted.
<canvas> - Draw graphics using JavaScript.
<caption> - Add caption to table.
<center> - Center text.
<details> - Create an interactive widget to hide text.
<dir> - Designate a collection of file names.
<div> - Creates a document division.
<dl> - Contain a list of definitions and their descriptions.
<dt> - Designate a term within a description list.
<embed> - Designate an area for interactive content.
<figure> - Designate an area of self-contained content
<form> - Creates an input form to capture data.
<frame> - Create a frame window of another page.
<h1> to <h6> - Creates a heading.
<header> - Create a header section.
<hr> - Create a horizontal line.
<iframe> - Create a window frame of a page.
<li> - Used to denote a list item.
<main> - Contains the content specific to a certain page.
<marquee> - Create scrolling text.
<nav> - Contains a page's navigations links.
<noscript> - Contains the content to use in browsers that don't support scripting.
<object> - Designate an object embedded into a web page
<ol> - Contains an ordered list.
<p> - Used to denote a paragraph.
<pre> - Contains preformatted text.
<section> - Group thematically similar content together.
<table> - Contains a table.
<ul> - Contains an unordered list.
Inline-level element
Inline-level element ဆိုတာကတော့ သီးခြားအပိုင်းအဖြစ်မဟုတ်ဘဲ အဓိကစာသား၏အစိတ်အပိုင်းအဖြစ်ထည့်သွင်းထားပြီးရေးသားတာကိုဆိုလိုပါတယ်။ inline element တွေက page / container တစ်ခုလုံး နေရာအပြည့်ယူမယူကြဘဲ emelent ရဲ့ width အတိုင်းသာနေရာယူကြပါတယ်။ Block-level element နှင့်မတူတာကတော့ inline element တွေက new line ကနေမစဘဲဆက်တိုက် နေရာယူပါတယ်။
<div>Hello I am <b>div</b> element with Bold letter</div>Inline-level element တွေက တော့
<a>
<abbr>
<acronym>
<audio> (if it has visible controls)
<b>
<bdi>
<bdo>
<big>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<del>
<dfn>
<em>
<embed>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<map>
<mark>
<meter>
<noscript>
<object>
<output>
<picture>
<progress>
<q>
<ruby>
<s>
<samp>
<script>
<select>
<slot>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<template>
<textarea>
<time>
<u>
<tt>
<var>
<video>
<wbr>
Comments