HTML – Vortfolio | Learn HTML Basics and Beyond

Understanding Semantic vs Non-Semantic HTML

Looking at your comprehensive content on HTML, I've reviewed the information and found it largely accurate and well-structured. Let me enhance it with some additional insights and improve the organization.

Semantic vs Non-Semantic HTML

Type	Examples	Purpose
Semantic HTML	<header>, <footer>, <nav>, <section>, <article>	Gives meaning to content; improves SEO, accessibility, and code readability
Non-Semantic HTML	<div>, <span>	No meaning; only used for layout and styling purposes

Why Do We Use Semantic HTML?

In the early days of the web, non-semantic HTML (<div>, <span>) was sufficient for designing web pages. However, in the modern era, semantic HTML is preferred for the following reasons:

Improves SEO
Semantic elements help search engines better understand your site's structure. This is essential for all websites, including those built with frameworks (React, Angular, Next.js).

Tools like Bing Webmaster Tools and Google Search Console use semantic structure to index your site properly.

Enhances Accessibility
Screen readers and assistive technologies rely on semantic HTML to properly interpret and navigate content, making your site more accessible to people with disabilities.
Simplifies Layout & Maintenance
Semantic tags make your HTML more readable and maintainable for both developers and browsers.
Future-Proofs Your Website
Semantic HTML helps ensure compatibility with future browsers and technologies.

Note on Website Indexing:

All websites (CMS-based and custom-built) need proper indexing for search engines. This requires:

Submitting your sitemap to Google Search Console or Bing Webmaster Tools
Ensuring your site isn't blocked by robots.txt or noindex meta tags
Having a crawlable homepage with semantic structure
Including essential meta tags (title, description, canonical URLs)
Using structured data/schema markup where appropriate

While tools like Yoast SEO (WordPress) or built-in SEO settings help, they don't guarantee indexing unless all basic requirements are met.

Custom-Built vs CMS Websites

Custom-Built Website: A website built from scratch using HTML, CSS, JavaScript, and possibly frameworks like React, Vue, Angular, or backend technologies like Node.js, Django, Laravel, etc.
Framework-Based Website: Sites built on modern JavaScript frameworks (React, Angular, Vue.js) or meta-frameworks (Next.js, Nuxt.js, etc.) that require additional consideration for SEO due to client-side rendering characteristics.
CMS-Based Website: Sites built using content management systems like WordPress, Shopify, or Wix that handle some SEO aspects automatically but still benefit from semantic HTML structure.

While non-semantic HTML might be enough for basic site deployment, semantic HTML is crucial for production-level websites that need to perform well in search engines, maintain accessibility standards, and scale efficiently.

What Do We Need to Learn in HTML?

HTML (HyperText Markup Language) is the foundation of every webpage. It's a markup language used to create the structure of a web page. Although HTML is not a styling language, it comes with some basic formatting capabilities and works closely with CSS to control the visual presentation.

Essential HTML You Should Practice

You don't need to memorize every tag. Instead, focus on the most commonly used and practical elements:

1. Structural Tags

<html>, <head>, <body>, <div>, <section>, <article>, <header>, <footer>, <main>, <nav>

2. Typography and Content

<h1> to <h6>, <p>, <strong>, <em>, <span>, <br>, <hr>, <blockquote>

3. Forms and Tables

Forms: <form>, <input>, <textarea>, <select>, <option>, <label>, <button>, <fieldset>, <legend>
Tables: <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>, <caption>, <colgroup>, <col>

4. Media Elements

<img>, <video>, <audio>, <source>, <iframe>, <picture>, <figure>, <figcaption>

5. Links and Navigation

<a>, <ul>, <ol>, <li>, <nav>, <menu>

SEO and Metadata Tags

SEO tags help improve visibility on search engines and control how your content appears when shared.

Use these especially when building custom websites or when your CMS doesn't handle SEO automatically.
Even with platforms like WordPress or Shopify that provide SEO features, understanding these tags helps ensure proper implementation.

Basic Meta Tags:

<title>Page Title</title>

Open Graph (for Facebook, LinkedIn):

Twitter Card Tags:

Open Graph & twitter Card

Other Useful Tags:

