DEV Community: blaycoder

ScamDetect: Building a Multilingual AI-Powered Phishing Detection Platform

blaycoder — Mon, 16 Mar 2026 22:19:51 +0000

tags: ai, security, phishing, next.js, node.js, cybersecurity

Introduction

Every day, millions of people fall victim to phishing scams and phishing messages. Scammers don't just target people in English-speaking countries; they attack globally, using local languages to make their deceptive messages seem more trustworthy.

This is where ScamDetect comes in.

I built ScamDetect to solve this problem - a free, multilingual AI-powered platform that can detect phishing attempts, scams, and malicious URLs in multiple languages. Whether you speak English, Spanish, French, Arabic, or Chinese, ScamDetect can help you identify and avoid online scams before they harm you.

Why I Built This Project

The motivation came from two key realizations:

1. Phishing is a Global Problem

According to recent statistics, over 3.4 billion phishing emails are sent every day -> View. But what's worse is that non-English speakers are often underserved by existing security tools. A scammer might convince someone in Indonesia by sending a message in Indonesian, but government and commercial security tools often focus on English-language threats.

2. A friend of mine was scammed 😪😥

A friend of mine was duped through a phishing attack, and it really made me think about how easily these things can happen. Many times people don’t recognize phishing messages until it’s already too late.

I’ve always had a strong interest in cybersecurity and phishing awareness, and whenever I get the opportunity, I try to educate people about how these scams work.

When the lingo.dev hackathon came up, I saw it as an opportunity to build something that could actually help people beyond just awareness.

Key Features of ScamDetect

1. Multilingual Text Message Analysis

Users can paste a suspicious text message (SMS, WhatsApp, Telegram, etc.) and ScamDetect analyzes it for phishing indicators. The detection is language-independent, so a message in Spanish, Arabic, or Portuguese can be analyzed with the same accuracy.

2. URL Phishing Scanning

ScamDetect checks suspicious URLs against two powerful threat intelligence databases:

VirusTotal API — checks against 80+ antivirus engines
PhishTank — checks against known phishing databases

This multi-source approach ensures fewer false positives while catching more real threats.

3. Screenshot OCR Detection

Many scams come from screenshots of fake banking apps, fake payment screens, or fabricated messages. ScamDetect can:

Extract text from screenshots using Google Vision OCR (even though I have challenges enabling the billing after trying several attempt. I could not log into Microsoft Azure to use the OCR tool hence why I reverted back to Google Vision OCR since that is just only a billing issue.)
Analyze the extracted text for phishing indicators
All without needing the user to manually type anything

4. AI-Powered Scam Classification

Using Ollama with the gpt-oss:120b-cloud model, ScamDetect runs an advanced AI classifier to determine if a message is genuinely a phishing attempt or a legitimate message. This goes beyond simple keyword matching—the AI understands context and language patterns.

5. Results Translated into Your Language

All analysis results are automatically translated into the user's preferred language using the Lingo.dev translation API.

6. User Dashboard

Users can:

View their scan history
Track patterns in scams they've encountered

Architecture Overview

ScamDetect follows a modern full-stack architecture:

┌─────────────────────────────────────┐
│     Frontend (Next.js + React)      │
│   • User Interface                  │
│   • Language Selection              │
│   • Input Handling                  │
└────────────┬────────────────────────┘
             │
             │ HTTP/HTTPS
             │
┌────────────▼────────────────────────┐
│     Backend (Node.js + Express)     │
│   • API Endpoints                   │
│   • Detection Pipeline              │
│   • Service Orchestration           │
└────────────┬────────────────────────┘
             │
    ┌────────┼────────┬──────────┐
    │        │        │          │
    ▼        ▼        ▼          ▼
┌────────┐┌──────┐┌──────┐┌────────────┐
│Database││ OCR  ││AI    ││APIs (VT,   │
│        ││      ││Model ││PhishTank)  │
│Supabase││Google││Ollama││Translation │
│        ││ Vision││gpt-oss:120b-cloud││Lingo.dev  │
└────────┘└──────┘└──────┘└────────────┘

