ما هي لغة HTML؟

ما هي لغة HTML؟

لغة HTML (HyperText Markup Language) هي حجر الزاوية في بناء أي صفحة ويب. إنها ليست لغة برمجة بالمعنى التقليدي، بل هي لغة توصيف تُستخدم لتحديد هيكل ومحتوى صفحات الويب.

عندما تزور موقعاً إلكترونياً، فإن المتصفح الخاص بك يقوم بقراءة ملف HTML وترجمته إلى المحتوى المرئي الذي تراه، بما في ذلك النصوص، الصور، الروابط، ومقاطع الفيديو.

ماذا تعني HTML؟

  • HyperText (النص التشعبي): يشير إلى الروابط التي تربط صفحات الويب ببعضها البعض، مما يتيح لك التنقل بينها.
  • Markup (التوصيف): يشير إلى استخدام "العلامات" (Tags) لتوصيف أجزاء مختلفة من المحتوى، مثل تحديد الفقرات، العناوين، القوائم، وغيرها.
  • Language (اللغة): تشير إلى أنها مجموعة من القواعد القياسية التي يفهمها جميع متصفحات الويب.

المفاهيم الأساسية في HTML

1. العناصر (Elements) والعلامات (Tags)

تتكون صفحة HTML من مجموعة من العناصر. كل عنصر يبدأ بعلامة فتح (Opening Tag) وينتهي بعلامة إغلاق (Closing Tag)، وبينهما يوجد المحتوى.

على سبيل المثال، لتحديد فقرة، نستخدم العنصر p: 

    <p>هذه فقرة نصية.</p>

بعض العلامات لا تتطلب علامة إغلاق لأنها لا تحتوي على محتوى داخلي، مثل علامة كسر السطر br أو علامة الصورة img.

2. السمات (Attributes)

تُستخدم السمات لتوفير معلومات إضافية حول العناصر. تُوضع السمات داخل علامة الفتح وتتكون من اسم وقيمة.

على سبيل المثال، لتحديد رابط، نستخدم العنصر a مع السمة href لتحديد الوجهة: 

    <a href="https://www.example.com">زيارة موقع المثال</a>

هنا، href هي السمة، و "https://www.example.com" هي قيمتها.

3. هيكل مستند HTML

