Nahid - Front-end Developer

1. HTML কি?

HTML (HyperText Markup Language) হলো ওয়েব পেজ তৈরি করার জন্য ব্যবহৃত একটি মার্কআপ ভাষা।

2. DOCTYPE ডিক্লারেশন কি?

DOCTYPE ডিক্লারেশন একটি HTML ডকুমেন্টের টাইপ নির্ধারণ করে এবং ব্রাউজারকে ডকুমেন্টের রেন্ডারিং মোড নির্ধারণ করতে সাহায্য করে। উদাহরণ:

  <!DOCTYPE html>

3. HTML এর বিভিন্ন সংস্করণ কি কি?

HTML এর বিভিন্ন সংস্করণ হলো HTML 1.0, HTML 2.0, HTML 3.2, HTML 4.01, এবং HTML5।

4. HTML এর একটি মৌলিক স্ট্রাকচার কেমন হয়?

HTML এর মৌলিক স্ট্রাকচার:

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
    
    </body>
  </html>

5. সেম্যান্টিক HTML কি? উদাহরণ দিন।

সেম্যান্টিক HTML হলো এমন HTML এলিমেন্ট যা তার কন্টেন্ট সম্পর্কে স্পষ্ট ধারণা দেয়। উদাহরণ:

  <header></header>
  <nav></nav>
  <main></main>
  <footer></footer>

6. HTML এ একটি ইমেজ কিভাবে যোগ করবেন?

একটি ইমেজ যোগ করতে <img > ট্যাগ ব্যবহার করা হয়। উদাহরণ:

  <img src="image.jpg" alt="Description of the image">

7. HTML এ একটি লিংক কিভাবে তৈরি করবেন?

একটি লিংক তৈরি করতে <a> ট্যাগ ব্যবহার করা হয়। উদাহরণ:

  <a href="https://www.example.com">Visit Example</a>

8. HTML এ টেবিল কিভাবে তৈরি করবেন?

HTML এ টেবিল তৈরি করতে নিচের ট্যাগগুলো ব্যবহার করা হয়: <table>, <tr>, <td>, <th>। উদাহরণ:

  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </table>

9. HTML এ ফর্ম কিভাবে তৈরি করবেন?

HTML এ ফর্ম তৈরি করতে <form> ট্যাগ ব্যবহার করা হয়। উদাহরণ:

  <form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
  </form>

10. HTML এ বিভিন্ন ধরনের ইনপুট ফিল্ড কি কি আছে?

HTML এ বিভিন্ন ধরনের ইনপুট ফিল্ড হলো: text, password, email, number, radio, checkbox, file, submit।

11. HTML এর meta ট্যাগ কি কাজ করে?

meta ট্যাগ HTML ডকুমেন্টের মেটাডাটা নির্ধারণ করে, যেমন: চরিত্র সেট, পেজের ডিস্ক্রিপশন, কীওয়ার্ডস ইত্যাদি। উদাহরণ:

  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">

12. HTML5 এর নতুন ফিচার কি কি?

HTML5 এর নতুন ফিচার হলো: সেম্যান্টিক ট্যাগস, অডিও এবং ভিডিও ট্যাগ, ক্যানভাস ট্যাগ, SVG সমর্থন, লোকাল স্টোরেজ, ওয়েব ওয়ার্কার্স ইত্যাদি।

13. HTML এর iframe ট্যাগ কি এবং এর ব্যবহার কি?

iframe ট্যাগ ব্যবহার করে একটি ওয়েব পেজের মধ্যে অন্য একটি ওয়েব পেজ এম্বেড করা হয়। উদাহরণ:

  <iframe src="https://www.example.com" width="300" height="200"></iframe>

14. HTML এ কমেন্ট কিভাবে যোগ করবেন??

HTML এ কমেন্ট যোগ করতে

<!-- -->

ব্যবহার করা হয়। উদাহরণ:

  <!-- This is a comment -->

15. HTML এ Inline এবং Block এলিমেন্টের মধ্যে পার্থক্য কি?

Inline এলিমেন্ট: শুধুমাত্র প্রয়োজনীয় পরিমাণ স্থান নেয় এবং একই লাইনে থাকে। যেমন: <span>, <a>, <img>।

Block এলিমেন্ট: পুরো লাইনের স্থান নেয় এবং নতুন লাইনে শুরু হয়। যেমন: <div>, <p>, <h1>।

16. HTML এর canvas ট্যাগ কি?