<link rel="canonical" href="..."> - Prevents duplicate content issues
<link rel="alternate" hreflang="..."> - For multilingual sites
<link rel="preconnect"> and <link rel="preload"> - For performance optimization
<link rel="icon" type="image/png" href="..."> - For favicon

Semantic Tags

Used to define meaningful content structure:

<section> - Standalone section of content
<article> - Independent, self-contained content
<aside> - Content related to but separate from main content
<figure> & <figcaption> - Self-contained content with caption
<mark> - Highlighted text
<time> - Date/time references
<address> - Contact information
<details> & <summary> - Expandable/collapsible content
<code>, <pre>, <kbd>, <samp> - Code and technical text formatting

HTML5 APIs (Advanced Use)

<canvas> - For drawing graphics via JavaScript
<svg> - For Scalable Vector Graphics
<details> & <summary> - Expandable content sections
<dialog> - Modal dialog boxes
<progress> & <meter> - Progress indicators and gauges
<datalist> - Predefined options for input fields
<output> - Container for calculation results

Further it depend on your choise to get knocked by these

All HTML Tags with Use Case

Tag	Use Case
<html>	Root of the HTML document
<head>	Contains meta, title, and link tags
<title>	Page title shown in browser tabs
<meta>	Metadata like charset, description, viewport
<link>	Link to external resources (like CSS)
<style>	Add internal CSS
<script>	Embed JavaScript
<body>	Main content of the webpage
<h1> to <h6>	Headings from largest to smallest
<p>	Paragraph text
<a>	Hyperlinks
<img>	Display images
<video>	Embed video content
<audio>	Embed audio content
<source>	Source for media elements
<iframe>	Embed another webpage
<div>	Generic container
<span>	Inline container
<br>	Line break
<hr>	Horizontal rule (line)
<strong>	Bold important text
<em>	Emphasize text (italic)
<ul>	Unordered list
<ol>	Ordered list
<li>	List item
<table>	Create tables
<tr>	Table row
<td>	Table cell
<th>	Table header cell
<thead>	Table header section
<tbody>	Table body section
<tfoot>	Table footer section
<caption>	Table caption/title
<colgroup>	Group of columns for formatting
<col>	Properties for table columns
<form>	HTML form
<input>	Form input field
<textarea>	Multiline text input
<select>	Dropdown select
<option>	Options in dropdown
<optgroup>	Group related options
<label>	Label for form input
<button>	Clickable button
<fieldset>	Group related form elements
<legend>	Caption for fieldset
<datalist>	Predefined options for input
<output>	Container for calculation results
<section>	Section of content
<article>	Independent article-like content
<aside>	Sidebar content
<nav>	Navigation section
<header>	Page or section header
<footer>	Page or section footer
<main>	Main content area
<figure>	Figure with image or diagram
<figcaption>	Caption for a figure
<mark>	Highlighted text
<time>	Date or time
<address>	Contact information
<canvas>	Drawing graphics with JavaScript
<svg>	Scalable Vector Graphics
<details>	Expandable content block
<summary>	Visible summary of <details>
<dialog>	Dialog box or modal
<progress>	Progress bar
<meter>	Scalar measurement (like disk usage)
<template>	Template for JavaScript-generated content
<picture>	Container for multiple image sources
<bdi>	Bi-Directional Isolation for text
<wbr>	Word Break Opportunity
<code>	Code snippet
<pre>	Preformatted text (preserves spacing)
<kbd>	Keyboard input
<samp>	Sample output
<var>	Variable in programming or math
<cite>	Citation reference
<abbr>	Abbreviation with title attribute
<data>	Machine-readable value
<ruby>	Ruby annotations (for East Asian typography)
<rt>	Ruby text component
<rp>	Ruby fallback parentheses

