?????, ????? ??? ???! ? ? ?? ???? ???? ?? ? ??? ???? HTML? ????? ?? ?????. ??? ???? ?? ?? ?? ???? HTML ??? ??? ??? ?????. ??????! ?

1. ??? HTML ??? ??????

???? ??? ??????? ??? ???? ?????. ??? ? ?? ?? ??? SEO? ??????. ?

?:

<!-- Semantic -->
<header>
  <h1>Welcome to My Blog</h1>
</header>
<article>
  <h2>How to Code</h2>
  <p>Start by learning the basics...</p>
</article>

<!-- Non-semantic -->
<div>



<p><strong>Why it matters:</strong> Semantic tags improve accessibility and help search engines understand your content better.</p>


<hr>

<h3>
  
  
  2. <strong>What is the difference between id and class attributes?</strong>
</h3>

<ul>
<li>
id: Unique identifier, used once per page.</li>
<li>
class: Can be reused multiple times for styling or grouping elements.</li>
</ul>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><!-- Using id -->
<div>



<p><strong>Pro Tip:</strong> Use id for unique elements like headers or footers, and class for reusable components.</p>


<hr>

<h3>
  
  
  3. <strong>What are void elements in HTML?</strong>
</h3>

<p>Void elements are self-closing and don’t have a closing tag.</p>

<p><strong>Examples:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><img src="image.jpg" alt="A beautiful view">
<input type="text" placeholder="Enter your name">
<hr>

???? ??: ?? ??? ?? ??? ???? ?? ??? HTML???!

4. HTML ??? JavaScript? ??? ??????

??????? ???? ???? ? ??? ????.

1) ???:

   <button onclick="alert('Hello!')">Click Me</button>

2) ??:

   <script>
     console.log('Hello from internal script!');
   </script>

3) ??:

   <script src="script.js"></script>

?? ?: ??? ? ? ????? ?? ????? ?????. ??

5. ????? alt ??? ??? ??????

alt ??? ???? ???? ?? ? ?? ??? ??? ?? ?? ???? ?????.

?:

<img src="logo.png" alt="Company Logo">

??? ??: ???? ??? SEO ??? ????.

6. HTML? ???, ??, ??? ?? ??? ???? ??????

• ???: ? ??? ???? ?? ??? ??? ??? ?????.
• ??: ? ??? ???? ?? ??? ?? ??? ?????.
• ??? ??: ??? ???? ????? ??? ??? ??? ? ????.

?:

<!-- Inline -->
<span>This is inline</span>
<span>Another inline</span>

<!-- Block -->
<div>This is block</div>
<div>Another block</div>

<!-- Inline-block -->
<div>



<p><strong>Pro Tip:</strong> Use inline-block for layouts where you need elements side-by-side with specific dimensions.</p>


<hr>

<h3>
  
  
  7. <strong>What are data attributes in HTML?</strong>
</h3>

<p>Custom attributes to store extra data without cluttering your DOM.</p>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><button data-user-id="123" onclick="handleClick(this)">Click Me</button>
<script>
  function handleClick(button) {
    alert(`User ID: ${button.dataset.userId}`);
  }
</script>

??? ??: ???? ?? JavaScript? ???? ???? ? ?????.

8. HTML ??? ?? ???? ??? ??? ?? ????

• ??? ?? ??? ?????.
• ? ?? ??? ?? ??? ?? aria-* ??? ?????.

?:

<button aria-label="Submit Form">Submit</button>

?? ?: ?? ???? ?? ??? ??? ????? ??????. ?

9. ? ???? ?????? ? ???

• : ??? ?? ???(?: CSS) ?? ??? ?????.
• : ?????? ?????.

<!-- Semantic -->
<header>
  <h1>Welcome to My Blog</h1>
</header>
<article>
  <h2>How to Code</h2>
  <p>Start by learning the basics...</p>
</article>

<!-- Non-semantic -->
<div>



<p><strong>Why it matters:</strong> Semantic tags improve accessibility and help search engines understand your content better.</p>


<hr>

<h3>
  
  
  2. <strong>What is the difference between id and class attributes?</strong>
</h3>

<ul>
<li>
id: Unique identifier, used once per page.</li>
<li>
class: Can be reused multiple times for styling or grouping elements.</li>
</ul>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><!-- Using id -->
<div>



<p><strong>Pro Tip:</strong> Use id for unique elements like headers or footers, and class for reusable components.</p>


<hr>

<h3>
  
  
  3. <strong>What are void elements in HTML?</strong>
</h3>

<p>Void elements are self-closing and don’t have a closing tag.</p>

<p><strong>Examples:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><img src="image.jpg" alt="A beautiful view">
<input type="text" placeholder="Enter your name">
<hr>

   <button onclick="alert('Hello!')">Click Me</button>