A complete banking interface built with pure semantic HTML5 — no CSS, no JavaScript, no frameworks.
HTML Banking System is a portfolio-grade, open-source banking interface that demonstrates the power of semantic HTML5 markup. Every page — from account dashboards to loan applications — is crafted using only standard HTML elements: no stylesheets, no scripts, no build tools, and no external dependencies.
This project is ideal for developers learning semantic HTML, accessibility best practices, and how far pure markup can go in structuring complex application interfaces.
- Dashboard — Account summary, recent transactions, and quick actions
- Accounts — Checking, savings, and business account management
- Transactions — Filterable transaction history with export options
- Loans — Active loan details, payment schedules, and applications
- Credit Cards — Card balances, payments, and new card applications
- Transfers — Internal and external fund transfers with saved recipients
- Login — Secure sign-in and password recovery forms
- Registration — Full new customer onboarding form
- Contact — Support hours, contact form, FAQ, and branch locations
- GitHub Pages — Automatic deployment on every push to
main - 100% HTML5 — Zero CSS, zero JavaScript, zero frameworks
The interface uses browser-default styling to showcase pure semantic structure. Visit the live demo to explore all pages.
🌐 Production: https://html-banking-system.roboticela.com
📦 GitHub Pages: https://muhammadshahsawar.github.io/HTML-Banking-System/
No build step required. Clone the repository and open any HTML file in your browser.
git clone https://github.com/MuhammadShahsawar/HTML-Banking-System.git
cd HTML-Banking-SystemDouble-click index.html or open it from your browser's File menu.
For consistent relative-path behavior during development:
# Python 3
python -m http.server 8080
# Then visit http://localhost:8080- Open
index.htmlto access the Dashboard - Use the navigation menu to visit any section:
pages/accounts.html— Manage accountspages/transactions.html— View transaction historypages/loans.html— Loan managementpages/credit-cards.html— Credit card servicespages/transfers.html— Fund transferspages/login.html— Sign inpages/register.html— Create an accountpages/contact.html— Support and contact
All forms use standard HTML method="get" and are presentational — no backend is included.
HTML-Banking-System/
├── .github/
│ └── workflows/
│ └── deploy.yml # GitHub Pages CI/CD
├── assets/
│ ├── icon.svg # Project logo
│ ├── favicon.svg # Browser favicon
│ └── preview.svg # Social / README preview
├── pages/
│ ├── accounts.html # Account management
│ ├── transactions.html # Transaction history
│ ├── loans.html # Loan services
│ ├── credit-cards.html # Credit card management
│ ├── transfers.html # Fund transfers
│ ├── login.html # User login
│ ├── register.html # New user registration
│ └── contact.html # Contact & support
├── index.html # Dashboard (home page)
├── README.md # Project documentation
├── LICENSE # MIT License
└── .gitignore # Git ignore rules
| Feature | Usage |
|---|---|
| Semantic layout | <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> |
| Data tables | <table>, <caption>, <thead>, <tbody>, <tfoot>, scope attributes |
| Forms | <form>, <fieldset>, <legend>, <label>, <input>, <select>, <textarea> |
| Definition lists | <dl>, <dt>, <dd> for key-value account details |
| Time elements | <time datetime="..."> for dates and timestamps |
| Data elements | <data value="..."> for machine-readable values |
| Abbreviations | <abbr title="..."> for APY, APR, ACH, ET |
| Expandable content | <details> and <summary> for FAQ sections |
| Contact info | <address> for structured contact details |
| Navigation | aria-label, aria-current, aria-labelledby |
| Favicon | <link rel="icon"> with SVG favicon |
| Meta tags | description, viewport, author, keywords |
- Semantic landmarks — Screen readers can navigate by region (
header,main,nav,footer) - ARIA labels —
aria-labelandaria-labelledbyon navigation and sections - Table accessibility —
scopeattributes on headers; captions describe table purpose - Form labels — Every input is associated with a
<label>element - Fieldset grouping — Related form controls grouped with
<fieldset>and<legend> - Current page indication —
aria-current="page"on active navigation links - Abbreviation expansion —
<abbr>elements provide full terms for acronyms - Structured contact —
<address>element for contact information - Language attribute —
lang="en"on every page
| Browser | Supported |
|---|---|
| Google Chrome | ✅ Latest |
| Mozilla Firefox | ✅ Latest |
| Microsoft Edge | ✅ Latest |
| Apple Safari | ✅ Latest |
| Opera | ✅ Latest |
All modern browsers render semantic HTML5 natively. No polyfills or transpilation required.
This repository includes a production-ready GitHub Actions workflow at .github/workflows/deploy.yml.
- Push this repository to GitHub
- Go to Settings → Pages
- Under Build and deployment, set Source to GitHub Actions
- Push to the
mainbranch — deployment runs automatically
The workflow uses official GitHub Actions:
actions/checkout@v4actions/configure-pages@v5actions/upload-pages-artifact@v3actions/deploy-pages@v4
Contributions are welcome! To contribute:
- Fork the repository
- Create a feature branch (
git checkout -b feature/your-feature) - Make your changes using HTML5 only — no CSS or JavaScript
- Commit with a clear message (
git commit -m 'Add feature description') - Push to your branch (
git push origin feature/your-feature) - Open a Pull Request
Please ensure all new pages follow existing semantic patterns and include proper accessibility attributes.
This project is licensed under the MIT License — see the LICENSE file for details.
Muhammad Shawsawar
- GitHub: @MuhammadShahsawar
- Email: muhammad@roboticela.com
- Website: html-banking-system.roboticela.com
- W3C HTML5 Specification — Foundation for semantic markup
- MDN Web Docs — HTML reference and best practices
- Web Content Accessibility Guidelines (WCAG) — Accessibility guidance
- GitHub Pages — Free static site hosting
- GitHub Actions — Continuous deployment
| Field | Value |
|---|---|
| Repository Name | HTML-Banking-System |
| Description | A semantic HTML5-only banking interface — accounts, transactions, loans, credit cards, transfers, login, registration, and contact. No CSS. No JavaScript. |
| Version | 1.0.0 |
| License | MIT |
| Topics | html5, semantic-html, banking, accessibility, github-pages, portfolio, static-site, web-standards, financial-ui, no-javascript |
| Keywords | banking system, HTML5, semantic HTML, accessible web, static banking UI, portfolio project, GitHub Pages, financial interface, pure HTML |
| Tags | v1.0.0, html5, banking, semantic-markup, open-source |