canvas ট্যাগ ব্যবহার করে গ্রাফিক্স এঁকানো হয়, যেমন: চার্ট, ড্রয়িং ইত্যাদি। উদাহরণ:

  <canvas id="myCanvas" width="200" height="100"></canvas>
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
  </script>

17. HTML এ কীভাবে একটি ভিডিও এম্বেড করবেন?

HTML এ ভিডিও এম্বেড করতে <video> ট্যাগ ব্যবহার করা হয়। উদাহরণ:

  <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

18. HTML এর progress ট্যাগ কি কাজ করে?

progress ট্যাগ ব্যবহার করে একটি টাস্কের সম্পূর্ণতার অগ্রগতি প্রদর্শন করা হয়। উদাহরণ:

  <progress value="70" max="100"></progress>

19. HTML এর figure এবং figcaption ট্যাগ কি কাজ করে?

figure ট্যাগ ব্যবহার করে একটি চিত্র বা ডায়াগ্রামের গ্রুপিং করা হয় এবং figcaption ট্যাগ ব্যবহার করে এর ক্যাপশন প্রদান করা হয়। উদাহরণ:

  <figure>
    <img src="image.jpg" alt="Description">
    <figcaption>This is a caption for the image.</figcaption>
  </figure>

20. HTML5 এর Geolocation API কি?

Geolocation API একটি API যা ব্যবহারকারীর বর্তমান ভৌগোলিক অবস্থান নির্ধারণ করতে ব্যবহৃত হয়। উদাহরণ:

  <script>
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      alert("Geolocation is not supported by this browser.");
    }
  
    function showPosition(position) {
      alert("Latitude: " + position.coords.latitude + 
            " Longitude: " + position.coords.longitude);
    }
  </script>

21. HTML এর Global Attributes কি কি?

HTML এর Global Attributes হলো এমন অ্যাট্রিবিউট যা সব HTML এলিমেন্টের জন্য প্রযোজ্য। কিছু সাধারণ Global Attributes হলো: class, id, style, title, lang, data-* ইত্যাদি।

**22. HTML এর data-* অ্যাট্রিবিউট কি?**

data-* অ্যাট্রিবিউট ব্যবহার করে কাস্টম ডেটা অ্যাট্রিবিউট তৈরি করা যায় যা JavaScript এর মাধ্যমে অ্যাক্সেস করা যায়। উদাহরণ:

  <div data-user-id="12345">User Information</div>
  <script>
    var userId = document.querySelector('div').getAttribute('data-user-id');
    console.log(userId); // 12345
  </script>

23. HTML এ ইনলাইন স্টাইল এবং এক্সটারনাল স্টাইলশীট এর মধ্যে পার্থক্য কী?

ইনলাইন স্টাইল HTML এলিমেন্টের style অ্যাট্রিবিউটের মাধ্যমে নির্ধারণ করা হয়। উদাহরণ:

  <p style="color: red;">This is a red paragraph.</p>

এক্সটারনাল স্টাইলশীট একটি আলাদা CSS ফাইলের মাধ্যমে নির্ধারণ করা হয় এবং HTML ডকুমেন্টে <link> ট্যাগের মাধ্যমে সংযুক্ত করা হয়। উদাহরণ:

  <link rel="stylesheet" href="styles.css">

24. HTML এর link ট্যাগ কি কাজ করে?

link ট্যাগ একটি এক্সটারনাল রিসোর্সের সাথে HTML ডকুমেন্টকে সংযুক্ত করে, সাধারণত CSS স্টাইলশীটের জন্য। উদাহরণ:

  <link rel="stylesheet" href="styles.css">

25. HTML এর nav ট্যাগ কি?

nav ট্যাগ ব্যবহার করে একটি ন্যাভিগেশন লিংকসের সেট তৈরি করা হয়। উদাহরণ:

  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

26. HTML এর aside ট্যাগ কি?

aside ট্যাগ ব্যবহার করে কন্টেন্টের বাইরে থাকা পার্শ্ববর্তী তথ্য প্রদর্শন করা হয়। উদাহরণ:

  <aside>
    <h2>Related Articles</h2>
    <ul>
      <li><a href="#">Article 1</a></li>
      <li><a href="#">Article 2</a></li>
    </ul>
  </aside>

27. HTML এর section ট্যাগ কি?

section ট্যাগ ব্যবহার করে ডকুমেন্টের একটি ভাগ বা সেকশন নির্ধারণ করা হয়। উদাহরণ:

  <section>
    <h1>Section Title</h1>
    <p>This is a section of the document.</p>
  </section>

28. HTML এর article ট্যাগ কি?

