Hospital Management System

A semantic HTML5-only frontend for healthcare administration

Pure HTML5 · No CSS · No JavaScript · No Frameworks

Live Demo · Report Bug · Request Feature

---

📋 Description

Hospital Management System (HMS) is a complete, portfolio-worthy frontend for healthcare administration built entirely with semantic HTML5. This project demonstrates that a fully functional multi-page web application can be structured using only native HTML — no stylesheets, no scripts, and no external dependencies.

Designed as a learning resource and open-source showcase, HMS covers all essential hospital modules: patient records, doctor directories, appointment scheduling, pharmacy inventory, billing, analytics reports, and contact management.

---

✨ Features

• 8 Complete Pages — Dashboard, Patients, Doctors, Appointments, Medicines, Billing, Reports, and Contact
• 100% HTML5 — Zero CSS, JavaScript, or framework dependencies
• Semantic Markup — Proper use of <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>
• Rich Data Tables — Accessible tables with <caption>, <thead>, <tbody>, <tfoot>, and scope attributes
• Interactive Forms — Search, registration, scheduling, billing, and contact forms with validation attributes
• Accessibility First — Skip links, ARIA labels, semantic headings, and screen-reader-friendly structure
• GitHub Pages Ready — Automatic deployment via GitHub Actions on every push to main
• Custom SVG Branding — Original icon and favicon designed for the project
• Production Repository — Complete with LICENSE, .gitignore, CI/CD workflow, and documentation

---

📸 Screenshots

Dashboard	Patients
Open index.html in your browser	Open pages/patients.html in your browser

Appointments	Billing
Open pages/appointments.html	Open pages/billing.html

Note: Since this project uses no CSS, pages render with browser-default styling. This is intentional — the focus is on semantic structure and HTML5 element mastery.

---

🌐 Live Demo

Visit the live site: html-hospital-management.roboticela.com

After deploying to GitHub Pages, the site will also be available at: https://muhammadshahsawar.github.io/HTML-Hospital-Management/

---

🚀 Installation

No build tools, package managers, or runtime dependencies required.

Option 1: Clone the Repository

git clone https://github.com/MuhammadShahsawar/HTML-Hospital-Management.git
cd HTML-Hospital-Management

Option 2: Download ZIP

1. Go to github.com/MuhammadShahsawar/HTML-Hospital-Management
2. Click Code → Download ZIP
3. Extract the archive to your preferred location

---

📖 Usage

Open any HTML file directly in your web browser:

# Windows
start index.html

# macOS
open index.html

# Linux
xdg-open index.html

Navigation

Page	File	Description
Dashboard	index.html	Overview, statistics, and quick actions
Patients	pages/patients.html	Patient records, search, and registration
Doctors	pages/doctors.html	Medical staff directory by department
Appointments	pages/appointments.html	Schedule and manage appointments
Medicines	pages/medicines.html	Pharmacy inventory and prescriptions
Billing	pages/billing.html	Invoices, payments, and financial summary
Reports	pages/reports.html	Analytics and compliance reports
Contact	pages/contact.html	Contact form, FAQ, and location

Local Development Server (Optional)

For a better local experience with proper relative paths:

# Python 3
python -m http.server 8000

# Node.js (if installed)
npx serve .

Then visit http://localhost:8000

---

📁 Project Structure

HTML-Hospital-Management/
├── .github/
│   └── workflows/
│       └── deploy.yml          # GitHub Pages CI/CD workflow
├── assets/
│   ├── icon.svg                # Project logo (128×128)
│   ├── favicon.svg             # Browser favicon (32×32)
│   └── preview.png             # Social preview image
├── pages/
│   ├── patients.html           # Patient management
│   ├── doctors.html            # Doctor directory
│   ├── appointments.html       # Appointment scheduling
│   ├── medicines.html          # Pharmacy inventory
│   ├── billing.html            # Billing & finance
│   ├── reports.html            # Reports & analytics
│   └── contact.html            # Contact & support
├── index.html                  # Dashboard (home page)
├── README.md                   # Project documentation
├── LICENSE                     # MIT License
└── .gitignore                  # Git ignore rules

---

🏷️ HTML Features Demonstrated

This project showcases a comprehensive range of HTML5 elements:

Document Structure

<!DOCTYPE html>, <html lang>, <head>, <body>, <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <hgroup>

Text & Typography

<h1>–<h6>, <p>, <blockquote>, <cite>, <q>, <abbr>, <address>, <time>, <mark>, <strong>, <em>, <small>, <sub>, <sup>, <code>, <pre>, <kbd>, <samp>, <var>, <bdi>, <ins>, <del>

Lists

<ul>, <ol>, <li>, <dl>, <dt>, <dd>

Tables

<table>, <caption>, <colgroup>, <col>, <thead>, <tbody>, <tfoot>, <tr>, <th scope>, <td>

Forms

<form>, <fieldset>, <legend>, <label>, <input> (text, email, tel, date, time, month, number, search, checkbox, radio), <select>, <optgroup>, <option>, <textarea>, <button>, <datalist>, <output>

Media & Graphics

<img>, <picture>, <source>, <figure>, <figcaption>, <svg>, <iframe>

Interactive & Semantic

<details>, <summary>, <a>, <hr>, <br>, <wbr>, <progress>, <meter>, <data>

Meta & Links

<meta charset>, <meta viewport>, <meta description>, <link rel="icon">, <link rel="canonical">

---

♿ Accessibility Features

• Skip Navigation Link — Allows keyboard users to bypass navigation and jump to main content
• Semantic Landmarks — Proper use of <header>, <nav>, <main>, <aside>, and <footer>
• ARIA Labels — aria-label, aria-labelledby, and aria-current for enhanced screen reader support
• Table Accessibility — scope attributes on headers, <caption> elements, and logical table structure
• Form Labels — Every input is associated with a <label> element
• Abbreviation Expansion — <abbr title> for acronyms like HMS, HIPAA, ER, DEA
• Language Declaration — <html lang="en"> for proper language identification
• Alternative Text — Descriptive alt attributes on all images
• Time Elements — Machine-readable dates with <time datetime>

---

🌍 Browser Support

Browser	Version	Status
Google Chrome	90+	✅ Supported
Mozilla Firefox	88+	✅ Supported
Microsoft Edge	90+	✅ Supported
Safari	14+	✅ Supported
Opera	76+	✅ Supported

All modern browsers fully support the HTML5 elements used in this project.

---

🤝 Contributing

Contributions are welcome! To contribute:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Contribution Guidelines

• Maintain the HTML5-only constraint — no CSS, JavaScript, or external libraries
• Use semantic HTML elements appropriately
• Ensure all forms have proper labels and fieldsets
• Add aria-* attributes where they improve accessibility
• Keep the navigation consistent across all pages
• Test in multiple browsers before submitting

---

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

---

👤 Author

Muhammad Shahsawar

• GitHub: @MuhammadShahsawar
• Email: muhammad@roboticela.com
• Website: html-hospital-management.roboticela.com

---

🙏 Acknowledgements

• MDN Web Docs — HTML5 reference and best practices
• W3C — Web standards and accessibility guidelines
• GitHub Pages — Free static site hosting
• OpenStreetMap — Map embed on the Contact page
• The open-source community for inspiration and support

---

Built with ❤️ using pure HTML5

⭐ Star this repository if you found it helpful!