سامح أشرف

أغلب العناصر من نوع semantic لا تختلف عن عنصر div وقد لا تضيف أي جديد للصفحة، لكن بالرغم من ذلك ينصح بإستخدام هذه العناصر كلما سنحت لك الفرصة وذلك لأن لها فائدة في تحسين السيو SEO الخاص بموقعك، وذلك لأن محركات البحث سوف تفهم تكوين الصفحة بشكل أكبر، فعنصر nav سيُفهم على أنه شريط التنقل الخاص بالموقع، وعنصر footer سيوضح آخر جزء من الصفحة .. إلخ. أيضًا سوف يساعد فئة من المستخدمين في تصفح الموقع، حيث يستعمل بعض المستخدمين أجهزة قارئ الشاشة (أجهزة مخصصة تساعد ذوي الإعاقات أو ضعيفي النظر .. إلخ في تصفح الإنترنت)، وبالتالي عندما يكون موقعك مبني بطريقة صحيحة من خلال عناصر semantic مناسبة سيكون الأمر أسهل على هذه الفئة من المستخدمين. كما أن إستخدام هذه العناصر سيسهل عليك عملية التطوير لأنك ستعرف مكان وفائدة الكود بمجرد النظر إلى اسم العنصر، في الماضي (في HTML 4 وما قبلها) كان يتم إستعمال عنصر div بكثرة لكي يتم إنشاء الأجزاء الرئيسية والفرعية في الموقع وكنتيجة لهذا الأمر كانت الصفحة ممتلئة بعناصر div مع أستعمال أصناف Classes ومعرفات IDs كثيرة ويصبح فهم الكود أصعب كلما زاد حجم الصفحة، لكن بعد ظهر عناصر semantic أصبح الأمر أسهل بكثير. يمكنك أن تلقي نظرة على هذه الإجابة التي تشرح إستخدام مجموعة من عناصر semantic وأين يتم إستعمالها في الصفحة:

يمكنك أن تستخدم التابع db.rename_column لتغير اسم حقل معين، وذلك من خلال عمل ملف تهجير migration من خلال الأمر التالي: ./manage.py schemamigration myapp renaming_column_name --auto سيقوم الأمر السابق بتوليد ملف باسم myapp/migrations/000x_renaming_column_name.py، الآن يمكنك أن تستخدم التابع db.rename_column في هذا الملف على النحو التالي: class Migration: def forwards(self, orm): # تغير الحقل name إلى full_name db.rename_column('app_foo', 'name', 'full_name') def backwards(self, orm): # تغير الحقل full_name إلى name db.rename_column('app_foo', 'full_name', 'name') أول معامل في التابع db.rename_column هو اسم الجدول الذي يتحوي على الحقل الذي تريد تغيره. في حالة وجود اسم نموذج متعدد الكلمات و بحالة camel-cased، مثل FooBar ، فسيكون اسم الجدول app_foobar (حروف صغيرة وتفصل بين الكلمات بعلامة _ ،وهو ما يسمى snake-case).

عندما يقوم جانغو Django بتشغيل مجموعة الاختبار test suit، فإنه ينشئ قاعدة بيانات جديدة، في حالتك اسم قاعدة البيانات test_mydb. مستخدم postgres الذي يحمل اسم المستخدم myusername ليس لديه إذن بإنشاء قاعدة بيانات، ومن هنا ظهرت رسالة الخطأ. عندما تقوم بتشغيل الأمر syncdb ، فإن جانغو Django لا يحاول إنشاء قاعدة بيانات جديدة ويستخدم قاعدة البيانات mydb، لذلك لن تحصل على أي أخطاء. يمكنك إضافة إذن إنشاء قواعد بيانات إلى المستخدم myusername عن طريق تشغيل الأمر التالي في postgres shell كمستخدم مسئول adminsitrator/super user : ALTER USER myusername CREATEDB; ملاحظة: يجب أن يطابق اسم المستخدم في الأمر السابق اسم مستخدم قاعدة البيانات في ملفات إعدادات جانغو Django.

