HTML Block and Inline Elements

يحتوي كل عنصر HTML على قيمة عرض افتراضية اعتمادا على نوع العنصر. قيمة العرض الافتراضية لمعظم العناصر هي block  أو inline.

عناصر Block-level

يبدأ عنصر block-level دائما على سطر جديد ويأخذ كامل العرض المتاح (يمتد إلى اليسار واليمين بقدر ما يمكن).

العنصر <div> هو عنصر على block-level.

Example

<div>Hello</div>
<div>World</div>
عناصر Block level في HTML:

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<output>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>









العناصر المضمنة

والعنصر inline لا يبدأ على سطر جديد ويستغرق فقط ما يصل العرض كلما لزم الأمر.

هذا عنصر <span> مضمن داخل فقرة.  

Example

<span>Hello</span>
<span>World</span>
العناصر المضمنة في HTML:

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>









العنصر <span>

غالبا ما يستخدم عنصر <span> كحاوية لبعض النصوص.

لا يحتوي العنصر <span> على سمات مطلوبة، ولكن كل من style وclass شائعة.

عند استخدامها مع CSS، يمكن استخدام عنصر <span> لأجزاء نمط النص:

Example

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

العنصر <span>

غالبا ما يستخدم عنصر <span> كحاوية لبعض النصوص.

لا يحتوي العنصر <span> على سمات مطلوبة, ولكن كل من style وclass شائعة.

عند استخدامها مع CSS، يمكن استخدام عنصر <span> لأجزاء نمط النص:

Example

<h1>My <span style="color:red">Important</span> Heading</h1>

HTML Grouping Tags

TagDescription
<div>(block-level) تعريف قسم في مستند 
<span>(inline) تعريف قسم في مستند











تعليقات

إرسال تعليق