كل مستند HTML له هيكل أساسي يخبر المتصفح بكيفية التعامل معه. إليك الهيكل العام:

  • : يُعلن عن نوع المستند وإصدار HTML المستخدم (HTML5 في هذه الحالة).
  • : العنصر الجذر الذي يضم جميع محتويات صفحة الويب.
  • : يحتوي على بيانات وصفية حول المستند (metadata) التي لا تظهر مباشرة على الصفحة، مثل عنوان الصفحة (</code>)، وربط ملفات CSS أو JavaScript.</li> <li><code class="inline-code"><body></code>: يحتوي على كل المحتوى المرئي لصفحة الويب الذي يراه المستخدم.</li> </ul> <h2>مثال بسيط على صفحة HTML</h2> <p> إليك كيف تبدو صفحة HTML بسيطة: </p> <div dir="ltr" style="background:#1e1e1e; border-radius:10px; margin:25px 0; overflow:hidden; border:1px solid #333; text-align:left;"><div style="background:#2d2d2d; padding:10px 15px; display:flex; justify-content:space-between; align-items:center; direction:ltr;"><span style="color:#888; font-size:12px; font-family:sans-serif;">Code View</span><button onclick="var b=this; navigator.clipboard.writeText(b.parentElement.nextElementSibling.innerText); b.innerText='✔ تم'; setTimeout(function(){b.innerText='📋 نسخ';},2000);" style="background:#444; color:#fff; border:none; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px;">📋 نسخ</button></div><pre style="margin:0; padding:20px; overflow-x:auto; background:#1e1e1e; direction:ltr !important;"><code class="language-javascript" style="font-family:Consolas, monospace; font-size:14px; color:#d4d4d4; line-height:1.5; display:block; text-align:left;"><!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>صفحتي الأولى</title> </head> <body> <h1>مرحباً بك في عالم HTML!</h1> <p>هذه فقرة بسيطة في صفحة الويب الخاصة بي.</p> <a href="https://www.google.com">انتقل إلى جوجل</a> <img src="https://via.placeholder.com/150" alt="صورة توضيحية"> </body> </html></code></pre></div> <h2>لماذا HTML مهمة؟</h2> <p> HTML هي العمود الفقري للويب. بدونها، لن يكون هناك هيكل للمحتوى، وستكون جميع الصفحات مجرد نصوص عادية غير منظمة. إنها الأساس الذي تُبنى عليه جميع تقنيات الويب الأخرى مثل CSS (لتصميم الصفحات) و JavaScript (لإضافة التفاعل). </p> <h2>HTML5</h2> <p> HTML5 هو أحدث إصدار رئيسي للغة HTML، وقد جلب معه العديد من الميزات الجديدة والعناصر الدلالية (Semantic Elements) مثل <code class="inline-code">header</code>، <code class="inline-code">nav</code>، <code class="inline-code">main</code>، <code class="inline-code">article</code>، <code class="inline-code">section</code>، و <code class="inline-code">footer</code>. هذه العناصر تساعد في جعل هيكل الصفحة أكثر وضوحاً لكل من المطورين ومحركات البحث. </p> <h2>الخلاصة</h2> <p> HTML هي لغة التوصيف الأساسية لإنشاء صفحات الويب. إنها تحدد هيكل المحتوى باستخدام العناصر والسمات، وتوفر الأساس لجميع مواقع الويب التي نستخدمها اليوم. فهم HTML هو الخطوة الأولى والأساسية لأي شخص يرغب في بناء مواقع ويب. </p></div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> <script>setTimeout(function(){document.querySelectorAll('pre code').forEach(el=>{hljs.highlightElement(el);});},1000);</script> <div style="display: flex; justify-content: space-between; margin-top: 40px; padding: 20px; border-top: 1px solid #eee; direction: rtl;"><span></span><a href="https://www.jawarablog.com/p/html-course-index.html" style="color:#007bff; text-decoration:none;">الفهرس</a><a href="https://www.jawarablog.com/2026/05/html-editors_0735246598.html" style="background:#1a73e8; color:#fff; padding:8px 15px; border-radius:5px; text-decoration:none;">التالي →</a></div></div> </article> </div> </div></div> </div> </div> </div> <footer class='footer-section border-top py-4 bg-white'> <div class='container text-center'> <div class='admin-links mb-2'> <a class='text-muted mx-3 text-decoration-none small' href='/p/terms-and-conditions.html'>شروط الاستخدام</a> <a class='text-muted mx-3 text-decoration-none small' href='/p/disclaimer.html'>إخلاء المسؤولية</a> <a class='text-muted mx-3 text-decoration-none small' href='/p/privacy-policy.html'>سياسة الخصوصية</a> </div> <p class='text-muted mb-0 small'>© 2026 مدونة جوارا</p> </div> </footer> <script defer='defer' src='https://code.jquery.com/jquery-3.6.0.min.js'></script> <script type='text/javascript'> //<![CDATA[ window.addEventListener('DOMContentLoaded', function() { // إصلاح القائمة في الجوال $('#mobile-menu-btn').on('click', function(e){ e.stopPropagation(); $('#mobile-menu').toggleClass('active'); $(this).find('i').toggleClass('fa-bars fa-xmark'); }); $(document).on('click', function(e) { if (!$(e.target).closest('#mobile-menu, #mobile-menu-btn').length) { $('#mobile-menu').removeClass('active'); $('#mobile-menu-btn i').addClass('fa-bars').removeClass('fa-xmark'); } }); $(window).scroll(function() { if ($(this).scrollTop() > 300) { $('#backToTop').fadeIn(); } else { $('#backToTop').fadeOut(); } }); }); //]]> </script> <div id='backToTop' onclick='window.scrollTo({top: 0, behavior: "smooth"});' style='position: fixed; bottom: 20px; right: 20px; background: #0d6efd; color: #fff; width: 40px; height: 40px; border-radius: 50%; display: none; text-align: center; line-height: 40px; cursor: pointer; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.2);'>↑</div> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/654365252-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AAVkm1vcimGOG2b81gKK-PZ2qGCL:1778500593326';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1884567730976316944','//www.jawarablog.com/2026/05/what-is-html_0160554386.html','1884567730976316944'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '1884567730976316944', 'title': '\u0645\u062f\u0648\u0646\u0629 \u062c\u0648\u0627\u0631\u0627', 'url': 'https://www.jawarablog.com/2026/05/what-is-html_0160554386.html', 'canonicalUrl': 'https://www.jawarablog.com/2026/05/what-is-html_0160554386.html', 'homepageUrl': 'https://www.jawarablog.com/', 'searchUrl': 'https://www.jawarablog.com/search', 'canonicalHomepageUrl': 'https://www.jawarablog.com/', 'blogspotFaviconUrl': 'https://www.jawarablog.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'ar', 'localeUnderscoreDelimited': 'ar', 'languageDirection': 'rtl', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22\u0645\u062f\u0648\u0646\u0629 \u062c\u0648\u0627\u0631\u0627 - Atom\x22 href\x3d\x22https://www.jawarablog.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22\u0645\u062f\u0648\u0646\u0629 \u062c\u0648\u0627\u0631\u0627 - RSS\x22 href\x3d\x22https://www.jawarablog.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22\u0645\u062f\u0648\u0646\u0629 \u062c\u0648\u0627\u0631\u0627 - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/1884567730976316944/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22\u0645\u062f\u0648\u0646\u0629 \u062c\u0648\u0627\u0631\u0627 - Atom\x22 href\x3d\x22https://www.jawarablog.com/feeds/4650154468894802558/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-5381666393741404', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'isGoogleEverywhereLinkTooltipEnabled': true, 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/67692f944efa753a', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': '\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0631\u0627\u0628\u0637', 'key': 'link', 'shareMessage': '\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0631\u0627\u0628\u0637', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': '\u0645\u0634\u0627\u0631\u0643\u0629 \u0625\u0644\u0649 Facebook', 'target': 'facebook'}, {'name': '\u0643\u062a\u0627\u0628\u0629 \u0645\u062f\u0648\u0646\u0629 \u062d\u0648\u0644 \u0647\u0630\u0647 \u0627\u0644\u0645\u0634\u0627\u0631\u0643\u0629', 'key': 'blogThis', 'shareMessage': '\u0643\u062a\u0627\u0628\u0629 \u0645\u062f\u0648\u0646\u0629 \u062d\u0648\u0644 \u0647\u0630\u0647 \u0627\u0644\u0645\u0634\u0627\u0631\u0643\u0629', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': '\u0645\u0634\u0627\u0631\u0643\u0629 \u0625\u0644\u0649 X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': '\u0645\u0634\u0627\u0631\u0643\u0629 \u0625\u0644\u0649 Pinterest', 'target': 'pinterest'}, {'name': '\u0628\u0631\u064a\u062f \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a', 'key': 'email', 'shareMessage': '\u0628\u0631\u064a\u062f \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27ar\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '4650154468894802558', 'pageName': '\u0645\u0627 \u0647\u064a \u0644\u063a\u0629 HTML\u061f', 'pageTitle': '\u0645\u062f\u0648\u0646\u0629 \u062c\u0648\u0627\u0631\u0627: \u0645\u0627 \u0647\u064a \u0644\u063a\u0629 HTML\u061f', 'metaDescription': ''}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': '\u062a\u0639\u062f\u064a\u0644', 'linkCopiedToClipboard': '\u062a\u0645 \u0646\u0633\u062e \u0627\u0644\u0631\u0627\u0628\u0637 \u0625\u0644\u0649 \u0627\u0644\u062d\u0627\u0641\u0638\u0629', 'ok': '\u062d\u0633\u0646\u064b\u0627', 'postLink': '\u0631\u0627\u0628\u0637 \u0627\u0644\u0645\u0634\u0627\u0631\u0643\u0629'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': '\u0645\u062e\u0635\u0635', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': '\u0645\u0627 \u0647\u064a \u0644\u063a\u0629 HTML\u061f', 'description': '\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a\u060c \u0627\u0644\u062d\u0648\u0633\u0628\u0629 \u0627\u0644\u0633\u062d\u0627\u0628\u064a\u0629\u060c \u0627\u0644\u0623\u0645\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a\u060c \u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a\u060c \u0648\u0627\u0644\u0628\u0631\u0645\u062c\u0629.', 'url': 'https://www.jawarablog.com/2026/05/what-is-html_0160554386.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 4650154468894802558}}]); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3943208901-lbx__ar.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle_rtl.css'}, 'displayModeFull')); </script> </body> </html>