تتألف صفحات HTML من عناصر، والتي تتألف عادةً من وسم بداية ووسم نهاية، ويكون بينهما محتوى نصي عادةً؛ ويمكن أن نضع في وسم البداية بعض الخاصيات التي تُغيّر من سلوك العنصر أو تؤدي إلى ضبطه. لاحظ أنَّ بعض العناصر يمكن أن تتشعب داخل بعضها بعضًا. الأقسام الأساسية للعناصر هي:
- وسم البداية: وهو يحتوي على اسم العنصر، موضوعًا ضمن قوسين على شكل زاوية، وقد يلي الاسم الخاصيات التي تؤثر عليه. مثلًا
<p>. - وسم النهاية: وهو يحتوي على اسم العنصر أيضًا مسبوقًا بخطٍ مائل قبله للإشارة إلى نهاية العنصر؛ لاحظ أنَّ نسيان وسم النهاية قد يسبب أخطاءً في بعض الأحيان، لذا خذ حذرك وتذكره. مثلًا:
</p>. - المحتوى: وهو موجودٌ بين وسمَي البداية والنهاية، ويُمثِّل في معظم الأحيان محتوى العنصر.
- العنصر: هو وسم البداية ووسم النهاية إضافةً إلى المحتوى.
_____ وسم النهاية _____ وسم البداية
| | | |
<p>paragraph content</p>
|__محتوى العنصر___|
_____ وسم النهاية _____ وسم البداية
| | | |
<p class="light">paragraph content</p>
|__محتوى العنصر__|__الخاصيات___|
<html> الذي يُشير إلى بدء مستند HTML. يحتوي العنصر <html> على عنصرين هما العنصر<head> و <body>؛ أما العنصر <head>فيحتوي على البيانات الوصفية التي تصف المستند مثل العنصر <title> الذي ضبط عنوان الصفحة والعنصر<meta> الذي ضبط هنا ترميز محارف المستند والعنصر <link> الذي أشار إلى مستند CSS والعنصر<script> الذي أشار إلى شيفرة JavaScript. وأما العنصر <body> فيمثِّل محتوى الصفحة نفسها، كالصور (العنصر <img>) والفقرات (العنصر <p>) وغير ذلك. لاحظ كيف ينتهي كل قسم من أقسام المستند بوسوم الإغلاق المناسبة.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<link href="style.css" rel="stylesheet">
<script src="javascript.js"></script>
</head>
<body>
<img src="images/logo.png" alt="My Logo">
<p>Hello World!</p>
</body>
</html>
نُظِّم هذا الدليل بتخصيص صفحة لكل عنصر من عناصر HTML، أي يمكن زيارة الصفحة HTML/tagnameللحصول على معلومات حول العنصر
<tagname>. فللحصول على معلومات عن العنصر <img> نزور الصفحة HTML/img، ولمعرفة تفاصيل العنصر<table> نزور الصفحة HTML/table. أما حقول النماذج فهي موجودة ضمن صفحات فرعية في صفحة HTML/input (مثلًا: الصفحة HTML/input/emailللحقل <input type="email">).