Data Flow:

User Input → Frontend captures text, URL, or screenshot image
Frontend sends request → Backend API with language preference
Backend processes:
- Extracts keywords and URLs
- Checks domain similarity using the Levenshtein distance method
- Submits URLs to VirusTotal/PhishTank
- Runs AI classification if text is detected
Results are compiled → Risk score calculated
Translation layer → Results translated to user's language
Response sent back → Frontend displays rich visualization
Data persisted → Results stored in Supabase for user's dashboard

Flow Chart:

Important Code Examples

Let's look at real code from ScamDetect and understand how it works.

1. Sending Text to Backend for Analysis

Frontend Code - how users send text messages for analysis:

// frontend/src/lib/api.ts

export const api = {
  /** POST /api/analyze-message */
  analyzeMessage: async (
    message: string,
    language = "en",
  ): Promise<DetectionResult> =>
    fetch(`${API_URL}/api/analyze-message`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        ...(await authHeaders()), // Include user auth token
      },
      body: JSON.stringify({ message, language }),
    }).then(handleResponse<DetectionResult>),
};

What this does:

Takes a suspicious message and target language
Sends it to the backend /api/analyze-message endpoint
Includes authentication headers (if user is logged in)
Returns structured analysis results

Why it's important:

Simple, type-safe API using TypeScript
Supports authentication without exposing tokens
Error handling built-in via handleResponse

Backend Code - how the backend processes the message:

// backend/src/controllers/analyze.controller.ts

export async function analyzeMessage(
  req: Request,
  res: Response,
): Promise<void> {
  const { message, language } = req.body;
  try {
    // Run the full detection pipeline
    const result = await runDetectionPipeline(message, language ?? "en");

    // Save result to database asynchronously
    saveDetectionResult(message, result, req.userId).catch(() => {});

    // Return results immediately
    res.json(result);
  } catch (err) {
    res.status(500).json({ error: "Detection pipeline failed" });
  }
}

What this does:

