يبدأ أي مستند بعنوان معين ويمكنك استخدام أحجام مختلفة لعناوينك حيث يحتوي HTML أيضًا على ستة مستويات من العناوين ، والتي تستخدم العناصر <h1> و <h2> و <h3> و <h4> و <h5> و <h6>. أثناء عرض أي عنوان ، يضيف المتصفح سطرًا واحدًا قبل ذلك العنوان وسطرًا بعده. ومثال علي ذلك :
<!DOCTYPE html>
<html>
<head>
<title>Title examples</title>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
This is Heading 1
This is Heading 2
This is Heading 3
This is Heading 4
This is Heading 5
This is Heading 6
علامة الفقرات
توفر العلامة <p> طريقة لبناء النص في فقرات مختلفة. يجب إدخال كل فقرة من النص بين علامة الافتتاح <p> وعلامة الإغلاق </p> كما هو موضح أدناه في المثال :
<!DOCTYPE html>
<html>
<head>
<title>Paragraph examples</title>
</head>
<body>
<p>This is the First paragraph of the text</p>
<p>This is the Second paragraph of the text</p>
<p>This is the Third paragraph of the text</p>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
This is the first paragraph of the text
This is the Second paragraph of the text
This is the Third paragraph of the text
علامة سطر فاصل
عندما تستخدم عنصر </ br> ، فإن أي شيء يتبعه يبدأ من السطر التالي. هذه العلامة هي مثال لعنصر فارغ ، حيث لا تحتاج إلى فتح وإغلاق علامات ، حيث لا يوجد شيء بينهما.
تحتوي العلامة </ br> على مسافة بين الحرفين br والشرطة المائلة للأمام. إذا حذفت هذه المساحة ، فستواجه المتصفحات القديمة مشكلة في عرض فاصل الأسطر ، بينما إذا فاتتك حرف الخط المائل للأمام واستخدمت <br> فقط ، فلن يكون صالحًا في XHTML.
<!DOCTYPE html>
<html>
<head>
<title>Example of separator line</title>
</head>
<body>
<p> Welcome <br />
You deliver your assignment on time <br />
Thanks <br />
Tito 4 Tech </p>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
Welcome
You deliver your assignment on time
Thanks
Tito 4 Tech
توسيط المحتوى
يمكنك استخدام علامة <center> لوضع أي محتوى في وسط الصفحة أو أي خلية جدول.
<!DOCTYPE html>
<html>
<head>
<title>An example of content centering</title>
</head>
<body>
<p>This text is not in the middle</p>
<center>
<p>This text is in the middle</p>
<center/>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
This text is not in the middle
This text is in the middle
الخطوط الأفقية
تُستخدم الخطوط الأفقية لتقسيم أقسام المستند بصريًا. تنشئ العلامة <hr> سطرًا من الموضع الحالي في المستند إلى الهامش الأيمن وتكسر السطر وفقًا لذلك.
على سبيل المثال ، قد ترغب في كتابة سطر بين فقرتين كما في المثال التالي :
<!DOCTYPE html>
<html>
<head>
<title>Example of separator line</title>
</head>
<body>
<p>This is the first paragraph and should be at the top</p>
<hr />
<p>This is the second paragraph and should be at the bottom</p>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
This is the first paragraph and should be at the top
This is the second paragraph and should be at the bottom
مرة أخرى ، تعد العلامة </ hr> مثالاً للعنصر الفارغ ، حيث لا تحتاج إلى علامات الفتح والإغلاق ، حيث لا يوجد شيء بينهما.
يحتوي العنصر </ hr> على مسافة بين الأحرف hr والشرطة المائلة للأمام. إذا حذفت هذه المساحة ، فستواجه المتصفحات القديمة مشكلة في عرض الخط الأفقي ، بينما إذا فاتتك حرف الخط المائل للأمام واستخدمت فقط <hr> فهو غير صالح في XHTML.