Tag	Use Case
<html>	Root of the HTML document
<head>	Contains meta, title, and link tags
<title>	Page title shown in browser tabs
<meta>	Metadata like charset, description, viewport
<link>	Link to external resources (like CSS)
<style>	Add internal CSS
<script>	Embed JavaScript
<body>	Main content of the webpage
<h1> to <h6>	Headings from largest to smallest
<p>	Paragraph text
<a>	Hyperlinks
<img>	Display images
<video>	Embed video content
<audio>	Embed audio content
<source>	Source for media elements
<iframe>	Embed another webpage
<div>	Generic container
<span>	Inline container
<br>	Line break
<hr>	Horizontal rule (line)
<strong>	Bold important text
<em>	Emphasize text (italic)
<ul>	Unordered list
<ol>	Ordered list
<li>	List item
<table>	Create tables
<tr>	Table row
<td>	Table cell
<th>	Table header cell
<thead>	Table header section
<tbody>	Table body section
<tfoot>	Table footer section
<caption>	Table caption/title
<colgroup>	Group of columns for formatting
<col>	Properties for table columns
<form>	HTML form
<input>	Form input field
<textarea>	Multiline text input
<select>	Dropdown select
<option>	Options in dropdown
<optgroup>	Group related options
<label>	Label for form input
<button>	Clickable button
<fieldset>	Group related form elements
<legend>	Caption for fieldset
<datalist>	Predefined options for input
<output>	Container for calculation results
<section>	Section of content
<article>	Independent article-like content
<aside>	Sidebar content
<nav>	Navigation section
<header>	Page or section header
<footer>	Page or section footer
<main>	Main content area
<figure>	Figure with image or diagram
<figcaption>	Caption for a figure
<mark>	Highlighted text
<time>	Date or time
<address>	Contact information
<canvas>	Drawing graphics with JavaScript
<svg>	Scalable Vector Graphics
<details>	Expandable content block
<summary>	Visible summary of <details>
<dialog>	Dialog box or modal
<progress>	Progress bar
<meter>	Scalar measurement (like disk usage)
<template>	Template for JavaScript-generated content
<picture>	Container for multiple image sources
<bdi>	Bi-Directional Isolation for text
<wbr>	Word Break Opportunity
<code>	Code snippet
<pre>	Preformatted text (preserves spacing)
<kbd>	Keyboard input
<samp>	Sample output
<var>	Variable in programming or math
<cite>	Citation reference
<abbr>	Abbreviation with title attribute
<data>	Machine-readable value
<ruby>	Ruby annotations (for East Asian typography)
<rt>	Ruby text component
<rp>	Ruby fallback parentheses
<b>	Bold text (without semantic importance)
<i>	Italic text (without semantic emphasis)
<u>	Underlined text
<s>	Strikethrough text
<small>	Smaller text
<sub>	Subscript text
<sup>	Superscript text
<del>	Deleted text
<ins>	Inserted text
<dfn>	Definition term
<q>	Short inline quotation
<noscript>	Alternative content for when scripts aren't supported
<track>	Text tracks for media elements
<map>	Image map for clickable areas
<area>	Defines areas in an image map
<base>	Base URL for all relative URLs in document
<param>	Parameters for plugins (deprecated)
<object>	External resource (like multimedia, PDFs, or plugins)
<embed>	Container for external application
<menuitem>	Command/menu item user can invoke (deprecated)
<keygen>	Key pair generator form control (deprecated)
<hgroup>	Heading group (deprecated in HTML5)
<menu>	List of commands
<portal>	Embedded content with navigation capabilities (experimental)
<slot>	Placeholder inside a web component (for Shadow DOM)
<bgsound>	Background sound (non-standard, obsolete)
<marquee>	Scrolling text or images (non-standard, obsolete)
<plaintext>	Plain text (obsolete)
<frameset>	Window divisions (obsolete)
<frame>	Individual frame (obsolete)
<noframes>	Content for browsers that don't support frames (obsolete)
<isindex>	Single-line input field (obsolete)
<listing>	Computer code listing (obsolete)
<xmp>	Preformatted text (obsolete)
<dir>	Directory list (obsolete)
<center>	Centered content (obsolete)
<font>	Font style (obsolete)
<basefont>	Base font (obsolete)
<strike>	Strikethrough text (obsolete)
<big>	Larger text (obsolete)
<tt>	Teletype text (obsolete)
<acronym>	Acronym (obsolete, use <abbr> instead)
<applet>	Java applet (obsolete)

Final Note:
You don't need to use every tag. Use them according to the requirements of your project. Focus on learning the most commonly used tags first and gradually expand your knowledge as needed. The proper use of semantic HTML not only improves your website's SEO but also makes it more accessible and maintainable.

Our Projects

Web Development

AI & ML

Mobile Apps