HTML Notes with Example Code
HTML Elements and Their Uses
1. <!DOCTYPE html> (Defines the Document Type)
● Declares that the document is an HTML5 page.
<!DOCTYPE html>
2. <html lang="en"> (Root Element)
● The <html> tag wraps all the content on the webpage.
● The lang="en" attribute specifies that the page is in English.
<html lang="en">
3. <head> (Metadata & Page Information)
● Contains metadata and other non-visible elements.
3.1 <meta charset="UTF-8">
● Defines character encoding to support special characters.
<meta charset="UTF-8">
3.2 <meta name="viewport" content="width=device-width, initial-
scale=1.0">
● Makes the webpage responsive on different screen sizes.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3.3 <title>
● Defines the title shown in the browser tab.
<title>Programming Concepts</title>
4. <body> (Main Content)
● Contains all the visible elements of the webpage.
<body>
5. <header> (Header Section)
● Represents introductory content or navigational links.
<header>
<h1>Understanding Programming Concepts</h1>
<p>Learn about different programming concepts and their usage.</p>
</header>
6. <section> (Content Section)
● Groups related content together.
6.1 Unordered List (<ul>)
● Displays a list of key programming languages.
<section>
<h2>Key Programming Languages</h2>
<ul>
<li>Python</li>
<li>JavaScript</li>
<li>C++</li>
<li>Ruby</li>
<li>Java</li>
</ul>
</section>
6.2 Ordered List (<ol>)
● Displays popular programming paradigms in order.
<section>
<h2>Popular Programming Paradigms</h2>
<ol>
<li>Object-Oriented Programming</li>
<li>Functional Programming</li>
<li>Procedural Programming</li>
<li>Logic Programming</li>
</ol>
</section>
7. <a href=""> (Anchor/Hyperlink)
● Creates a link to another webpage.
<ul>
<li><a href="[Link] target="_blank">W3Schools</a></li>
<li><a href="[Link] target="_blank">MDN Web Docs</a></li>
<li><a href="[Link] target="_blank">GeeksforGeeks</a></li>
</ul>
8. <table> (Table Structure)
● Defines a table to display structured data.
<table border="1">
<tr>
<th>Language</th>
<th>Code Snippets</th>
</tr>
<tr>
<td>JavaScript</td>
<td><code>[Link]("Hello World!");</code></td>
</tr>
<tr>
<td>Python</td>
<td><code>print("Hello World!")</code></td>
</tr>
<tr>
<td>Java</td>
<td><code>[Link]("Hello, World!");</code></td>
</tr>
</table>
9. <img> (Image)
● Displays an image.
<img src="[Link]
[Link]" alt="Programming Flowchart">
10. <footer> (Footer Section)
● Represents the bottom section of the webpage.
<footer>
<p>Learn more about programming at <a href="[Link]
target="_blank">Codecademy</a></p>
</footer>
Full Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Programming Concepts</title>
</head>
<body>
<header>
<h1>Understanding Programming Concepts</h1>
<p>Learn about different programming concepts and their
usage.</p>
</header>
<section>
<h2>Key Programming Languages</h2>
<ul>
<li>Python</li>
<li>JavaScript</li>
<li>C++</li>
<li>Ruby</li>
<li>Java</li>
</ul>
</section>
<section>
<h2>Popular Programming Paradigms</h2>
<ol>
<li>Object-Oriented Programming</li>
<li>Functional Programming</li>
<li>Procedural Programming</li>
<li>Logic Programming</li>
</ol>
</section>
<section>
<h2>Useful Resources</h2>
<ul>
<li><a href="[Link]
target="_blank">W3Schools</a></li>
<li><a href="[Link]
target="_blank">MDN Web Docs</a></li>
<li><a href="[Link]
target="_blank">GeeksforGeeks</a></li>
</ul>
</section>
<section>
<h2>Example Table: Code Snippets</h2>
<table border="1">
<tr>
<th>Language</th>
<th>Code Snippets</th>
</tr>
<tr>
<td>JavaScript</td>
<td><code>[Link]("Hello World!");</code></td>
</tr>
<tr>
<td>Python</td>
<td><code>print("Hello World!")</code></td>
</tr>
<tr>
<td>Java</td>
<td><code>[Link]("Hello,
World!");</code></td>
</tr>
</table>
</section>
<section>
<h2>Programming Diagram</h2>
<img
src="[Link]
[Link]" alt="Programming Flowchart">
</section>
<footer>
<p>Learn more about programming at <a
href="[Link] target="_blank">Codecademy</a></p>
</footer>
</body>
</html>