يمكنك التواصل مع فريق الدعم الفني لإستبدال الدورة بدورة أخرى من الدورات الموجودة في الأكاديمية أو حتى لإسترجاع الأموال. تستطيع زيارة الدعم الفني الخاص بالأكاديمية من هنا.

التابع values يقوم بإعادة QuerySet تحتوي على قواميس dictionaries، وتكون نتيجته كالتالي: <QuerySet [{'comment_id': 1}, {'comment_id': 2}]> بينما التابع values_list يقوم بإعادة كائن QuerySet يحتوي على tuples، وتكون نتيجته كالتالي: <QuerySet [(1,), (2,)]> إذا كنت تستخدم التابع values_list لإعادة حقل واحد فيمكنك أن تضع الخاصية flat بقيمة true لإعادة كائن QuerySet يحتوي على كل المعرفات في شكل قيمة واحدة بدلًا من tuple، كالتالي: <QuerySet [1, 2]>

إذا كنت لا تريد تجاوز HTML، لعرضها بشكل كامل فيمكنك أن تستخدم عامل التصفية safe: {{ myhtml |safe }} كما يمكنك أن تستخدم autoscape لكي يتم إيقاف عملية auto-scaping المسئولة عن تخطي أكواد HTML، يقبل هذا العنصر معامل واحد بيقمة on أو off، على النحو التالي: {% autoescape off %} {{ myhtml }} {% endautoescape %} كما يمكنك إعادة تشغيل عملية تخطي أكواد HTML في جزء معين من خلال المرشح escape، كالتالي: {% autoescape off %} {{ title|escape }} {% endautoescape %} كما يمكنك ان تستخدم التابع format_html والذي يقوم بقبول كود HTML كمعامل أول ثم المتغيرات التي يتم إستخدامها في هذا الكود، كالتالي: from django.utils.html import format_html from django.utils.safestring import mark_safe some_html = "<h1>this is title</h1>" some_text = "this is a strong text" some_other_text = "another text here" format_html("{} <b>{}</b> {}", mark_safe(some_html), some_text, some_other_text, ) أيضًا يوفر جانغو Django طريقة أخرى لعمل render لكود HTML لديك من خلال الصنف Context و Template، على النحو التالي: from django.template import Context, Template t = Template('This is your <span>{{ message }}</span>.') c = Context({'message': 'first message'}) html = t.render(c) # This is your <span>first message</span>.

