مواد مارکیٹنگ

HTML10 میں متعارف کرائے گئے 5 طریقے جو ڈرامائی طور پر صارف کے تجربے کو بہتر بناتے ہیں

ہم مدد کر رہے ہیں a ساس نامیاتی تلاش کے لیے اپنے پلیٹ فارم کو بہتر بنانے والی کمپنی (SEO)… اور جب ہم نے ان کے آؤٹ پٹ ٹیمپلیٹس کے لیے کوڈ کا جائزہ لیا، تو ہم نے فوری طور پر دیکھا کہ انھوں نے اپنے صفحہ کے آؤٹ پٹس کے لیے کبھی بھی HTML5 طریقوں کو شامل نہیں کیا۔

HTML5 صارف کے تجربے کے لیے ایک اہم چھلانگ تھی۔UXویب ڈویلپمنٹ میں۔ اس نے کئی نئے طریقے اور ٹیگ متعارف کروائے جنہوں نے ویب پیجز کی صلاحیتوں کو بڑھایا۔ یہاں دس کلیدی HTML5 طریقوں اور وضاحتوں اور کوڈ کے نمونوں کے ساتھ ٹیگز کی فہرست ہے۔

  • سیمنٹک عناصر: HTML5 نے معنوی عناصر متعارف کرائے ہیں جو ویب مواد کو زیادہ معنی خیز ڈھانچہ فراہم کرتے ہیں، رسائی کو بہتر بناتے ہیں اور SEO.
<header>
  <h1>Website Title</h1>
</header>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<article>
  <h2>Article Title</h2>
  <p>Article content goes here...</p>
</article>
<footer>
  <p>&copy; 2023 WebsiteName</p>
</footer>
  • ویڈیو اور آڈیو: HTML5 متعارف کرایا <video> اور <audio> عناصر، تھرڈ پارٹی پلگ انز پر انحصار کیے بغیر ملٹی میڈیا مواد کو سرایت کرنا آسان بناتا ہے۔
<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
  • کینوس: <canvas> عنصر جاوا اسکرپٹ کے ذریعے متحرک گرافکس اور اینیمیشن کی اجازت دیتا ہے، انٹرایکٹو خصوصیات کو بڑھاتا ہے۔
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const context = canvas.getContext('2d');
  // Draw shapes and animations here using JavaScript.
</script>
    • فارم میں اضافہ: HTML5 نے نئی ان پٹ اقسام شامل کیں (مثال کے طور پر، ای میل، URL) اور صفات (مثال کے طور پر، required, pattern) بہتر فارم کی توثیق اور صارف کے تجربے کے لیے۔
    <form>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
      <input type="submit" value="Submit">
    </form>
    • جغرافیائی محل وقوع: HTML5 ویب سائٹس کو صارف کے جغرافیائی محل وقوع تک رسائی کے قابل بناتا ہے، مقام پر مبنی خدمات کے امکانات کو کھولتا ہے۔
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition(function(position) {
        const latitude = position.coords.latitude;
        const longitude = position.coords.longitude;
        // Use latitude and longitude data here.
      });
    }
    • مقامی ذخیرہ: HTML5 متعارف کرایا localStorage کلائنٹ سائیڈ اسٹوریج کے لیے، ویب سائٹس کو کوکیز پر انحصار کیے بغیر مقامی طور پر ڈیٹا اسٹور کرنے کے قابل بنانا۔
    // Storing data in local storage
    localStorage.setItem('username', 'JohnDoe');
    // Retrieving data from local storage
    const username = localStorage.getItem('username');
    • ویب اسٹوریج: ساتھ ساتھ localStorage، HTML5 متعارف کرایا sessionStorage سیشن کے مخصوص ڈیٹا کو ذخیرہ کرنے کے لیے، جو سیشن ختم ہونے پر صاف ہو جاتا ہے۔
    // Storing session-specific data
    sessionStorage.setItem('theme', 'dark');
    // Retrieving session-specific data
    const theme = sessionStorage.getItem('theme');
    • گھسیٹیں اور چھوڑیں
      : HTML5 ڈریگ اینڈ ڈراپ تعاملات کے لیے مقامی مدد فراہم کرتا ہے، جس سے بدیہی انٹرفیس کو لاگو کرنا آسان ہو جاتا ہے۔
    <div id="dragTarget" draggable="true">Drag me!</div>
    <div id="dropTarget">Drop here!</div>
    <script>
      const dragTarget = document.getElementById('dragTarget');
      const dropTarget = document.getElementById('dropTarget');
    
      dragTarget.addEventListener('dragstart', function(event) {
        event.dataTransfer.setData('text', 'Dragged item');
      });
    
      dropTarget.addEventListener('dragover', function(event) {
        event.preventDefault();
      });
    
      dropTarget.addEventListener('drop', function(event) {
        event.preventDefault();
        const data = event.dataTransfer.getData('text');
        // Handle the dropped item here.
      });
    </script>
    • قبول تصاویر: HTML5 متعارف کرایا <picture> عنصر اور srcset اسکرین کے سائز اور ریزولوشن کی بنیاد پر مناسب تصاویر فراہم کرنے کے لیے خصوصیت۔
    <picture>
      <source srcset="image-large.jpg" media="(min-width: 1200px)">
      <source srcset="image-medium.jpg" media="(min-width: 768px)">
      <img src="image-small.jpg" alt="Responsive Image">
    </picture>
    • تفصیلات اور خلاصہ: <details> اور <summary> عناصر آپ کو مواد کے قابل توسیع حصے بنانے کی اجازت دیتے ہیں، دستاویز کی تنظیم کو بڑھاتے ہیں۔
    <details>
      <summary>Click to expand</summary>
      <p>Additional content goes here...</p>
    </details>

    ان اضافی HTML5 خصوصیات نے ویب ڈویلپمنٹ کی صلاحیتوں کو مزید بہتر کیا، ڈویلپرز کو مزید انٹرایکٹو اور صارف دوست ویب سائٹس بنانے کے لیے ٹولز فراہم کرتے ہیں۔

    Douglas Karr

    Douglas Karr کا سی ایم او ہے۔ OpenINSIGHTS اور کے بانی Martech Zone. Douglas نے درجنوں کامیاب MarTech اسٹارٹ اپس کی مدد کی ہے، Martech کے حصول اور سرمایہ کاری میں $5 بلین سے زیادہ کی مستعدی میں مدد کی ہے، اور کمپنیوں کو ان کی سیلز اور مارکیٹنگ کی حکمت عملیوں کو نافذ کرنے اور خودکار کرنے میں مدد کرنا جاری رکھے ہوئے ہے۔ ڈگلس ایک بین الاقوامی سطح پر تسلیم شدہ ڈیجیٹل تبدیلی اور MarTech ماہر اور اسپیکر ہے۔ ڈگلس ڈمی کی گائیڈ اور بزنس لیڈر شپ کی کتاب کے شائع شدہ مصنف بھی ہیں۔

    متعلقہ مضامین

    واپس اوپر بٹن
    کلوز

    ایڈ بلاک کا پتہ چلا

    Martech Zone آپ کو یہ مواد بغیر کسی قیمت کے فراہم کرنے کے قابل ہے کیونکہ ہم اپنی سائٹ کو اشتھاراتی آمدنی، ملحقہ لنکس اور اسپانسرشپ کے ذریعے منیٹائز کرتے ہیں۔ اگر آپ ہماری سائٹ کو دیکھتے ہی اپنے ایڈ بلاکر کو ہٹا دیں تو ہم اس کی تعریف کریں گے۔