article ট্যাগ ব্যবহার করে একটি স্বতন্ত্র কন্টেন্ট ব্লক নির্ধারণ করা হয়, যেমন: ব্লগ পোস্ট, নিউজ আর্টিকেল ইত্যাদি। উদাহরণ:

  <article>
    <h1>Article Title</h1>
    <p>This is an article.</p>
  </article>

29. HTML এর header এবং footer ট্যাগ কি?

header ট্যাগ ডকুমেন্টের শিরোনাম বা ভূমিকা নির্ধারণ করে, এবং footer ট্যাগ ডকুমেন্টের ফুটার বা নিম্নলিখিত তথ্য নির্ধারণ করে। উদাহরণ:

  <header>
    <h1>Welcome to My Website</h1>
  </header>
  <footer>
    <p>&copy; 2024 My Website</p>
  </footer>

30. HTML এর mark ট্যাগ কি?

mark ট্যাগ ব্যবহার করে টেক্সটকে হাইলাইট করা হয়। উদাহরণ:

  <p>This is a <mark>highlighted</mark> text.</p>

31. HTML এর abbr ট্যাগ কি?

abbr ট্যাগ ব্যবহার করে একটি সংক্ষিপ্ত রূপ বা অ্যাব্রিভিয়েশন নির্ধারণ করা হয়। উদাহরণ:

  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

32. HTML এর blockquote ট্যাগ কি?

blockquote ট্যাগ ব্যবহার করে একটি ব্লক স্তরের উক্তি নির্ধারণ করা হয়। উদাহরণ:

  <blockquote cite="https://www.example.com">
    This is a blockquote from an external source.
  </blockquote>

33. HTML এর code ট্যাগ কি?

code ট্যাগ ব্যবহার করে কম্পিউটার কোড নির্ধারণ করা হয়। উদাহরণ:

  <p>Use the <code>&lt;html&gt;</code> tag to create an HTML document.</p>

34. HTML এর pre ট্যাগ কি?

pre ট্যাগ ব্যবহার করে প্রি-ফরম্যাটেড টেক্সট নির্ধারণ করা হয়। উদাহরণ:

<pre>
  Line 1
  Line 2
  Line 3
</pre>

35. HTML এর dl ট্যাগ কি?

dl ট্যাগ ব্যবহার করে একটি সংজ্ঞা তালিকা তৈরি করা হয়, যেখানে dt ট্যাগ ব্যবহার করে সংজ্ঞা টার্ম এবং dd ট্যাগ ব্যবহার করে সংজ্ঞা নির্ধারণ করা হয়। উদাহরণ:

  <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
  </dl>

36. HTML এর sup এবং sub ট্যাগ কি?

sup ট্যাগ ব্যবহার করে সুপারস্ক্রিপ্ট টেক্সট এবং sub ট্যাগ ব্যবহার করে সাবস্ক্রিপ্ট টেক্সট নির্ধারণ করা হয়। উদাহরণ:

  <p>This is a <sup>superscript</sup> text.</p>
  <p>This is a <sub>subscript</sub> text.</p>

37. HTML এর br ট্যাগ কি?

br ট্যাগ ব্যবহার করে একটি লাইনে ব্রেক নির্ধারণ করা হয়। উদাহরণ:

  <p>This is line 1.<br>This is line 2.</p>

38. HTML এর hr ট্যাগ কি?

hr ট্যাগ ব্যবহার করে একটি থিম্যাটিক ব্রেক বা অনুভূমিক লাইন নির্ধারণ করা হয়। উদাহরণ:

  <hr>

39. HTML এর small ট্যাগ কি?

small ট্যাগ ব্যবহার করে ছোট আকারের টেক্সট নির্ধারণ করা হয়। উদাহরণ:

  <p>This is <small>smaller</small> text.</p>

40. HTML-এর <fieldset> এবং <legend> ট্যাগের ব্যবহার কি?

HTML-এর <fieldset> এবং <legend> ট্যাগ ব্যবহার করা হয় একটি ফর্ম গ্রুপ এলিমেন্ট তৈরি করতে যাতে ব্যবহারকারী সহজে ফর্মের সেগমেন্ট বোঝতে পারেন।

  <form>
    <fieldset>
      <legend>ব্যক্তিগত তথ্য</legend>
      <label for="name">নাম:</label>
      <input type="text" id="name" name="name"><br><br>
      <label for="email">ইমেইল:</label>
      <input type="email" id="email" name="email"><br><br>
      <label for="age">বয়স:</label>
      <input type="number" id="age" name="age"><br><br>
    </fieldset>
  </form>

HTML Interview Questions and Answers