تحتوي الأكاديمية على دورة تطوير تطبيقات الجوال بتقنيات الويب، والتي من خلالها سوف تتعلم كيفية عمل تطبيقات أندرويد و iOS من خلال لغات مثل HTML و CSS و JavaScript وسوف تحصل في النهاية على القدرة على برمجة تطبيقات للأندرويد و iOS معًا من خلال كود واحد فقط (تركز الدورة على برمجة تطبيقات الأندرويد بشكل خاص ولكن يمكنك أن تقوم بعمل تطبيقات iOS بنفس الطريقة وبدون إختلافات)، وبما أنك سوف تستخدم تقنيات الويب مثل HTML و CSS و JavaScript فسوف يكون لديك القدرة على عمل مواقع (Frontend)، فبطبيعة الحال تسمى الدورة "دورة برمجة تطبيقات الهواتف الذكية بإستخدام تقنيات الويب". بالنسبة للفرق بين المطور والمبرمج والمصمم، فهو كالتالي: المصمم هو الشخص الذي يقوم برسم شكل التطبيق النهائي بإستخدام برامج مثل أدوبي أكس دي و Figma، مجرد رسومات فقط وليس تطبيق حقيقي، ويتم إرسال هذه التصاميم إلى المطور ليحولها إلى كود. المطور هو الشخص الذي يقوم بكتابة كود واجهة التطبيق مثل الأزرار وإضافة الصور والنصوص في التطبيق، بمعنى آخر هو الشخص المسئول عن كل ما يظهر في التطبيق. المبرمج هو الشخص الذي يقوم بكتابة الكود المنطقي، مثل ما الذي سيحدث عندما يضغط المستخدم على زر معين وكيف سيتم جلب البيانات من قاعدة البيانات والتأكد من مدخلات المستخدم (البريد الإلكتروني، كلمة السر ...)، إلخ. وفي كثير من الأحيان يقوم شخص واحد فقط بالقيام بمهمتين أو أكثر معًا، ويسمى مبرمج ومطور تطبيقات على سبيل المثال. وعند الإنتهاء من دورة تطوير تطبيقات الهواتف الذكية بإستخدام تقنيات الويب سوف تكون مطور ومبرمج في نفس الوقت، لأنك سوف تقوم بعمل التطبيقات من الصفر وحتى إنهائها تمامًا. أيضًا يوجد خيار آخر وهو دورة التطوير بإستخدام لغة JavaScript والتي من خلالها سوف تتعلم برمجة وتطوير مواقع الويب (backend & frontend) وكذلك عمل تطبيقات لسطح المكتب تعمل على الويندوز ولينكس وماك من خلال أطار Electron، وسوف تتعلم أيضاً عمل تطبيقات الهواتف الذكية (أندرويد و iOS) من خلال React Native، وسوف تقوم ببناء تطبيق للمراسلة مثل WhatsApp خلال الدورة. كل الدورات تبدأ معك من الصفر ولا تحتاج لخبرة مسبقة للبدأ في أي دورة من دورات الأكاديمية، ولكن إن لم تتعامل مع أي أكواد من قبل أو لا تعرف أساسيات البرمجة فيفضل أن تقوم بأخذ دورة علوم الحاسوب وهي دورة مخصصة تشرح لك كل أساسيات البرمجة وأنظمة التشغيل وأساسيات الويب عبر تعلم HTML, CSS & JavaScript وطلبات الإنترنت requests والخوارزميات وهياكل للبيانات من خلال لغة بايثون وكيفية التفكير المنطقي وحل المشاكل وإصلاح الأخطاء ... إلخ.

يحدث هذا الخطأ لأن المتصفح لا يقوم بإرسال حقل checkbox إن لم تكن محددًا، وبالتالي لا يوجد مفتاح باسم is_published في القاموس request.POST، لذلك يمكنك أن تستخدم التابع get الموجود في أي قاموس dictionary والذي يسمح لك يتمرير قيمة إفتراضية في حالة عدم وجود المفتاح في القاموس، كالتالي: is_published = request.POST.get('is_published', False) أو يمكنك عمل ذلك من خلال جملة if .. else، على النحو التالي: if 'is_published' in request.POST: is_published = request.POST['is_published'] else: is_published = False ويمكن إختصار الكود السابق في سطر واحد، كالتالي: is_published = 'is_published' in request.POST and request.POST['is_published'] كما يمكنك أن تستخدم جملة try ... except: from django.utils.datastructures import MultiValueDictKeyError try: is_published = request.POST['is_published'] except MultiValueDictKeyError: # في حالة لم يوجد المفتاح is_published is_published = False

يمكنك أن تستخدم جملة with على النحو التالي: {% with "posts/"|add:myVar|add:"/base.html" as template %} {% include template %} {% endwith %} لكن الطريقة الأفضل هي أن تقوم بعمل وسم مخصص لهذا الأمر كالتالي: أولًا قم بعمل ملف يف المسار: <yourAppName>\templatetags\<yourAppName>_extras.py ثانيًا في هذا الملف قم بعمل وسم مخصص على النحو التالي: from django import template register = template.Library() @register.filter def addStr(str1, str2): return str(str1) + str(str2) والآن أصبح بإمكانك أن تستخدم هذا الوسم على كالتالي: {% load <YourAppName>_extras %} {% with "posts/"|addstr:myVar|addstr:"/base.html" as template %} {% include template %} {% endwith %}

تضمن لك أكاديمية حسوب بإسترداد استثمارك خلال 6 أشهر، وأنا أقتبس هنا من مركز المساعدة الخاص بالأكاديمية: كما يمكنك التواصل مع فريق الدعم الفني للحصول على المساعدة أو الاستفسار بشكل أكبر من خلال هذا الرابط (مركز مساعدة أكاديمية حسوب).

