عناصر جديدة في اتش تي ام ال 5 يمكن ان تستخدمها

8 HTML Elements You’re Not Using (and Should Be)

In today’s web, the word semantic gets thrown around a lot. But what does semantic mean? Why is it important?

Semantic HTML expresses the meaning of the document. It’s less about how the text looks and more about what it is. Good semantic markup helps both people and machines understand the content and its context.

Semantic markup is much more accessible and easier for screen readers to interpret. It’s SEO friendly. It works better with modern browsers. It reduces the amount of code needed to express the content and increases the clarity of the code for other people that have to read it.

Okay, so semantic content is great, but how do you use it? One of the best ways to start writing better markup is to replace generic tags with more expressive elements. Let’s take a look at eight that you can use to step up your game.


Like it’s blockier cousin <blockquote>, the <q> tag is used for quoted text.

Why not just use quotation marks? Quotation marks don’t always imply a quote. Sometimes they’re used for emphasis, irony, or to identify the name of something. In those cases, using quotation marks directly in the content is perfectly valid. However, if you’re quoting someone, <q> explicitly shows your meaning.

<i> and <b>

Back in the good old days, <i> and <b> were used to identify italic and bold text. When the idea of separating semantic content from presentation started to gain traction, using <i> and <b> became frowned upon because they represented how the text was displayed, instead of what it meant. They were replaced by <em> and <strong>, which indicates emphasized and strongly emphasized text.

With HTML5, <i> and <b> now have shiny new semantic meanings. The <i> tag is used for text that is in a separate tone or mood. This is useful for things like thoughts and technical terms. The <b> tag identifies text that is stylistically different than normal text, but doesn’t have any semantically different meaning. How is this different than using <span>? The key is that <b> communicates a lack of semantic meaning.


<abbr>‘s are used for abbreviations! This can be really handy in documents with several short abbreviations. <abbr>‘s have an optional title attribute that contains the unabbreviated version of the text.

<abbr title="laugh out loud">lol</abbr>
<abbr title="I don't know">idk</abbr>
<abbr title="got to go">g2g</abbr>
<abbr title="talk to you later">ttyl</abbr>


Let’s take a look at a classic localization problem: dates. In the United States, October 5th, 2013 is represented by 10/05/13. In the United Kingdom, it’s 05/10/13. In the Netherlands, October 5th would be written 05-10-13; in South Africa it would be 2013/10/05 and in Russia it’s 05.10.13. With all of these possibilities, it’s difficult for a machine to correctly read dates in all of these locales.

The <time> tag allows you to represent time and dates in a machine-readable format. The above example could be written as <time datetime="2013-10-05">10/05/13</time>. A HTML parser can use this to determine the exact time we meant, regardless of how it is formatted. The <time> tag also allows an optional 24-hour formatted time to be appended to the date: <time datetime="2013-10-05 22:00">10/05/13 at 10 PM</time>;


Ever do something like this?

  Three hundred pages of boring, useless text. <span class="highlight">The one thing you need to know and will never be able to find again if you don't highlight it.</span> More boring stuff…

Well, now you don’t need to. HTML5 introduced the <mark> element, which represents highlighted text that is, text that’s marked for referential purposes due to its relevance in another context.


Yes, <input>. You’ve probably used <input type="text">, <input type="submit"> and maybe even <input type="hidden"> at some point, but have you used any of the other types? With HTML5, <input>‘s can now be used with a range of types, including:

  • email
  • tel
  • number
  • range
  • date
  • time
  • search
  • color

These are great, but make sure they meet your browser requirements before you use them. Some types still aren’t supported by all major browsers.


Have you ever marked up a menu with an unordered list?

<ul class="menu-toolbar">
  <li class="new">New</li>
  <li class="open">Open</li>
  <li class="save">Save</li>
  <li class="quit">Quit</li>

Well stop! menu is designed for this purpose. The <menu> element represents an unordered list of commands. It has a type attribute, which can be set to popup or toolbar.

<menu type="toolbar">
  <li class="new">New</li>
  <li class="open">Open</li>
  <li class="save">Save</li>
  <li class="quit">Quit</li>


Most front end developers have used &nbsp; when writing HTML, but many don’t know the real meaning of the character. A non-breaking space will not break on a new line. This means that if you have two words separated by a non-breaking space, then both words will stick together at the end of a sentence. This is handy when breaking the words might be disruptive. Some great examples are:

  • Units: 12 m/s
  • Time: 8 PM
  • Proper nouns: Dairy Queen

