Loopcode/11html.html at main · Dharmandra-singh/Loopcode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-D0ENCWPZL9"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-D0ENCWPZL9');
</script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>11. Semantic Elements in HTML</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Segoe UI', sans-serif;
      background: #1cc9be;
      padding: 30px;
    }
    .container {
      background: rgba(255,255,255,0.3);
      padding: 25px;
      border-radius: 15px;
      max-width: 1000px;
      margin: auto;
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }
    h2, h3 {
      color: #180;
      margin-bottom: 15px;
    }
    p {
      font-size: 17px;
      margin-bottom: 12px;
      line-height: 1.5;
    }
    ul {
      margin: 10px 0 20px 20px;
    }
    textarea, iframe {
      width: 100%;
      height: 200px;
      font-size: 16px;
      padding: 10px;
      margin: 10px 0 20px;
      border-radius: 10px;
      border: 2px solid white;
      background: rgba(255,248,240,0.4);
      font-family: monospace;
    }
    button {
      background: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      font-size: 15px;
      font-weight: 500;
      border-radius: 8px;
      cursor: pointer;
      margin-bottom: 25px;
      transition: all 0.3s ease-in-out;
      position: relative;
      overflow: hidden;
    }
    button:hover {
      box-shadow: 0 5px 12px rgba(0,0,0,0.2);
      transform: translateY(-2px);
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>11. Semantic Elements in HTML</h2>

    <!-- Importance of Semantics -->
    <h3>I. Importance of Semantic Elements</h3>
    <p>Semantic elements HTML mein aise tags hote hain jo content ke meaning ko define karte hain. Yeh web pages ko:</p>
    <ul>
      <li><strong>More accessible</strong> banate hain for screen readers</li>
      <li><strong>Search engines</strong> ko content samajhne mein madad karte hain</li>
      <li><strong>Code ko readable aur maintainable</strong> banate hain</li>
    </ul>

    <!-- Common Semantic Tags -->
    <h3>II. Common Semantic Tags</h3>
    <ul>
      <li><strong>&lt;header&gt;</strong> – Page ya section ka introductory content</li>
      <li><strong>&lt;nav&gt;</strong> – Navigation links ke liye</li>
      <li><strong>&lt;main&gt;</strong> – Page ka primary content</li>
      <li><strong>&lt;section&gt;</strong> – Page ke different sections</li>
      <li><strong>&lt;article&gt;</strong> – Independent content block (e.g., blog post)</li>
      <li><strong>&lt;aside&gt;</strong> – Side content (ads, related links)</li>
      <li><strong>&lt;footer&gt;</strong> – Bottom area (author info, links, copyright)</li>
    </ul>

    <textarea id="code1">
<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>My Blog</h1>
    </header>

    <nav>
      <a href="#home">Home</a> |
      <a href="#posts">Posts</a>
    </nav>

    <main>
      <section>
        <article>
          <h2>First Blog Post</h2>
          <p>This is an article inside a section.</p>
        </article>
      </section>
      <aside>
        <p>Related Links or Ads here</p>
      </aside>
    </main>

    <footer>
      <p>&copy; 2025 by Dharmandra</p>
    </footer>
  </body>
</html>
    </textarea>
    <button onclick="runCode('code1', 'output1')">Run Code</button>
    <iframe id="output1"></iframe>
  </div>

  <script>
    function runCode(textareaId, iframeId) {
      const code = document.getElementById(textareaId).value;
      const iframe = document.getElementById(iframeId);
      const doc = iframe.contentDocument || iframe.contentWindow.document;
      doc.open();
      doc.write(code);
      doc.close();
    }
  </script>
</body>
</html>