ذلك لأن القيمة flex مثلها مثل block و inline و inline-block، تقوم بالتأثير على العناصر بشكل معين، فعلى سبيل المثال، الخاصية display: block تجعل العناصر تترتب أسفل بعضهم البعض، بينما الخاصية inline تجعل العناصر بجانب بعضهم البعض لكن لا يمكنك أن تحدد طول height للعناصر، بينما القيمة inline-block تجعل العناصر بجانب بعضهم البعض ويمكنك أن تحدد طول height ... إلخ. وكذلك القيمة flex تجعل العنصر ينكمش على محتوياته بشكل إفتراضي وتجعل المحتويات (العناصر الأبناء بجانب بعضهم البعض)، وبالطبع يمكن تغير هذا الأمر من خلال بعض خصائص flexbox مثل الخاصية flex أو الخاصية flex-direction. يمكنك معرفة المزيد عن خصائص Flexbox في CSS من خلال هذه المقالات:

يمكنك التواصل مع مع فريق الدعم الفني، وسؤالهم بهذا الخصوص، للتواصل مع الدعم الفني يمكنك أن تستخدم مركز المساعدة من هنا.

سبب حدوث ذلك هو أن الصور تكون من نوع inline بشكل إفتراضي وبالتالي يتم حساب طولها من خلال ما يسمى بطول السطر line-height وهذه القيمة تختلف من متصفح لآخر، وبالتالي يمكن حل هذه المشكلة بطريقتين: يمكنك أن تحدد طول السطر line-height بقيمة 0 للعنصر .logo-container، كالتالي: .logo-container { line-height: 0; } كما يمكن حل المشكلة من خلال إضافة الخاصية display للصورة بقيمة block، كالتالي: img { display: block; } وذلك لأن في العناصر من نوع inline، تُستخدم خاصية line-height لحساب ارتفاع المحتوى نفسه. بينما في العناصر من نوع block، تُستخدم الخاصية line-height لتحديد الحد الأدنى لارتفاع المحتوى داخل العنصر. يمكنك أن تلقي نظرة على توثيق الخاصية line-height من خلال موسوعة حسوب لمعرفة المزيد عن هذه الخاصية.

يمكنك أن تقوم بذلك من خلال : query = forms.CharField(label = 'search', widget = forms.TextInput(attrs = {'placeholder': 'Search'})) حيث تقبل widget كائن من نوع TextInput والذي بدوره يمكنك من الحصول على قيمة أي خاصية مثل placeholder على سبيل المثال. والطريقة الأخرى لعمل نفس الشيء هي إستخدام صنف Meta، كالتالي: from django import forms from .models import SearchModel class SearchForm(forms.ModelForm): class Meta: model = SearchModel widgets = { 'name': forms.TextInput(attrs={'placeholder': 'Search'}), }

تم إزال الموديول django.core.urlresolvers من جانغو بداية من الإصدار 2.0، وبدلًا من ذلك تم يجب إستخدام django.urls، لذلك يجب تغير كل جمل import لكي تبدو على النحو التالي: from django.urls import reverse لاحظ أن الإصدار 2.0 من جانغو Django يزيل بعض الميزات التي كانت موجودة سابقًا في django.core.urlresolvers، لذلك قد تضطر إلى إجراء المزيد من التغييرات قبل أن يعمل الكود الخاصة بك. يمكنك أن تستخدم توثيق جانغو Django لمراجعة الميزات التي تم إيقاف العمل بها في الإصدار 1.9 للحصول على تفاصيل حول هذه التغييرات الإضافية.

يمكنك أن تقوم بتسجيل الدخول بنفس البريد الإلكتروني في كل مواقع حسوب، لكن سوف يتطلب منك إختيار اسم المستخدم عند عملية تسجيل الدخول لحسوب I/O على سبيل المثال، واسم المستخدم هذا يجب أن يكون بأحرف إنجليزية وأرقام وعلامة _ فقط (يمكنك أن تكتب اسمك باللغة الإنجليزية)، كما يمكنك أن تجعل اسم المستخدم واحدًا على كل المنصات بدون مشكلة. اسم المستخدم سوف يُستعمل في عرض ملفك الشخصي على المنصة، مثل هذه الصفحة. كما يتم طلب اسم المستخدم مرة واحدة فقط في أول مرة تسجل فيها في كل الموقع.