Also, be sure to check out the non-breaking hyphen (&#8209;), which lets you use a hyphen character that won’t break.

Wrapping up

HTML is growing more semantic by the day. Using these elements is a great start to writing cleaner, more accessible markup. For a more complete look at all of the available options, check out the Periodic Table of the Elements, the Mozilla Developer Network documentation or, if you’re feeling bold, the W3C’s HTML specification. Have fun!


احمد ناصر

أخوكم احمد حماد المعروف ب (أحمد ناصر) حاصل على شهادة البكالوريوس في علم الحاسوب (البرمجة وهندسة البرمجيات) من جامعة بيرزيت ومبرمج ومطور انظمة مرخص من شركة سيلز فورس كلاود العالمية، يعمل في مجال برمجة وتسويق التطبيقات والالعاب منذ اكثر من 5 سنوات وقام بنشر وتصميم وبرمجة العديد من الالعاب لمنصات الاندرويد والايفون والفيس بوك واليونتي ولديه اكثر من 20 لعبة مرفوعة على المتاجر المذكورة. يعمل حاليا كمستشار تقني في عدة شركات كشركة انترجوي، وريتش وشركتنا الخاصة أحمد ناصر للحلول الشاملة ويقوم بتقديم خدماته التدريبية في عدد من المعاهد في الشرق الاوسط ويختص في تطوير الكادر التقني العربي في مجالات الويب والموبايل والالعاب والتسويق الالكتروني، سجل معه في دوراته باللغة الانجليزية والعربية اكثر من 10000 طالب وحصل على تقييم من 4.8 الى 5 نجوم في مختلف الدورات في تصميم وبرمجة الالعاب التي يمكنك مشاهدتها على موقعنا، يسرنا ان ننقل خبرة السنوات اليكم في ساعات قليلة وفي غضون بضعة اسابيع ستملك جميع الخبرة اللازمة لتكون مطور العاب و تطبيقات محترف ومستقل وأكثر. قبل 12 سنة تقريبا بدأت باستخدام برنامج الفوتوشوب وأحسست ان لي ميولا كبيرا نحو عالم التصميم فتعلمت الفلاش وبرامج الملتميديا وكان لي برامج تعليمية ومسابقات قمت بتصميمها لمختلف النوادي والجمعيات وبعض المؤسسات حيث انني عملت في مجال التصميم والطباعة لفترة جيدة في حياتي كمصمم، بعدها انتقلت الى تعلم البرمجة بداية من لغة السي والفيجوال بيسك مرورا بتعلم اكثر من 18 لغة برمجة مختلفة شكلت لي كمهووس بالبرمجة قدرة كبيرة على الربط بين جميع هذه اللغات لعمل بعض البرامج المختلفة البنية. عملت لعدة سنوات مصمم ومبرمج لبرامج وتطبيقات الويب لعدد من وكالات الاخبار والمواقع التجارية الالكترونية في الشرق الاوسط وأمريكا، بعدها قررت الانتقال الى برمجة تطبيقات الاندرويد والايفون وعملت عدة تطبيقات كبيرة لزبائن في الامارات والمملكة المتحدة وأمريكا. قررت بعدها الانتقال الى مجال برمجة الالعاب وخصوصا اليونتي لانه كان لي ميول كبير في ربط كل الخبرات السابقة الى مجال اكثر من رائع وهو مجال الالعاب الالكترونية لاجهزة الموبايل والذي حقق مبيعات اكثر من 13 مليار دولار في 2014 وحدها، قمت خلال اكثر من ثلاث سنوات من العمل على منصة اليونتي بتطوير اكثر من 20 لعبة لمختلف الزبائن حول العالم وقمت بتصميم العاب والعمل على تسويقها بنفس الوقت الامر الذي اكسبني خبرة كبيرة في مجال بيع الالعاب وتسويقها بالاضافة الى برمجتها وتصميمها. وجدت ان هناك صعوبة لدى فئة كبيرة في تعلم البرمجة لذلك قررت البدء بتعليم وتدريس البرمجة عن طريق الالعاب لعدد كبير من الطلاب ليستفيدوا ويحققوا نجاحهم واستقلاليتهم ولنقل تجربتي الشخصية لهم فقررت البدء بتدريس البرمجة واضعا هدفا واضحا نصب عيني وهو: تعلم البرمجة والتصميم لا ينبغي ان يكون صعبا، مقلقا او معقدا لسوء الحظ، العديد من الكورسات التعليمية تمشي مع الطالب بسرعة كبيرة، يفترضون ان الطالب يكون لديه الخبرة التقنية المتقدمة او لا يقدمون اية مهارات عملية.

مقالات ذات صلة

زر الذهاب إلى الأعلى
الدعم الفني
تحتاج مساعدة تواصل معي واتساب
السلة Item Removed. Undo
  • No products in the cart.