Validates and extracts message and language from request
Runs the detection pipeline (keyword matching, URL extraction, AI classification)
Saves results to database for user history
Returns response immediately (doesn't wait for database save)

Why it's important:

Fast response time—doesn't block on database operations
Persistent history for user analysis
Graceful error handling

2. Running VirusTotal API for URL Scanning

Backend Service — how we check URLs against VirusTotal:

// backend/src/services/virustotalService.ts

export async function submitUrl(url: string): Promise<string | null> {
  const key = apiKey();
  if (!key) return null;

  try {
    const body = new URLSearchParams();
    body.set("url", url);

    const res = await axios.post<{ data: { id: string } }>(
      `${VT_API_URL}/urls`,
      body,
      {
        headers: {
          "x-apikey": key,
          "Content-Type": "application/x-www-form-urlencoded",
        },
      },
    );

    return res.data.data.id;
  } catch (err) {
    return null;
  }
}

/**
 * Get detailed analysis of a VirusTotal scan
 */
export async function getAnalysis(
  analysisId: string,
): Promise<VTDetailedResult | null> {
  const key = apiKey();
  if (!key) return null;

  try {
    const res = await axios.get<VTAnalysisResponse>(
      `${VT_API_URL}/analyses/${analysisId}`,
      {
        headers: { "x-apikey": key },
      },
    );

    const attrs = res.data.data.attributes;
    return {
      vtAnalysisId: analysisId,
      status: attrs.status,
      maliciousCount: attrs.stats.malicious || 0,
      phishingCount: (attrs.results || {})["Phish Threat"] ? 1 : 0,
      harmlessCount: attrs.stats.harmless || 0,
      suspiciousCount: attrs.stats.suspicious || 0,
      undetectedCount: attrs.stats.undetected || 0,
      engines: Object.entries(attrs.results || {}).map(
        ([name, result]) => ({
          name,
          category: result.category,
          result: result.result,
        }),
      ),
    };
  } catch (err) {
    return null;
  }
}

What this does:

Submits a URL to VirusTotal's API for scanning
Polls the analysis endpoint to get the results
Returns detailed information including malicious engines and detection counts
Gracefully handles API key missing or API failures

Why it's important:

VirusTotal provides crowd-sourced threat intelligence from 80+ antivirus engines
One malicious URL detection might be a false positive, but multiple engines agreeing is strong signal
Decoupling URL checking from our own detection logic keeps our system modular

3. Extracting Text from Screenshots Using OCR

Backend Service — how we extract text from screenshot images:

// backend/src/services/ocrService.ts

import { ImageAnnotatorClient } from "@google-cloud/vision";

export interface OCRResult {
  extractedText: string;
  confidence?: number;
}

/** Extract text from an image using Google Cloud Vision API */
export async function extractTextFromImage(
  imageBase64: string,
): Promise<OCRResult> {
  const client = createClient();

  const request = {
    image: { content: imageBase64 },
  };

  const response = await client.documentTextDetection(request);
  const fullTextAnnotation = response[0].fullTextAnnotation;

  if (!fullTextAnnotation) {
    return { extractedText: "", confidence: 0 };
  }

  // Calculate average confidence from all blocks
  const annotations = response[0].fullTextAnnotation.pages?.[0].blocks || [];
  const confidences = annotations
    .flatMap((b) => b.paragraphs || [])
    .flatMap((p) => p.words || [])
    .flatMap((w) => w.symbols || [])
    .map((s) => s.confidence || 0);

  const avgConfidence =
    confidences.length > 0
      ? confidences.reduce((a, b) => a + b, 0) / confidences.length
      : 0;

  return {
    extractedText: fullTextAnnotation.text || "",
    confidence: avgConfidence,
  };
}

Backend Controller — how the OCR endpoint works:

// backend/src/controllers/screenshot.controller.ts

export async function scanScreenshot(
  req: Request,
  res: Response,
): Promise<void> {
  const { imageBase64, language } = req.body;

  try {
    // Extract text from image
    const { extractedText } = await extractTextFromImage(imageBase64);

    if (!extractedText.trim()) {
      return res.json({
        riskLevel: "SAFE",
        message: "No text found in image",
      });
    }

    // Analyze the extracted text
    const result = await runDetectionPipeline(extractedText, language ?? "en");

    // Save for history
    saveDetectionResult(imageBase64, result, req.userId).catch(() => {});

    res.json(result);
  } catch (err) {
    res.status(500).json({ error: "Screenshot scanning failed" });
  }
}

What this does:

Takes a base64-encoded image from the frontend
Uses Google Cloud Vision to extract text
Calculates confidence score based on per-character confidence values
Runs the normal detection pipeline on extracted text
Returns phishing analysis results

Why it's important:

OCR allows users to share screenshots instead of typing (better UX)
Confidence score helps users understand if text extraction was reliable
Image-based scams (fake banking screens, fake payment apps) are very common—this feature is critical

4. Translating Results with Lingo.dev

Backend Service — translating analysis results:

// backend/src/services/translationService.ts

import { LingoDotDevEngine } from "lingo.dev/sdk";

const engine = new LingoDotDevEngine({
  apiKey: process.env.LINGODOTDEV_API_KEY,
});

export async function translateText(
  text: string,
  targetLanguage: string,
): Promise<string> {
  // Skip translation if no API key or target is English
  if (!process.env.LINGODOTDEV_API_KEY || targetLanguage === "en") {
    return text;
  }

  const result = await engine.localizeText(text, {
    sourceLocale: "en",
    targetLocale: targetLanguage,
  });

  return result ?? text;
}

Detection Pipeline — integrating translation into results:

export async function runDetectionPipeline(
  text: string,
  language = "en",
): Promise<DetectionResult> {
  // ... analysis code ...

  const riskLevel = calculateRiskLevel(totalScore);
  const recommendation = generateRecommendation(riskLevel);

  // Translate recommendation to user's language
  if (language !== "en") {
    translatedRecommendation = await translateText(recommendation, language);
  }

  return {
    riskLevel,
    score: totalScore,
    flags,
    recommendation: translatedRecommendation,
    extractedUrls,
    language,
  };
}

What this does:

Uses Lingo.dev SDK to translate text between languages
Skips translation if no API key (graceful degradation)
Integrates into the detection pipeline to translate analysis recommendations

Why it's important:

Makes the tool accessible globally
Users aren't forced to read English analysis results
Lingo.dev handles nuanced localization (not just word translation)

5. Frontend Component for User Interaction

Frontend Page — scanning URLs with real-time feedback:

// frontend/src/app/scan-url/page.tsx

export default function ScanUrlPage() {
  const [url, setUrl] = useState("");
  const [result, setResult] = useState<DetectionResult | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const { language, setLanguage } = useLanguage();

  async function handleScan() {
    if (!url.trim()) return;
    setLoading(true);
    setError(null);
    setResult(null);

    try {
      // Call backend API
      const data = await api.checkUrl(url, language);
      setResult(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Scan failed");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="min-h-screen px-4 py-16">
      <div className="mx-auto max-w-2xl">
        {/* Header */}
        <h1 className="font-mono text-3xl font-bold text-[#e2e8ff]">
          Scan <span className="text-[#ff00ff]">URL</span>
        </h1>

        {/* Input Panel */}
        <input
          type="url"
          value={url}
          onChange={(e) => setUrl(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && handleScan()}
          placeholder="https://suspicious-site.com"
          className="w-full rounded border bg-[rgba(255,0,255,0.03)] py-3 px-4 text-[#e2e8ff]"
        />

        {/* Scan Button */}
        <button
          onClick={handleScan}
          disabled={loading}
          className="mt-4 px-6 py-2 bg-[#ff00ff] rounded text-white font-bold disabled:opacity-50"
        >
          {loading ? "Scanning..." : "Scan URL"}
        </button>

        {/* Results */}
        {result && <ResultPanel result={result} />}
        {error && <div className="text-red-500">{error}</div>}
      </div>
    </div>
  );
}

What this does:

Provides user interface for URL scanning
Handles loading states and error display
Calls the backend API with user's language preference
Uses React hooks to manage state
Keyboard support (Enter to scan)

Challenges I Faced

Building ScamDetect involved solving several complex problems:

1. OCR Accuracy & Confidence Level

The Challenge:
Different images have different quality levels. At first I tried a common OCR library (Tesseract) but noticed it was missing characters or skipping parts of the text. That forced me to experiment with other OCR options until I found something that worked better for extracting text from screenshots such as Google Vision OCR or Microsoft Azure OCR tool. I decided to go for the Google Vision OCR since I have worked with different Google Cloud services.

After setting up the Google Vision OCR, I had an error to enable billing because the service required enabling billing but Google could not verify every card details I tried. I decided to make use of Microsoft Azure, I signed up and fill every detailed bearing in mind that I am close but unfortunately, I could not login after signup, I kept receiving this error message :"interaction_required: AADSTS5000225: This tenant has been blocked due to inactivity. To learn more about tenant lifecycle policies, see https://aka.ms/TenantLifecycle". I had to maintain the Google Vision OCR setup since it was only billing issue.

The Solution:
No solution yet because I am yet to figure out how to solve the billing issue. I have done everything asked of me by Google but I still have same issue.

What I intend to do is to make a subscription on hugging face and use one of the models such as Zai for the OCR extraction. I could have used the Deepseek OCR model in Ollama but the model is large and I might not be able to use it in production, it is best used locally.

// Only flag as high-risk if confidence is good
if (confidence < 0.7) {
  console.warn("Low OCR confidence—reducing detection sensitivity");
  flags = flags.filter((f) => f.score > 30); // Only high-confidence flags
}

2. Integrating AI Models Reliably

The Challenge:
Ollama (local AI) and VirusTotal API both can fail intermittently. We can't let one failing service break the entire detection pipeline.

The Solution:

Made all external service calls optional
If VirusTotal fails, we still return keyword-based detection
If Ollama doesn't respond, we skip AI classification but complete the analysis
Return partial results instead of errors
This is called "graceful degradation"

// Ollama AI classification is optional
try {
  const { classifyWithOllama } = await import("./ollamaService");
  aiClassification = (await classifyWithOllama(text)) ?? undefined;
} catch (err) {
  console.error("[AI] Error:", err);
  // Continue without AI classification
}

// Return results even if external services failed
return {
  riskLevel,
  score: calculateRiskScore(flags), // Built from flags we do have
  flags,
  message: "Detection completed with available services",
};

3. Managing API Call Costs and Rate Limits

The Challenge:

VirusTotal has rate limits (free tier: 4 requests/min)
Translation API has per-character costs
Scanning screenshots with Google Cloud Vision costs money
We needed to avoid wasting money on repeated scans of the same URLs

The Solution:

Implemented result caching in Supabase
If a URL was scanned recently, return cached result instead of making new API call
Batch translation requests when possible
Use express-rate-limit middleware to protect our backend
Rate limit by user and IP address

// Rate limiting in express
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100, // Max 100 requests per IP per 15 min
  message: { error: "Too many requests, please try again later." },
});
app.use(limiter);

Setup Guide for Developers

Want to run ScamDetect yourself? Here's how to get started.

Prerequisites

Before you begin, make sure you have:

Node.js 20+ — Download here
Ollama installed — Download here
Git — Download here

You'll also need API keys from:

Supabase (free) — supabase.com
VirusTotal (free) — virustotal.com
Google Cloud Vision (free tier) — cloud.google.com
Lingo.dev (for translation) — lingo.dev

Step 1: Clone the Repository

git clone https://github.com/blaycoder/ScamDetect-Multilingual
cd ScamDetect

Step 2: Setup Backend

# Navigate to backend directory
cd backend

# Install dependencies
npm install

# Copy environment file
cp .env.example .env

# Edit .env with your API keys
nano .env
# Fill in:
# SUPABASE_URL=your-supabase-url
# SUPABASE_KEY=your-supabase-key
# VIRUSTOTAL_API_KEY=your-virustotal-key
# GOOGLE_CLOUD_CREDENTIALS=your-google-vision-json
# LINGODOTDEV_API_KEY=your-lingo-key

Start Ollama first (in a separate terminal):

ollama serve

Run the backend server:

npm run dev

You should see:

[Express] Server running on port 4000
[Ollama] Connected to local model

Step 3: Setup Frontend

In a new terminal:

# Navigate to frontend directory
cd frontend

# Install dependencies
npm install

# Create environment file
cp .env.example .env.local

# Edit .env.local
nano .env.local
# Fill in:
# NEXT_PUBLIC_API_URL=http://localhost:4000
# NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
# NEXT_PUBLIC_SUPABASE_KEY=your-supabase-key

Run the frontend:

npm run dev

Open your browser to http://localhost:3000

Step 4: Test the Application

Test text scanning: Go to "Analyze Message" and paste a phishing message
Test URL scanning: Go to "Scan URL" and paste a suspicious URL
Test screenshot: Go to "Upload Screenshot" and upload a screenshot

If everything works, you should see detection results with risk scores!

Troubleshooting

Backend won't start:

Make sure Ollama is running (ollama serve)
Check that port 4000 isn't in use: lsof -i :4000

Frontend can't reach backend:

Make sure NEXT_PUBLIC_API_URL points to your backend
Check CORS settings in backend/src/app.ts

OCR not working:

Verify Google Cloud Vision credentials are correct
Check that you have the right JSON file format
Check that billing is enabled on Google Cloud
Confirm that Google Vision OCR is enabled in APIs & Services

Ollama responses are slow:

First response can take 10-30 seconds
Subsequent responses should be faster (model is cached in memory)

Real World Applications

ScamDetect isn't just a technical project—it has real impact on people's lives.

Use Case 1: Protecting Vulnerable Communities

A grandmother in rural India receives a WhatsApp message claiming to be from her bank. The message asks her to "verify her account" by clicking a link. She's not tech-savvy and the message looks official.

Instead of losing ₹50,000 to the scammer, she pastes the message into ScamDetect. The system detects phishing keywords and suspicious domain patterns. The result appears in Hindi, her native language. She learns not to click the link.

Impact: One person saved from financial loss.

Use Case 2: Supporting Small Business Owners

A small business owner in Mexico receives an email claiming to be from "PayPal Support" asking him to verify his account. He doesn't speak English well, but he can use ScamDetect to analyze the email in Spanish.

ScamDetect detects:

Phishing keywords
Domain impersonation (fake PayPal domain)
VirusTotal flags from multiple antivirus engines

Impact: Business owner avoids losing business payment data.

Use Case 3: Educational Outreach

Schools and cybersecurity awareness programs can use ScamDetect to teach students about phishing in their native language. Instead of abstract lessons, students can:

Scan real (anonymized) phishing attempts
See how detection works
Understand the techniques scammers use

Impact: Next generation grows up more phishing-aware.

Key Takeaways

Building ScamDetect taught me several important lessons:

Accessibility matters — A tool is only useful if people can actually use it. Multilingual support isn't a nice-to-have, it's essential.
AI + APIs = powerful combinations — Combining local AI (Ollama) with threat intelligence APIs (VirusTotal) creates something stronger than either alone.
Graceful degradation — Don't let one failing service break your whole system. Build systems that work with partial data.
Open source tools are powerful — Ollama, Mistral, Google Cloud Vision, and VirusTotal's free tier made this project possible without massive cloud budgets.
Real-world problems inspire good design — Building something that helps people avoid financial loss is more motivating than building for the sake of building.

Get to know me:

GitHub: github.com/blaycoder

Linkedin: https://www.linkedin.com/in/ayomide-onatola-3180281a5

X: https://x.com/blaycoder

Conclusion

Phishing and scams are one of the biggest cybersecurity threats facing everyday people. Language barriers shouldn't make anyone more vulnerable.

ScamDetect is my attempt to make the internet a little bit safer, one multilingual detection at a time.

If you found this interesting, I'd love to hear your thoughts! Feel free to comment, ask questions, or share your own experiences building security tools.

Before I drop my pen, check out this post written by me to understand why your privacy is important: Understanding your privacy is very important

Stay safe out there! 🛡️

Why HTML is a must for every website

blaycoder — Thu, 19 May 2022 07:30:02 +0000

HTML is an abbreviation of HYPERTEXT MARKUP LANGUAGE. HTML is a language that makes a website well-structured. We can say HTML is a skeletal part of a website. HTML allows you to view the contents on your web page.
HTML is not a programming language.
It's just a way of communicating to the browser what should be on a website.

With the help of elements like

<head>,<title>,<main>, <header>, <p>, <footer>, <ul>, <body>
, and many more, you can format and organize a webpage.
HTML create an interface that allows you to add text, images, buttons, text field, video, audio and many more. Now, you can see why HTML is a must for every website.

HTML semantics helps give meaning to a webpage. Users have better experience on your website when you make use of semantic elements because of its accessibility. More info on semantics [(https://developer.mozilla.org/en-US/docs/Glossary/Semantics)]

HTML can also be referred to as the building block of a website. or the foundation of a website. Without the foundation, you can't build a house. Without HTML,you can't have a structured website.

Examples of websites that make use of HTML are google.com, geeksforgeeks.com, waiting.zuriboard.com, freecodecamp.com etc

There are 15 HTML empty tags which are:

<p> - It gives paragraph to a text

<br/> - Line break, it creates a new line whenever it's used.

<img/> - Insert an image into a webpage

<area> - It is used to map a portion of an image to make it clickable by the end-user. It is used to direct the user to different links after the user clicks on the mapped portions of the image. It is used as a child tag of the <map> tag.

<base> - For all relative URLs in a document, the base URL is specified to use with the <base> element. Only one <base> element can be used in a document.

<col> -     
The <col> tag in HTML is used to set the column properties for each column within a <colgroup> tag. This tag is used to set the style property to each column.

<embed> - The <embed> tag in HTML is used for embedding external applications which are generally multimedia content like audio or video into an HTML document. It is used as a container for embedding plug-ins such as flash animations.

<hr> - A thematic break between paragraph-level components is represented by the <hr> element. It looks like a line

<input> - This empty element is used to create interactive controls for web-based applications and forms, for accepting the information from the user such as an address, name, phone number, etc, depending on a variety of types of input data and control widgets are available.

<link> - The HTML element <link> is used to establish a connection between the current content and an external resource.

<meta> - The <meta> HTML element represents metadata i.e., information of a information.

<param> - The <param> tag in HTML is used to define a parameter for plug-ins which is associated with <object> element.

<source> - The <source> element is an empty element that provides various media resources for the <image>, <audio>, or <video> elements.  It provides the same media material in several file formats to ensure compatibility with a wide variety of browsers, as image and media file formats are supported by the browsers differently.

<wbr> - The <wbr> tag in HTML stands for word break opportunity and is used to define the position within the text which is treated as a line break by the browser. It is mostly used when the used word is too long and there are chances that the browser may break lines at the wrong place for fitting the text.

<track> -   
The <track> tag specifies text tracks for media components audio and video. This part is employed to specify subtitles, caption files, or different files containing text, that ought to be visible once the media is taking part in. The <track> element is an empty HTML element that is used as a child of the audio and video media components. It allows you to define timed text tracks (or time-based data), for example, to handle subtitles automatically. 

<keygen> - It is used to specify a key-pair generator in a HTML form. A private and public key will be generated. The private will be saved in the browser local key storage while a public key will be sent to the server.
Note: The tag is no more recommended.

Below are 25 container tags

<h1> to <h6></h1>to</h6> - This is meant for headings. H1 is the main heading, H2 is secondary, etc.

<p></p> -   It create a new paragraph

<div></div> - A container for a block of content

<span></span> - A container for inline content, such as content inside a paragraph

<em></em> - Gives the contained text emphasis (usually as italics).

<strong></strong> - It gives a bold text

<title></title> - It gives a document a title.

<head></head> - It contains important information about the document which are machine-readable.

<a></a> - This create a link that can connect to a another webpage

<section></section> - defines the section of documents such as chapters, headers, footers or any other sections. 

<ul></ul> - creates an unordered list

<ol></ol> - creates an ordered list

<li></li> - creates bullet list

<footer></footer> - This is a semantic tag that defines the footer of a document.

<aside></aside> - the tag defines some content aside from the content it is placed in.

<code></code> - The <code> tag is used to define a piece of computer code.

<textarea></textarea> - it allows multi-line text input. It commonly used in a form.

<th></th> - The <th> tag defines a header cell in an HTML table.

<progress></progress> - The <progress> tag represents the completion progress of a task.

<blockquote></blockquote> - The <blockquote> tag specifies a section that is quoted from another source.

<button></button> - The <button> tag defines a clickable button. It is commonly used after filling a form in a website. 

<legend></legend> - The <legend> tag defines a caption for the <fieldset> element.

<main></main> - The <main> tag defines the main content of a document. 

<option></option> - The <option> tag defines an option in a select list.

<script></script> - The <script> tag is used to embed a client-side script (JavaScript).

<svg></svg> - The <svg> tag defines a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

RESOURCES
https://calltutors.com/blog/importance-of-html
https://developer.mozilla.org
https://matthewjamestaylor.com/empty-tags
https://www.washington.edu/accesscomputing/webd2/student/unit2/common_tags.html
https://www.geeksforgeeks.org/what-are-empty-elements-in-html/
www.w3schools.com