لا ليس ضروريًا على الإطلاق، حيث يمكن عمل كل ما يقوم به من خلال أي محرر أكود مثل VS Code، ويمكنك تحميله من هنا

بشكل افتراضي، يكون كائن التاريخ والوقت في Python من نوع naive، لذلك تحتاج إلى جعل كلاهما إما كائنات naive أو aware. ويمكن القيام بذلك باستخدام: import datetime import pytz utc = pytz.UTC post.datetime_start = utc.localize(post.datetime_start) post.datetime_end = utc.localize(post.datetime_end) # الآن كلا الحقلين من نوع aware, ويمكن المقارنة بينهما كما أن جانغو Django يقدم طريقة سهلة لكي تحصل على الوقت والتاريخ الحاليين بنفس الصيغة التي يستعملها من خلال التبع datetime.datetime.now، على النحو التالي: from django.utils import timezone now = timezone.now() كما يمكنك أن تقوم بتحويل الوقت والتاريخ من صيغة UNIX من خلال الكائن datetime.datetime، كالتالي: unix_time = int(unix_timestamp) d = datetime.datetime.utcfromtimestamp(unix_time) d_with_tz = datetime.datetime( year = d.year, month = d.month, day = d.day, hour = d.hour, minute = d.minute, second = d.second, tzinfo = pytz.UTC)

يمكنك أن تستخدم أي محرر ترغب به، ولكن أنصحك بإستخدام VS Code، خصوصًا لبرمجة flutter بشكل خاص و Dart بشكل عام، وذلك بسبب وجود إضافتين لكل منهما تساعدك على عمل كل ما يقوم به Android studio. كما أن هذا المحرر يستهلك موارد أقل بكثير من Android studio. أيضًا يفضل أن تقوم بإستخدام هاتف حقيقي بدلًا من محاكي emulator لكي لا تستهلك موارد الجهاز على المحاكي فقط، ويمكنك عرض شاشة الهاتف على الحاسوب من خلال برنامج scrspy أو برنامج مشابه، وبالتالي سوف تظهر لك شاشة الهاتف على الكمبيوتر وكأنها محاكي.

التابع add يقبل إدخال أكثر من كائن في نفس الوقت بالشكل التالي: Users.m2mfield.add(obj1, obj2, obj3) أي أنه يجب أن تمرر الكائنات مباشرة إلى التابع add وليس تمرير قائمة من الكائنات. إن كانت لديك قائمة من الكائنات وتريد تمرير محتوياتها فيمكنك أن تستخدم علامة * قبل القائمة على النحو التالي: Users.m2mfield.add(*[obj1, obj2, obj3]) ولاحظ أن بهذه الطريقة لا يقوم جانغو Django يإستدعاء التابع save لكل كائن، ولكنه يستخدم التابع bulk_create، وبالتالي يتم تنفيذ جملة SQL واحدة فقط. وفي حالة أردت أن تقوم بتحديث الكئانات الموجودة بالفعل في قاعدة البيانات، فيمكنك أن تستعمل التابع set والذي يقوم بحذف كل الكائنات الموجودة في هذه العلاقة (many-to-many)، وينشيئهم من جديد، وتستخدم على النحو التالي: Users.m2mfield.set([obj1, obj2, obj3]) لاحظ أن التابع set يقبل تمرير قائمة من الكائنات بشكل مباشر (أي بدون وضع علامة * قبل القائمة).

