<!DOCTYPE html>
<html lang="en">
<head>
<!-- ================== META / SEO ================== -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BMI Calculator – Fast Body Mass Index Calculator (Metric)</title>
<meta name="description" content="Use this free online BMI Calculator to instantly calculate your Body Mass Index using metric units (cm, kg). Understand your BMI category and learn how BMI works." />
<!-- Open Graph -->
<meta property="og:title" content="BMI Calculator – Fast Body Mass Index Calculator (Metric)" />
<meta property="og:description" content="Instantly calculate your BMI using height in cm and weight in kg. See your BMI category and learn what your result means." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/bmi-calculator" />
<meta property="og:image" content="https://example.com/static/bmi-calculator-cover.png" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="BMI Calculator – Fast Body Mass Index Calculator (Metric)" />
<meta name="twitter:description" content="Free BMI Calculator with instant results, clean interface, and BMI category explanation." />
<!-- ================== CSS (INLINE, MOBILE-FIRST) ================== -->
<style>
:root {
--bg: #050816;
--bg-soft: rgba(15, 23, 42, 0.85);
--bg-soft-alt: rgba(15, 23, 42, 0.96);
--accent: #38bdf8;
--accent-soft: rgba(56, 189, 248, 0.16);
--accent-strong: #0ea5e9;
--text: #e5e7eb;
--text-muted: #9ca3af;
--border-subtle: rgba(148, 163, 184, 0.3);
--danger: #f97373;
--shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.7);
--radius-lg: 18px;
--radius-xl: 24px;
--focus-ring: 0 0 0 1px rgba(56, 189, 248, 0.8), 0 0 0 4px rgba(56, 189, 248, 0.25);
--transition-fast: 180ms ease-out;
--transition-med: 220ms ease;
--max-content-width: 960px;
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background:
radial-gradient(circle at top, #1f2937 0, transparent 60%),
radial-gradient(circle at bottom, #0f172a 0, transparent 55%),
var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
display: flex;
flex-direction: column;
}
a {
color: var(--accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* ======== Layout ======== */
.page-shell {
width: 100%;
max-width: 1120px;
margin: 0 auto;
padding: 1.75rem 1.25rem 3rem;
display: flex;
flex-direction: column;
gap: 2.5rem;
}
header {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.logo-mark {
width: 32px;
height: 32px;
border-radius: 999px;
background: radial-gradient(circle at 30% 10%, #facc15, transparent 55%),
radial-gradient(circle at 70% 90%, #38bdf8, transparent 55%),
linear-gradient(135deg, #1f2937, #020617);
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.4), 0 12px 35px rgba(15, 23, 42, 0.9);
}
.logo-text {
font-weight: 600;
letter-spacing: 0.03em;
font-size: 0.98rem;
}
.nav-links {
display: flex;
gap: 0.75rem;
font-size: 0.86rem;
color: var(--text-muted);
}
.nav-links a {
padding: 0.3rem 0.7rem;
border-radius: 999px;
border: 1px solid transparent;
transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.nav-links a:hover {
background: rgba(15, 23, 42, 0.9);
border-color: rgba(148, 163, 184, 0.5);
color: var(--text);
transform: translateY(-1px);
text-decoration: none;
}
.hero {
display: grid;
gap: 1.25rem;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent-soft);
}
.hero-pill {
padding: 0.18rem 0.7rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(56, 189, 248, 0.4);
color: var(--accent);
}
.hero-title {
font-size: 1.9rem;
line-height: 1.1;
letter-spacing: -0.03em;
}
.hero-highlight {
background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.4), transparent 55%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-subtitle {
max-width: 34rem;
color: var(--text-muted);
font-size: 0.97rem;
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
font-size: 0.75rem;
color: var(--text-muted);
}
.meta-pill {
padding: 0.25rem 0.7rem;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.4);
background: rgba(15, 23, 42, 0.7);
}
/* ======== Card ======== */
.main-grid {
display: grid;
gap: 2rem;
}
.bmi-card {
border-radius: var(--radius-xl);
background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.16), transparent 55%),
radial-gradient(circle at 100% 0, rgba(129, 140, 248, 0.14), transparent 50%),
var(--bg-soft);
border: 1px solid rgba(148, 163, 184, 0.5);
box-shadow: var(--shadow-soft);
padding: 1.75rem 1.5rem 1.7rem;
position: relative;
overflow: hidden;
isolation: isolate;
}
.bmi-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.06), transparent 40%);
opacity: 0.9;
pointer-events: none;
mix-blend-mode: screen;
}
.bmi-card-inner {
position: relative;
z-index: 1;
display: grid;
gap: 1.3rem;
}
.bmi-header {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}
.bmi-header-text h2 {
margin: 0;
font-size: 1.3rem;
letter-spacing: -0.02em;
}
.bmi-header-text p {
margin: 0.15rem 0 0;
font-size: 0.85rem;
color: var(--text-muted);
}
.badge {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 0.3rem 0.7rem;
border-radius: 999px;
border: 1px solid rgba(56, 189, 248, 0.65);
color: var(--accent);
background: rgba(15, 23, 42, 0.9);
white-space: nowrap;
}
form {
display: grid;
gap: 1.25rem;
}
.field-row {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 1rem;
}
.field {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
label {
font-size: 0.8rem;
font-weight: 500;
color: var(--text);
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 0.3rem;
}
.label-meta {
font-size: 0.7rem;
color: var(--text-muted);
}
.input-shell {
position: relative;
display: flex;
align-items: center;
border-radius: 999px;
border: 1px solid var(--border-subtle);
background: linear-gradient(to right, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.92));
padding: 0.35rem 0.75rem 0.35rem 0.85rem;
gap: 0.5rem;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}
.input-shell:hover {
border-color: rgba(148, 163, 184, 0.9);
transform: translateY(-0.5px);
background: linear-gradient(to right, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.88));
}
.input-shell:focus-within {
border-color: rgba(56, 189, 248, 0.9);
box-shadow: var(--focus-ring);
}
.input-prefix {
font-size: 0.8rem;
color: var(--text-muted);
}
input[type="number"] {
border: none;
outline: none;
background: transparent;
color: var(--text);
width: 100%;
font-size: 0.9rem;
font-variant-numeric: tabular-nums;
}
input[type="number"]::placeholder {
color: rgba(148, 163, 184, 0.7);
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
.input-unit {
font-size: 0.8rem;
padding: 0.1rem 0.45rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(148, 163, 184, 0.4);
color: var(--text-muted);
}
.error-text {
font-size: 0.74rem;
color: var(--danger);
min-height: 0.9rem;
}
.button-row {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
justify-content: space-between;
}
.actions {
display: flex;
gap: 0.6rem;
align-items: center;
flex-wrap: wrap;
}
button {
font: inherit;
cursor: pointer;
border-radius: 999px;
padding: 0.5rem 1.15rem;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
font-size: 0.85rem;
transition: background-color var(--transition-med), color var(--transition-med), border-color var(--transition-med), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
background: transparent;
color: var(--text);
}
.btn-primary {
background: linear-gradient(135deg, var(--accent-strong), #22c55e);
color: #0b1120;
border-color: rgba(15, 23, 42, 0.9);
box-shadow: 0 16px 35px rgba(8, 47, 73, 0.65);
font-weight: 600;
}
.btn-primary:hover {
transform: translateY(-1px) translateZ(0);
box-shadow: 0 20px 45px rgba(8, 47, 73, 0.8);
background: linear-gradient(135deg, #06b6d4, #22c55e);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: 0 7px 18px rgba(8, 47, 73, 0.7);
}
.btn-secondary {
border-color: rgba(148, 163, 184, 0.6);
background: rgba(15, 23, 42, 0.9);
color: var(--text-muted);
}
.btn-secondary:hover {
border-color: rgba(248, 250, 252, 0.8);
color: var(--text);
background: rgba(15, 23, 42, 1);
}
button:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.helper-text {
font-size: 0.77rem;
color: var(--text-muted);
}
/* ======== Result Panel ======== */
.result-panel {
margin-top: 0.75rem;
padding: 0.9rem 0.9rem 0.85rem;
border-radius: var(--radius-lg);
border: 1px solid rgba(148, 163, 184, 0.6);
background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.92));
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr);
gap: 0.9rem;
align-items: center;
opacity: 0;
transform: translateY(6px);
pointer-events: none;
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.result-panel.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.result-main {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.result-label {
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
}
.result-value-row {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
}
.result-bmi {
font-size: 1.4rem;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.result-category-pill {
font-size: 0.76rem;
padding: 0.18rem 0.6rem;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.8);
background: rgba(15, 23, 42, 0.96);
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.category-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background-color: var(--accent);
}
.result-caption {
font-size: 0.8rem;
color: var(--text-muted);
}
.result-scale {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.scale-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.72rem;
color: var(--text-muted);
gap: 0.6rem;
}
.scale-labels {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
}
.scale-label {
padding: 0.12rem 0.5rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(148, 163, 184, 0.4);
}
.scale-bar {
position: relative;
height: 6px;
border-radius: 999px;
overflow: hidden;
background: linear-gradient(90deg, #4b5563 0%, #22c55e 45%, #eab308 60%, #fb7185 85%);
}
.scale-indicator {
position: absolute;
width: 10px;
height: 10px;
border-radius: 999px;
border: 1px solid #020617;
box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.6), 0 0 0 4px rgba(56, 189, 248, 0.35);
background: #f9fafb;
top: 50%;
transform: translate(-50%, -50%);
left: 5%;
transition: left 240ms ease-out;
}
.result-panel--underweight .scale-indicator {
left: 10%;
}
.result-panel--normal .scale-indicator {
left: 35%;
}
.result-panel--overweight .scale-indicator {
left: 65%;
}
.result-panel--obese .scale-indicator {
left: 88%;
}
/* ======== Content / SEO Sections ======== */
main {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.content-section {
max-width: var(--max-content-width);
margin: 0 auto;
display: grid;
gap: 1.75rem;
}
.prose-block {
background: var(--bg-soft-alt);
border-radius: var(--radius-xl);
border: 1px solid var(--border-subtle);
padding: 1.6rem 1.4rem 1.6rem;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.7);
}
.content-section h2 {
font-size: 1.35rem;
margin: 0 0 0.75rem;
letter-spacing: -0.02em;
}
.content-section h3 {
font-size: 1.02rem;
margin: 1.2rem 0 0.25rem;
}
.content-section p {
font-size: 0.92rem;
color: var(--text-muted);
margin: 0.3rem 0;
line-height: 1.5;
}
.content-section ul {
padding-left: 1.2rem;
margin: 0.3rem 0;
color: var(--text-muted);
font-size: 0.9rem;
}
.content-section li {
margin: 0.18rem 0;
}
.anchor-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.8rem;
margin-top: 0.5rem;
}
.anchor-links a {
padding: 0.18rem 0.6rem;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.6);
background: rgba(15, 23, 42, 0.9);
}
.faq-list {
margin-top: 0.4rem;
}
.faq-item {
border-top: 1px solid rgba(31, 41, 55, 0.9);
padding-top: 0.65rem;
margin-top: 0.65rem;
}
.faq-item:first-of-type {
border-top: none;
padding-top: 0;
margin-top: 0.1rem;
}
/* ======== Footer ======== */
footer {
margin-top: 1.25rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(31, 41, 55, 0.9);
font-size: 0.8rem;
color: var(--text-muted);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.75rem;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
/* ======== Responsive ======== */
@media (min-width: 640px) {
.page-shell {
padding: 2.25rem 1.75rem 3.25rem;
}
.bmi-card {
padding: 2rem 1.9rem 1.9rem;
}
.hero-title {
font-size: 2.2rem;
}
.content-section {
grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.5fr);
align-items: flex-start;
gap: 1.8rem;
}
}
@media (min-width: 900px) {
.main-grid {
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr);
align-items: flex-start;
}
.hero {
grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.4fr);
align-items: center;
}
.hero-title {
font-size: 2.4rem;
}
}
@media (max-width: 480px) {
.field-row {
grid-template-columns: 1fr;
}
.result-panel {
grid-template-columns: 1fr;
}
.button-row {
align-items: flex-start;
gap: 0.9rem;
}
.actions {
width: 100%;
justify-content: flex-start;
}
}
</style>
<!-- ================== STRUCTURED DATA (JSON-LD) ================== -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebApplication",
"name": "BMI Calculator",
"url": "https://example.com/bmi-calculator",
"description": "A fast, free web-based BMI Calculator using metric units (cm and kg) to estimate Body Mass Index and weight category.",
"applicationCategory": "HealthApplication",
"operatingSystem": "Web",
"inLanguage": "en",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"creator": {
"@type": "Organization",
"name": "Health Metrics Studio"
}
},
{
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What is a BMI calculator?",
"acceptedAnswer": {
"@type": "Answer",
"text": "A BMI calculator is a simple tool that uses your height and weight to estimate your Body Mass Index. The BMI number helps categorize your weight as underweight, normal, overweight, or obese."
}
},
{
"@type": "Question",
"name": "How do you calculate BMI with metric units?",
"acceptedAnswer": {
"@type": "Answer",
"text": "To calculate BMI using metric units, divide your weight in kilograms by your height in meters squared. The formula is: BMI = weight (kg) / (height (m) × height (m))."
}
},
{
"@type": "Question",
"name": "Is BMI a perfect measure of health?",
"acceptedAnswer": {
"@type": "Answer",
"text": "BMI is a quick screening tool, not a diagnosis. It does not directly measure body fat, muscle mass, or overall health. Always discuss your BMI result with a healthcare professional for a full assessment."
}
},
{
"@type": "Question",
"name": "What are the standard BMI categories?",
"acceptedAnswer": {
"@type": "Answer",
"text": "The commonly used BMI categories for adults are: underweight (below 18.5), normal weight (18.5 to 24.9), overweight (25 to 29.9), and obese (30 and above)."
}
}
]
}
]
}
</script>
</head>
<body>
<div class="page-shell">
<!-- ================== HEADER / HERO ================== -->
<header>
<div class="nav-bar" aria-label="Primary">
<div class="logo" aria-label="BMI Calculator Home">
<div class="logo-mark" aria-hidden="true"></div>
<span class="logo-text">Health Metrics Studio</span>
</div>
<nav class="nav-links" aria-label="In-page navigation">
<a href="#bmi-calculator-card">Calculator</a>
<a href="#how-bmi-works">How it works</a>
<a href="#bmi-faq">FAQ</a>
</nav>
</div>
<section class="hero" aria-labelledby="page-title">
<div>
<div class="hero-eyebrow">
<span class="hero-pill">Instant BMI dashboard</span>
<span>Metric · Privacy-friendly</span>
</div>
<h1 id="page-title" class="hero-title">
Calculate your <span class="hero-highlight">Body Mass Index (BMI)</span> in seconds.
</h1>
<p class="hero-subtitle">
Use this free BMI calculator to estimate your Body Mass Index using height in centimeters and weight in kilograms.
Get a clear result, see your BMI category, and understand what your number means.
</p>
<div class="hero-meta" aria-hidden="true">
<span class="meta-pill">No signup</span>
<span class="meta-pill">Works on mobile</span>
<span class="meta-pill">Designed for humans, not spreadsheets</span>
</div>
</div>
</section>
</header>
<!-- ================== MAIN ================== -->
<main>
<section class="main-grid" aria-label="BMI calculator section">
<!-- ===== Calculator Card ===== -->
<article id="bmi-calculator-card" class="bmi-card" aria-label="BMI calculator card">
<div class="bmi-card-inner">
<div class="bmi-header">
<div class="bmi-header-text">
<h2>BMI Calculator (Metric)</h2>
<p>Enter your height in centimeters and weight in kilograms to calculate your BMI.</p>
</div>
<div class="badge" aria-hidden="true">Real-time result</div>
</div>
<form id="bmiForm" novalidate aria-describedby="bmi-helper">
<div class="field-row">
<!-- Height -->
<div class="field">
<label for="height">
Height
<span class="label-meta">in centimeters (cm)</span>
</label>
<div class="input-shell">
<span class="input-prefix" aria-hidden="true">H</span>
<input
id="height"
name="height"
type="number"
inputmode="decimal"
min="50"
max="260"
step="0.1"
placeholder="e.g. 170"
aria-required="true"
aria-describedby="height-error"
/>
<span class="input-unit" aria-hidden="true">cm</span>
</div>
<p id="height-error" class="error-text" role="alert" aria-live="polite"></p>
</div>
<!-- Weight -->
<div class="field">
<label for="weight">
Weight
<span class="label-meta">in kilograms (kg)</span>
</label>
<div class="input-shell">
<span class="input-prefix" aria-hidden="true">W</span>
<input
id="weight"
name="weight"
type="number"
inputmode="decimal"
min="20"
max="300"
step="0.1"
placeholder="e.g. 65"
aria-required="true"
aria-describedby="weight-error"
/>
<span class="input-unit" aria-hidden="true">kg</span>
</div>
<p id="weight-error" class="error-text" role="alert" aria-live="polite"></p>
</div>
</div>
<div class="button-row">
<div class="actions">
<button type="submit" class="btn-primary" id="calculateBtn">
Calculate BMI
</button>
<button type="button" class="btn-secondary" id="resetBtn">
Reset
</button>
</div>
<p id="bmi-helper" class="helper-text">
Your data is processed only in your browser. We do not store or send your values anywhere.
</p>
</div>
<!-- Result panel -->
<section
id="bmi-result-panel"
class="result-panel"
aria-live="polite"
aria-atomic="true"
>
<div class="result-main">
<span class="result-label">Your BMI result</span>
<div class="result-value-row">
<span id="bmi-value" class="result-bmi">—</span>
<span id="bmi-category-pill" class="result-category-pill">
<span class="category-dot"></span>
<span id="bmi-category-text">Awaiting input</span>
</span>
</div>
<p id="bmi-caption" class="result-caption">
Enter your height and weight and select "Calculate BMI" to see your result.
</p>
</div>
<div class="result-scale">
<div class="scale-row">
<span>Adult BMI categories*</span>
<span>18+ years</span>
</div>
<div class="scale-labels">
<span class="scale-label">Underweight < 18.5</span>
<span class="scale-label">Normal 18.5–24.9</span>
<span class="scale-label">Overweight 25–29.9</span>
<span class="scale-label">Obese ≥ 30</span>
</div>
<div class="scale-bar">
<div id="scale-indicator" class="scale-indicator" aria-hidden="true"></div>
</div>
</div>
</section>
</form>
</div>
</article>
<!-- ===== Side copy (summary) ===== -->
<aside aria-label="BMI categories summary">
<div class="prose-block">
<h2>What your BMI result means</h2>
<p>
Body Mass Index (BMI) compares your weight to your height. It is commonly used as a
quick screening tool to group weight into categories, such as underweight, normal
weight, overweight, or obese.
</p>
<p>
The BMI calculator on this page uses the standard metric formula:
<strong>BMI = weight (kg) / (height (m) × height (m))</strong>.
</p>
<ul>
<li><strong>Underweight</strong>: BMI below 18.5</li>
<li><strong>Normal weight</strong>: BMI between 18.5 and 24.9</li>
<li><strong>Overweight</strong>: BMI between 25 and 29.9</li>
<li><strong>Obese</strong>: BMI 30 or higher</li>
</ul>
<p>
BMI does not tell the full story about your health, but it can highlight when it may be
useful to talk to a clinician about your weight and lifestyle.
</p>
</div>
</aside>
</section>
<!-- ===== Informational SEO Content ===== -->
<section id="how-bmi-works" class="content-section" aria-label="How BMI works">
<article class="prose-block">
<h2>How to use this BMI Calculator correctly</h2>
<p>
To get the most accurate result from this BMI Calculator, measure your height without
shoes and your weight with light clothing. Because this calculator uses metric units, you
will enter your height in centimeters and your weight in kilograms.
</p>
<h3>Step-by-step BMI calculation example</h3>
<p>
Imagine you are 170 cm tall and weigh 65 kg. First convert your height from centimeters
to meters (170 cm = 1.7 m). Then multiply your height in meters by itself:
1.7 × 1.7 = 2.89. Finally, divide your weight by this number:
65 ÷ 2.89 ≈ 22.5. Your BMI is about 22.5, which falls in the normal range.
</p>
<h3>Who is BMI useful for?</h3>
<p>
BMI is designed for most adults aged 18 and over. It is less accurate for athletes with a
lot of muscle, pregnant people, and older adults with reduced muscle mass. In these
situations, your BMI may sit outside the “normal” range even if your health is good.
</p>
<h3>Limitations of BMI</h3>
<p>
BMI does not directly measure body fat, muscle distribution, or metabolic health. It is
one simple number, not a diagnosis. Use it as a starting point for a conversation with a
healthcare professional, not the final word on your health.
</p>
<div class="anchor-links" aria-label="Quick navigation">
<a href="#bmi-calculator-card">Back to BMI calculator</a>
<a href="#bmi-faq">Skip to BMI FAQ</a>
</div>
</article>
<article id="bmi-faq" class="prose-block" aria-label="BMI frequently asked questions">
<h2>Frequently asked questions about BMI</h2>
<div class="faq-list">
<div class="faq-item">
<h3>Is this BMI calculator free to use?</h3>
<p>
Yes. This BMI calculator is completely free and runs directly in your browser. You
do not need to create an account, and we do not collect or store any personal data.
</p>
</div>
<div class="faq-item">
<h3>What BMI range is considered healthy?</h3>
<p>
Many guidelines describe a BMI between 18.5 and 24.9 as the “normal” or healthy
range for most adults. However, what is healthy for you also depends on factors like
age, sex, body composition, and medical history.
</p>
</div>
<div class="faq-item">
<h3>Can children use this BMI calculator?</h3>
<p>
Children and teenagers use age- and sex-specific growth charts rather than the
standard adult categories. For anyone under 18 years old, talk with a pediatrician or
healthcare professional about how to interpret BMI.
</p>
</div>
<div class="faq-item">
<h3>Should I change my lifestyle based only on BMI?</h3>
<p>
No. BMI is just one screening tool. Any decision about changing diet, exercise, or
medications should be made together with a qualified healthcare professional who can
look at your full health picture, not only your BMI number.
</p>
</div>
</div>
</article>
</section>
</main>
<!-- ================== FOOTER ================== -->
<footer>
<span>© <span id="currentYear"></span> Health Metrics Studio. This BMI calculator is for informational purposes only and is not a medical diagnosis.</span>
<div class="footer-links">
<a href="#bmi-calculator-card">Calculator</a>
<a href="#how-bmi-works">How BMI works</a>
<a href="#bmi-faq">BMI FAQ</a>
</div>
</footer>
</div>
<!-- ================== JAVASCRIPT (VANILLA, MODULAR) ================== -->
<script>
(function () {
'use strict';
var BMIApp = (function () {
var form = document.getElementById('bmiForm');
var heightInput = document.getElementById('height');
var weightInput = document.getElementById('weight');
var heightError = document.getElementById('height-error');
var weightError = document.getElementById('weight-error');
var resultPanel = document.getElementById('bmi-result-panel');
var bmiValueEl = document.getElementById('bmi-value');
var bmiCategoryTextEl = document.getElementById('bmi-category-text');
var bmiCaptionEl = document.getElementById('bmi-caption');
var scaleIndicator = document.getElementById('scale-indicator');
var calculateBtn = document.getElementById('calculateBtn');
var resetBtn = document.getElementById('resetBtn');
var currentYearEl = document.getElementById('currentYear');
function formatBMI(value) {
return value.toFixed(1);
}
function calculateBMIValue(heightCm, weightKg) {
var heightM = heightCm / 100;
if (!heightM || heightM <= 0) return NaN;
return weightKg / (heightM * heightM);
}
function getBMICategory(bmi) {
if (isNaN(bmi)) {
return {
label: 'Awaiting input',
description: 'Enter your height and weight to see your BMI result.',
cssModifier: ''
};
}
if (bmi < 18.5) {
return {
label: 'Underweight',
description: 'Your BMI is below the standard range for most adults. Consider discussing your weight and nutrition with a healthcare professional.',
cssModifier: 'result-panel--underweight'
};
}
if (bmi < 25) {
return {
label: 'Normal weight',
description: 'Your BMI is in the commonly used normal range. Continue to focus on balanced eating, movement, and regular health checkups.',
cssModifier: 'result-panel--normal'
};
}
if (bmi < 30) {
return {
label: 'Overweight',
description: 'Your BMI is above the normal range for most adults. You may benefit from a conversation with a clinician about lifestyle and long-term health.',
cssModifier: 'result-panel--overweight'
};
}
return {
label: 'Obese',
description: 'Your BMI falls in the obese range. BMI is only one indicator, so talk with a healthcare professional about your overall health and options.',
cssModifier: 'result-panel--obese'
};
}
function clearErrors() {
heightError.textContent = '';
weightError.textContent = '';
heightInput.removeAttribute('aria-invalid');
weightInput.removeAttribute('aria-invalid');
}
function validateInputs() {
clearErrors();
var rawHeight = heightInput.value.trim();
var rawWeight = weightInput.value.trim();
var height = rawHeight === '' ? NaN : parseFloat(rawHeight);
var weight = rawWeight === '' ? NaN : parseFloat(rawWeight);
var isValid = true;
if (!rawHeight) {
heightError.textContent = 'Please enter your height in centimeters.';
heightInput.setAttribute('aria-invalid', 'true');
isValid = false;
} else if (!isFinite(height) || height <= 0) {
heightError.textContent = 'Height must be a positive number.';
heightInput.setAttribute('aria-invalid', 'true');
isValid = false;
}
if (!rawWeight) {
weightError.textContent = 'Please enter your weight in kilograms.';
weightInput.setAttribute('aria-invalid', 'true');
isValid = false;
} else if (!isFinite(weight) || weight <= 0) {
weightError.textContent = 'Weight must be a positive number.';
weightInput.setAttribute('aria-invalid', 'true');
isValid = false;
}
if (!isValid) {
return null;
}
return {
heightCm: height,
weightKg: weight
};
}
function updateResultUI(bmi) {
var category = getBMICategory(bmi);
resultPanel.classList.remove(
'result-panel--underweight',
'result-panel--normal',
'result-panel--overweight',
'result-panel--obese'
);
if (!isNaN(bmi)) {
bmiValueEl.textContent = formatBMI(bmi);
} else {
bmiValueEl.textContent = '—';
}
bmiCategoryTextEl.textContent = category.label;
bmiCaptionEl.textContent = category.description;
if (category.cssModifier) {
resultPanel.classList.add(category.cssModifier);
}
if (!resultPanel.classList.contains('is-visible')) {
setTimeout(function () {
resultPanel.classList.add('is-visible');
}, 20);
}
}
function resetForm() {
form.reset();
clearErrors();
resultPanel.classList.remove(
'is-visible',
'result-panel--underweight',
'result-panel--normal',
'result-panel--overweight',
'result-panel--obese'
);
bmiValueEl.textContent = '—';
bmiCategoryTextEl.textContent = 'Awaiting input';
bmiCaptionEl.textContent = 'Enter your height and weight and select "Calculate BMI" to see your result.';
scaleIndicator.style.left = '5%';
heightInput.focus();
}
function handleSubmit(event) {
event.preventDefault();
var values = validateInputs();
if (!values) return;
var bmi = calculateBMIValue(values.heightCm, values.weightKg);
if (!isFinite(bmi) || bmi <= 0) {
bmiValueEl.textContent = '—';
bmiCategoryTextEl.textContent = 'Unable to calculate';
bmiCaptionEl.textContent = 'Please double-check that your height and weight are valid numbers.';
return;
}
updateResultUI(bmi);
}
function bindEvents() {
form.addEventListener('submit', handleSubmit);
resetBtn.addEventListener('click', resetForm);
form.addEventListener('keydown', function (event) {
if (event.key === 'Enter' && event.target.tagName === 'INPUT') {
event.preventDefault();
calculateBtn.click();
}
});
function softPreview() {
var values = validateInputs();
if (!values) return;
var bmi = calculateBMIValue(values.heightCm, values.weightKg);
if (!isFinite(bmi) || bmi <= 0) return;
var clamped = Math.max(15, Math.min(40, bmi));
var percent = 5 + ((clamped - 15) / (40 - 15)) * 90;
scaleIndicator.style.left = percent + '%';
}
heightInput.addEventListener('input', function () {
clearErrors();
softPreview();
});
weightInput.addEventListener('input', function () {
clearErrors();
softPreview();
});
}
function initUtilities() {
if (currentYearEl) {
currentYearEl.textContent = new Date().getFullYear();
}
}
function init() {
bindEvents();
initUtilities();
}
return {
init: init
};
})();
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', BMIApp.init);
} else {
BMIApp.init();
}
})();
</script>
</body>
</html>
