| Tag | Description | Effective Usage Instructions | Example |
|---|---|---|---|
| <!DOCTYPE> | HTML version declaration | Always first line; use <!DOCTYPE html> for HTML5. | <!DOCTYPE html> |
| <html> | Root element | Set language with lang for SEO/a11y. | <html lang="en">...</html> |
| <head> | Document metadata | Put meta, title, links, styles/scripts (not visible content). | <head>...</head> |
| <title> | Browser tab title | Keep <60 chars; add brand/keywords. | <title>BeSmart — HTML Tags Guide</title> |
| <base> | Base URL/target | Only one per page; affects all relative links. | <base href="https://besmartcomputer.com/" target="_blank"> |
| <meta> | Metadata nodes | Charset, viewport, description, og/meta, etc. | <meta name="description" content="BeSmart Computer Education — Haldwani"> |
| <link> | External resources | Stylesheets, icons, preconnect/preload. | <link rel="stylesheet" href="styles.css"> |
| <style> | Embedded CSS | Small pages/overrides; keep scoped. | <style>h1{color:#1d4ed8}</style> |
| <script> | Client-side JS | Prefer defer or type="module". | <script defer src="app.js"></script> |
| <noscript> | Fallback when JS off | Provide essential info/CTA. | <noscript>Enable JS to use BeSmart demos.</noscript> |
| <body> | Visible content wrapper | One per document; apply global layout classes here. | <body>...</body> |
| <header> | Intro/branding area | Top section or section header; logo + nav. | <header>BeSmart Header</header> |
| <nav> | Navigation links | Use clear labels; add aria-label if needed. | <nav aria-label="Main"><a href="#tags">Tags</a></nav> |
| <main> | Primary content | One per page; skip headers/footers/sidebars. | <main>All HTML Tags Table</main> |
| <section> | Thematic grouping | Always include a heading inside. | <section><h2>Media</h2>...</section> |
| <article> | Self-contained unit | Blog/news card that stands alone. | <article><h3>BeSmart Update</h3></article> |
| <aside> | Complementary content | Tips/ads/related info; not core flow. | <aside>Tip: Use semantic HTML</aside> |
| <footer> | Footer content | Copyright, contacts, links. | <footer>© BeSmart</footer> |
| <address> | Contact information | Use for org/person postal/email/phone. | <address>BeSmart, Haldwani, India</address> |
| <figure> | Media + caption | Wrap images/charts with a caption. | <figure><img src="logo.png" alt="BeSmart"><figcaption>Brand Mark</figcaption></figure> |
| <figcaption> | Caption for figure | First/last child of <figure>. | <figcaption>BeSmart Logo</figcaption> |
| <h1>…<h6> | Headings levels | Respect hierarchy (h1→h2→h3…). | <h1>BeSmart</h1> <h2>HTML</h2> |
| <p> | Paragraph | Keep concise; use CSS for spacing. | <p>Learn at BeSmart Haldwani.</p> |
| <span> | Inline wrapper | Style small text fragments. | <p>Join <span class="brand">BeSmart</span></p> |
| <div> | Generic block | Prefer semantic tags when possible. | <div class="card">...</div> |
| <a> | Hyperlink | Descriptive text; external links: rel="noopener". | <a href="https://besmartcomputer.com" target="_blank" rel="noopener">Visit BeSmart</a> |
| <em> | Stress emphasis | Screen-readers emphasize. | <p>Learn <em>fast</em>.</p> |
| <strong> | Strong importance | Semantic bold; not just visual. | <strong>Important:</strong> Semantic HTML |
| <small> | Side comments | Legal notes/footnotes. | <small>*Limited seats</small> |
| <mark> | Highlight text | Show search hits or emphasis. | <p>Best for <mark>Haldwani</mark> learners.</p> |
| <b> | Stylistic bold | Use sparingly; prefer <strong>. | <b>BeSmart</b> |
| <i> | Stylistic italic | Use <em> for emphasis. | <i>Term</i> |
| <u> | Underline (presentational) | Avoid link confusion. | <u>BeSmart</u> |
| <s> | No longer accurate | Show old price/state. | <s>₹9,999</s> ₹6,499 |
| <del> | Deleted text | Add datetime when possible. | <del datetime="2025-10-31">Old syllabus</del> |
| <ins> | Inserted text | Change tracking with datetime. | <ins datetime="2025-10-31">New module</ins> |
| <sub>/<sup> | Sub/superscript | Chemistry/math/footnotes. | H<sub>2</sub>O, x<sup>2</sup> |
| <q> | Inline quotation | Browser adds quotes automatically. | <q>BeSmart rocks!</q> |
| <blockquote> | Block quotation | Use cite attribute for source. | <blockquote cite="https://besmartcomputer.com">...</blockquote> |
| <cite> | Work title | Books/reports/media titles. | <cite>BeSmart HTML Guide</cite> |
| <abbr> | Abbreviation | Expand via title attribute. | <abbr title="BeSmart Computer Education">BCE</abbr> |
| <dfn> | Term being defined | Place near its definition. | <dfn>SEO</dfn> is … |
| <time> | Date/time | Use machine-readable datetime. | <time datetime="2025-10-31">Oct 31, 2025</time> |
| <data> | Machine value | Bind a readable label to a value. | <data value="101">HTML 101</data> |
| <code> | Inline code | Wrap blocks inside <pre>. | <code>console.log('BeSmart')</code> |
| <pre> | Preformatted block | Whitespace preserved; ideal for code. | <pre>line 1\nline 2</pre> |
| <kbd> | User input (keys) | Show shortcuts clearly. | <kbd>Ctrl</kbd>+<kbd>S</kbd> |
| <samp> | Sample output | Program/console output. | <samp>OK 200</samp> |
| <var> | Variable name | Math/program variables. | <var>x</var> = 42 |
| <bdi> | Bi-di isolation | Isolate mixed-direction text. | <bdi>علي</bdi> |
| <bdo> | Bi-di override | Set dir="rtl|ltr". | <bdo dir="rtl">BeSmart</bdo> |
| <wbr> | Optional line break | Break long words/URLs. | be<wbr>smart<wbr>computer.com |
| <br> | Line break | Use sparingly; prefer CSS margins. | BeSmart<br>Haldwani |
| <hr> | Thematic break | Separate sections of content. | <hr> |
| <ruby>/<rb>/<rt>/<rp>/<rtc> | Ruby annotations | East Asian pronunciation guides. | <ruby><rb>学</rb><rt>study</rt><rp>( </rp><rtc><rt>gaku</rt></rtc><rp> )</rp></ruby> |
| <ul>/<ol>/<li> | Lists (unordered/ordered) | Nesting allowed; keep items parallel. | <ul><li>HTML</li><li>CSS</li></ul> |
| <dl>/<dt>/<dd> | Description list | Glossaries/FAQs key–value pairs. | <dl><dt>BeSmart</dt><dd>Haldwani</dd></dl> |
| <img> | Image | Always meaningful alt; optimize size. | <img src="https://besmartcomputer.com/wp-content/uploads/2025/10/Be-Smart-logo-1-1.png" alt="BeSmart logo" width="160"> |
| <picture> | Responsive images | Art direction with multiple sources. | <picture> <source srcset="logo.avif" type="image/avif"> <img src="logo.png" alt="BeSmart"> </picture> |
| <source> | Media source | Use inside <audio>/<video>/<picture>. | <source src="intro.mp3" type="audio/mpeg"> |
| <audio> | Audio player | Add controls; provide formats. | <audio controls><source src="intro.mp3" type="audio/mpeg"></audio> |
| <video> | Video player | controls, dimensions, poster, captions. | <video controls width="360"> <source src="demo.mp4" type="video/mp4"> </video> |
| <track> | Timed text | Captions/subtitles for media. | <track kind="captions" srclang="en" src="cap.vtt" label="English"> |
| <map>/<area> | Image map | Clickable regions; include alt text. | <img src="lab.png" usemap="#campus" alt="Campus"> <map name="campus"><area shape="rect" coords="0,0,100,100" href="#labs" alt="Labs"></map> |
| <iframe> | Embed page | Use sandbox, loading="lazy" for security/perf. | <iframe src="https://besmartcomputer.com" width="400" height="260" loading="lazy" sandbox></iframe> |
| <embed> | External resource | PDF/legacy; prefer native HTML when possible. | <embed src="brochure.pdf" type="application/pdf" width="300" height="200"> |
| <object>/<param> | External content | Provide fallback within <object>. | <object data="doc.pdf" type="application/pdf"> <param name="view" value="Fit">PDF fallback text </object> |
| <table> | Tabular data | Not for layout; make responsive. | <table>...</table> |
| <caption> | Table title | First child of <table>. | <caption>BeSmart Timetable</caption> |
| <colgroup>/<col> | Column groups | Set widths/backgrounds per column. | <colgroup><col span="1" style="width:30%"></colgroup> |
| <thead>/<tbody>/<tfoot> | Table sections | Sticky header via CSS on <thead>. | <thead>...</thead> <tbody>...</tbody> |
| <tr>/<th>/<td> | Rows & cells | scope on headers for a11y. | <tr><th scope="col">Course</th><td>HTML</td></tr> |
| <form> | Form container | Use proper action/method; group logically. | <form action="/submit" method="post">...</form> |
| <label> | Label for input | for attribute must match input id. | <label for="name">Name</label> |
| <input> | Form control | Use correct type (text, email, date, etc.). | <input id="name" type="text" placeholder="BeSmart student"> |
| <textarea> | Multi-line input | Set rows/cols; use for long text. | <textarea rows="4">Goal: Learn HTML</textarea> |
| <button> | Clickable button | type="submit" / button / reset. | <button type="submit">Send</button> |
| <select>/<option> | Dropdown | Keyboard friendly; add clear labels. | <select><option>HTML</option><option>CSS</option></select> |
| <optgroup> | Group options | Label groups for long lists. | <select><optgroup label="Web"><option>JS</option></optgroup></select> |
| <datalist> | Autocomplete list | Connect via input’s list attribute. | <input list="courses"><datalist id="courses"><option value="HTML"></datalist> |
| <fieldset>/<legend> | Group controls | Improves structure/accessibility. | <fieldset><legend>Enroll</legend>...</fieldset> |
| <output> | Calculation result | Update via JS or form events. | <output id="total">0</output> |
| <progress> | Task progress | Set value / max. | <progress value="70" max="100">70%</progress> |
| <meter> | Scalar measurement | Use min/max/low/high/optimum. | <meter min="0" max="1" value=".8">80%</meter> |
| <canvas> | Scripted drawing | Set width/height as attributes; draw via JS. | <canvas id="c" width="200" height="100"></canvas> |
| <svg> | Vector graphics | Inline scalable graphics in HTML. | <svg width="80" height="80"><circle cx="40" cy="40" r="30" /></svg> |
| <details>/<summary> | Disclosure widget | Expandable sections without JS. | <details><summary>Show tips</summary>Use semantic HTML</details> |
| <dialog> | Modal dialog | Use .showModal()/.close() in JS. | <dialog open>BeSmart says hi!</dialog> |
| <template> | Client-side template | Hidden until cloned via JS; ideal for rows/cards. | <template id="rowTpl"><tr>...</tr></template> |
| <slot> | Shadow DOM slot | Named/unnamed slots in custom elements. | <slot name="cta">Default CTA</slot> |
| <center> | Deprecated centering | Use CSS text-align:center. | <!-- Avoid: <center>...</center> --> |
| <font> | Deprecated font styling | Use CSS for typography. | <!-- Avoid: <font color="red">...</font> --> |
| <big>/<tt>/<strike> | Deprecated text tags | Use CSS or semantic alternatives. | <!-- Avoid <big> <tt> <strike> --> |
| <acronym> | Deprecated abbreviation | Use <abbr> instead. | <!-- Avoid: <acronym> --> |
| <applet> | Deprecated Java applet | Use modern web APIs. | <!-- Avoid: <applet> --> |
| <frameset>/<frame>/<noframes> | Deprecated frames | Use iframes/CSS layouts. | <!-- Avoid frameset/frame/noframes --> |
| <basefont> | Deprecated base font | Use CSS. | <!-- Avoid: <basefont> --> |
| <dir> | Deprecated list | Use <ul>/<ol>. | <!-- Avoid: <dir> --> |
| <keygen> | Deprecated key-pair form control | Use Web Crypto / server flows. | <!-- Avoid: <keygen> --> |
| <menu>/<menuitem> | Obsolete command menu | Prefer buttons/UL; menuitem removed. | <!-- Avoid: <menu><menuitem> --> |
| <marquee> / <blink> | Non-standard animations | Use CSS/JS animations. | <!-- Avoid: <marquee> / <blink> --> |
BeSmart Computer Education
Modern Computer Coaching in Haldwani