يتم استخدام SECRET_KEY في العديد من الأماكن المختلفة في مشروغ جانغو Django، وسأوضح ما التأثيرات و الأضرار التي قد تحدث إذا قمت بتغيير الـ SECRET_KEY. قائمة الأشياء التي تستخدم SECRET_KEY بشكل مباشر أو غير مباشر: JSON object signing دوال التشفير لـ salted hmacs أو دعم محرك توليد النصوص والأرقام العشوائية الذي يؤثر على كل من: توليد رمز إعادة تعين كلمات السر password reset token (للمستخدمين والمسؤولين) comment form security: لحماية الموقع من طلبات POST من مواقع غريبة form security: حماية النماذج بشكل عام message tampering، لأنه قد يستخدم ملفات الكوكيز Cookis لنقل البيانات بين ملفات العرض views حماية الجلسات session data وعمل مفاتيح عشوائية للجلسات session keys توليد random salt من أجل إستخدامها في دوال الهاش password hashers توليد كلمات مرور عشوائية passwords، إذا تطلب الأمر عمل مفتاح CSRF ما سوف يتغير عند المستخدم بشكل مباشر عند تغيير قيمة SECRET_KEY هي: الجلسات، سيتم كسر فك تشفير البيانات، وهو صالح لأي خلفية جلسة (ملفات تعريف الارتباط أو قاعدة البيانات أو الملفات المستندة إلى ذاكرة التخزين المؤقت). لن يعمل رمز إعادة تعيين كلمة المرور الذي تم إرساله بالفعل لأي مستخدم، وسيتعين على المستخدمين طلب رمز جديد. لن يتم التحقق من صحة نموذج التعليقات (في حالة استخدام django.contrib.comments) إذا تم طلبه قبل تغيير القيمة (أي إذا تم تحمليه في المتصفح ثم تم تغير الـ SECRET_KEY) وتقديمه بعد تغيير القيمة. أعتقد أن هذا بسيط جدًا ولكنه قد يكون مربكًا للمستخدم. الرسائل (من django.contrib.messages) لن تتحقق من جانب الخادم مثل نموذج التعليقات. بداية من جانغو Django الإصدار 1.10 يمكنك توليد SECRET_KEY جديد من خلال دالة get_random_secret_key على النحو التالي: ./manage.py shell -c "from django.core.management.utils import get_random_secret_key; print(get_random_secret_key())"

بداية من الإصدار 1.7 جانغو Django أصبح بإمكانك إضافة بيانات ديناميكية من خلال المعامل html_message. إذا تم توفير المعامل html_message (قيمته ليست None)، فسيكون بإمكانك أن تستخدم متغيرات في نص البريد الإلكتروني، ولإتمام هذه العملية ستحتاج إلى إستعمال الدالة render_to_string لكي تستطيع عمل النص، وبالتالي يمكنك عمل الرسالة على النحو التالي: from django.template.loader import render_to_string from django.core.mail import EmailMultiAlternatives username = "My Username" msg_plain = render_to_string('templates/email.txt', {'username': username}) msg_html = render_to_string('templates/email.html', {'username': username}) msg = EmailMultiAlternatives('عنوان الرسالة', msg_plain, 'info@example.com', ['username@gmail.com']) msg.attach_alternative(msg_html, "text/html") msg.send() بهذه الطريقة سوف يتم توليد نص البريد الإلكتروني من خلال المتغيرات التي يمكنك تمريرها إلى الدالة render_to_string، وفي النهاية تقوم بإرسالة هذه الرسالة بشكل عادي.

يمكن عمل ذلك في جانغو Django ولكن تختلف الطريقة حسب الإصدار الذي لديك، فبالنسبة إلى الإصدار 1.8 وما هو أحدث من جانغو Django، يمكنك أن تستخدم التابع get_fields، على النحو التالي: # نستدعي النموذج هنا from django.contrib.auth.models import User [field.name for field in User._meta.get_fields()] # أو [field.name for field in User._meta.fields] بهذه الطريقة سوف تحصل على قائمة بكل الحقول الموجودة في هذا النموذج. لاحظ أن التابع get_fields سوف يقوم بإرجاع على بعض العلاقات التي لا يمكنك عرضها في view على سبيل المثال. أما بالنسبة للإصدارات الأقدم من 1.8، فيمكنك أن تستخدم التابع get_all_field_names، على النحو التالي: model._meta.get_all_field_names() لاحظ أن هذه الدالة لا تعمل إلا في الإصدارات القديمة وأصبحت متجاهلة deprecated، وتم حذفها بداية من الإصدار 1.10

