Introduction to HTML and basic HTML Tags by Faisal
Introduction to HTML
HTML, or HyperText Markup Language, is the foundational language used to create and structure content on the web. It defines the elements of a webpage—such as headings, paragraphs, images, links, and lists—by using tags that browsers can interpret and display. HTML is not a programming language; instead, it's a markup language that gives web content its structure and meaning. Whether you're building a simple webpage or a complex web application, understanding HTML is the first step toward becoming a web developer.
Here are the following HTML elements with syntax and descriptions:
HTML Tags Reference Table
| Tag | Syntax | Description |
|---|---|---|
| <!DOCTYPE> | <!DOCTYPE html> | Declares the document type and version of HTML |
| <html> | <html>...</html> | Root element of an HTML page |
| <head> | <head>...</head> | Container for meta-information, links, and scripts |
| <title> | <title>Page Title</title> | Sets the page title shown in the browser tab |
| <meta> | <meta charset="UTF-8"> | Defines metadata like character encoding |
| <link> | <link rel="stylesheet" href="style.css"> | Links to external CSS files |
| <style> | <style>...</style> | Embeds internal CSS styles |
| <script> | <script>...</script> | Embeds JavaScript code |
| <body> | <body>...</body> | Contains the content of the document |
| <header> | <header>...</header> | Defines header section of a document |
| <nav> | <nav>...</nav> | Contains navigation links |
| <main> | <main>...</main> | Denotes the primary content |
| <section> | <section>...</section> | Groups content into sections |
| <article> | <article>...</article> | Represents independent, self-contained content |
| <aside> | <aside>...</aside> | Contains side content or ads |
| <footer> | <footer>...</footer> | Defines footer for a document |
| <h1>-<h6> | <h1>...</h1> | Headings from most to least important |
| <p> | <p>...</p> | Paragraph of text |
| <br> | <br> | Line break |
| <hr> | <hr> | Horizontal rule (divider) |
| <a> | <a href="url">Text</a> | Creates a hyperlink |
| <img> | <img src="img.jpg" alt="description"> | Embeds an image |
| <ul> | <ul>...</ul> | Unordered (bulleted) list |
| <ol> | <ol>...</ol> | Ordered (numbered) list |
| <li> | <li>Item</li> | List item |
| <div> | <div>...</div> | Generic block container |
| <span> | <span>...</span> | Generic inline container |
| <form> | <form action="">...</form> | Defines an HTML form |
| <input> | <input type="text"> | Input field for user data |
| <textarea> | <textarea>...</textarea> | Multiline input control |
| <button> | <button>Click</button> | Clickable button |
| <label> | <label for="id">Label</label> | Label for a form control |
| <select> | <select>...</select> | Dropdown list |
| <option> | <option value="val">Option</option> | Option in a dropdown list |
| <table> | <table>...</table> | Defines a table |
| <tr> | <tr>...</tr> | Table row |
| <th> | <th>Header</th> | Table header cell |
| <td> | <td>Data</td> | Table data cell |
| <iframe> | <iframe src="page.html"></iframe> | Embeds another page |
| <audio> | <audio controls src="audio.mp3"></audio> | Embeds audio content |
| <video> | <video controls src="video.mp4"></video> | Embeds video content |
| <source> | <source src="file.mp4" type="video/mp4"> | Media source for audio/video |
| <canvas> | <canvas id="myCanvas"></canvas> | Drawing area for graphics via JS |
| <svg> | <svg>...</svg> | Scalable vector graphics |
| <code> | <code>print()</code> | Displays code in monospace font |
| <pre> | <pre>Formatted text</pre> | Preserves whitespace and formatting |
| <strong> | <strong>Text</strong> | Important text (bold) |
| <em> | <em>Text</em> | Emphasized text (italic) |
| <mark> | <mark>Text</mark> | Highlights text |
| <small> | <small>Text</small> | Displays smaller text |
| <abbr> | <abbr title="Full Form">ABC</abbr> | Defines an abbreviation |
| <cite> | <cite>Source</cite> | Title of a creative work |
| <time> | <time datetime="2025-01-01">Jan 1</time> | Represents date and/or time |
| <details> | <details><summary>Title</summary>...</details> | Expandable details block |
| <summary> | <summary>Title</summary> | Summary for details block |
| <template> | <template>...</template> | Holds client-side content hidden from user |
| <noscript> | <noscript>Fallback</noscript> | Fallback when JavaScript is disabled |
Comments
Post a Comment