الكائن queryset يوفر التابع exists والذي من خلال تستطيع معرفة إن كان هناك نتائج أم لا، حيث يعيد True في حالة وجود نتائج، و False في حالة كان الكائن فارغًا، ويمكنك إستخدامه على النحو التالي: if users.exists(): # أفعل شيء ما else: # أفعل شيء آخر كما يمكنك التحقق من الـ queryset بشكل مباشر كالتالي: if users: # أفعل شيء ما else: # أفعل شيء آخر

يصف العنصر الدلالي بوضوح معناه لكل من المتصفح والمطور. أمثلة على العناصر غير الدلالية non-semantic مثل: div و span - لا تحدد محتوياتها بوضوح. أمثلة على العناصر الدلالية semantic :مثل footer و header و article - تحدد محتوياتها بوضوح (أي أنها تستخدم في حالات معينة). لكل عنصر من نوع semantic يكون له مكان معين يُستعمل فيه، وفي أغلب الأحيان سوف تحصل على نفس النتيجة إن أستعملت div فقط بدلًا من nav أو header على سبيل المثال، لكن الفرق يظهر عندما تريد أن يظهر موقعك في النتائج الأولى لمحركات البحث، حيث تنصح جوجل (وباقي محركات البحث بالطبع) أن تستخدم كل عنصر في مكانه الصحيح، حتى يصبح الأمر أسهل على محركات البحث من فهم محتوى صفحتك، وبالتالي تساعد في تحسين SEO الخاص بالموقع. هنا صورة توضح الأماكن الرئيسية لكيفية إستخدام أهم العناصر الدلالية semantic: header: هو رأس الصفحة ويوجد فيه في الغالب شعار الموقع وأزرار تسجيل الدخول والإشعارات، وقد يحتوي أشياء أخرى مثل زر لفتح قائمة جانبية أو نافذة للبحث .. إلخ. nav: هو المكان الذي يوجد فيه أهم الروابط الرئيسية في الموقع، يمكنك أن ترى شرط التنقل في موقع حسوب في الأعلى وستجد أنه يحتوي على رابط الصفحة الرئيسية وأقسام المقالات وأقسام الأسئلة العامة، والدورات .. إلخ، أي أنه يحتوي على أهم روابط الموقع فقط. aside: يعبر عن الشريط الجانبي، وقد يحتوي على آخر التعليقات، أحدث المقالات أو حتى روابط صفحات التواصل الإجتماعي الخاص بالموقع. footer: يكون في الغالب هو آخر جزء في الموقع، ويحتوي على بعض الصفحات العامة عن الموقع، مثل صفحة "تواصل معنا"، وصفحة "معلومات عنا" وصفحات مختلفة أخرى، وقد يحتوي على روابط التواصل الإجتماعي أيضًا وعلى نموذج للتواصل مع مدير الموقع. main: يحتوي على الجزء الرئيسي من الصفحة، مثل الجزء الذي يظهر فيه التدوينة (في المدونات)، أو نتائج البحث (في محركات البحث)، أو حتى المكان الذي يظهر فيه مقطع الفيديو (إن كان موقع لنشر فيديدوهات)، يجب أن تحتوي الصفحة على عنصر main واحد على الأكثر. article: تكون في الغالب داخل عنصر main وتحتوي على المقالة/التدوينة. section: يستخدم لتقسيم أجزاء الصفحة التي ليس لديها عنصر خاص، على سبيل المثال، يوجد للمقالة عنصر article، ولكن لا يوجد عنصر لعارض شرائح slideshow وبالتي سوف تستخدم هذا العنصر وتضع في داخله عارض الشرائح (بإعتبار أن عارض الشرائح عبارة عن قسم في الصفحة، أي جزء رئيسي منها). address: يستخدم لعرض العناوين بشكل خاص، ومعلومات التواصل بشكل عام time: لعرض التواريخ والأوقات هذه بعض العناصر الدلالية semantic elements والأكثر إستخدامًا. وقد تساعدك هذه المقالة (تعرف على أكثر الأخطاء شيوعا لدى استخدام HTML5) في معرفة بعض الأخطاء التي يقع فيها الكثير من مطوير الويب.