Building an Experiment Protocol Webpage with HTML/CSS
Have you ever shared experiment protocols as Word or PDF files? Versions get tangled, formatting breaks, and "final_FINAL_reallyFINAL.docx" piles up.
Web pages are different. One URL and anyone can see the latest version, displayed cleanly on any device. From lab notebook to web browser โ the evolution of protocols.
HTML: The Document Skeleton
HTML is a tag language that tells the browser "this is a heading," "this is a list." Just as codons in a DNA sequence specify amino acids, HTML tags specify the role of content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Western Blot Protocol</title>
</head>
<body>
<h1>Western Blot Protocol</h1>
<p>Target: EGFR (Epidermal Growth Factor Receptor)</p>
<p>Last updated: 2026-06-27</p>
</body>
</html>Key tags:
<h1>~<h6>: Headings (h1 is largest) โ like Section/Subsection in a paper<p>: Paragraph โ body text<ul>,<ol>: Unordered/ordered lists โ materials list, experiment steps<strong>: Bold text โ emphasize important concentrations, temperatures<a href="...">: Links โ connect to reference papers, product pages
Organizing Materials and Steps with Lists
The core of an experiment protocol is the materials list and step-by-step procedure.
<h2>Required Materials</h2>
<ul>
<li>Primary antibody: Anti-EGFR (1:1000 dilution)</li>
<li>Secondary antibody: Anti-rabbit HRP (1:5000)</li>
<li>PVDF membrane (0.45 ฮผm)</li>
<li>Transfer buffer: 25 mM Tris, 192 mM Glycine, 20% Methanol</li>
</ul>
<h2>Experiment Steps</h2>
<ol>
<li>Prepare SDS-PAGE gel (10% resolving gel + 5% stacking gel)</li>
<li>Protein loading: Load <strong>30 ฮผg</strong> per well</li>
<li>Electrophoresis: <strong>120V, 90 minutes</strong></li>
<li>Transfer to PVDF membrane: <strong>100V, 60 minutes</strong> (on ice)</li>
<li>Blocking: 5% skim milk/TBST, <strong>RT for 1 hour</strong></li>
<li>Primary antibody incubation: 4ยฐC, <strong>overnight</strong></li>
<li>Wash: TBST, 5 min ร 3 times</li>
<li>Secondary antibody incubation: RT, 1 hour</li>
<li>ECL detection</li>
</ol><ul> is for items where order doesn't matter (like materials), <ol> for items where order is important (like experiment steps).
CSS: Styling the Document
CSS is the "clothing" of HTML. Just as the same DNA sequence looks completely different depending on visualization method, the same HTML looks entirely different with CSS.
<style>
body {
font-family: 'Pretendard', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
line-height: 1.7;
color: #1a1a1a;
}
h1 {
color: #2d5a3d;
border-bottom: 3px solid #2d5a3d;
padding-bottom: 8px;
}
h2 {
color: #3d7a5a;
margin-top: 32px;
}
strong {
color: #c0392b;
background: #fef3f2;
padding: 1px 4px;
border-radius: 3px;
}
li {
margin-bottom: 8px;
}
</style>Key CSS properties:
font-family: Font โ the starting point for readabilitymax-width+margin: 0 auto: Center alignment โ comfortable reading widthline-height: Line spacing โ 1.7 is optimal for academic documentscolor: Text color โ useful for emphasizing key valuesborder-bottom: Bottom border โ section separation
Organizing Conditions with Tables
Organizing experiment conditions in tables makes comparison easy at a glance.
<h2>Antibody Conditions Summary</h2>
<table>
<thead>
<tr>
<th>Antibody</th>
<th>Dilution Ratio</th>
<th>Conditions</th>
<th>Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td>Anti-EGFR (Primary)</td>
<td>1:1000</td>
<td>4ยฐC</td>
<td>Overnight</td>
</tr>
<tr>
<td>Anti-rabbit HRP (Secondary)</td>
<td>1:5000</td>
<td>Room temperature</td>
<td>1 hour</td>
</tr>
</tbody>
</table>
<style>
table {
width: 100%;
border-collapse: collapse;
margin: 16px 0;
}
th, td {
border: 1px solid #ddd;
padding: 10px 14px;
text-align: left;
}
th {
background: #f0f7f4;
font-weight: 600;
color: #2d5a3d;
}
tr:hover {
background: #f9fafb;
}
</style>Creating Warning Boxes
Make critical notes stand out in protocols.
<div class="warning">
<strong>Warning:</strong> Transfer must be performed on ice.
Transfer buffer containing methanol generates heat,
and overheating causes protein denaturation.
</div>
<div class="tip">
<strong>Tip:</strong> PVDF membrane must be activated
in methanol for 30 seconds before use. Dry membranes won't bind protein.
</div>
<style>
.warning {
background: #fef3f2;
border-left: 4px solid #e74c3c;
padding: 16px 20px;
border-radius: 0 8px 8px 0;
margin: 16px 0;
line-height: 1.6;
}
.tip {
background: #f0f7f4;
border-left: 4px solid #2d5a3d;
padding: 16px 20px;
border-radius: 0 8px 8px 0;
margin: 16px 0;
line-height: 1.6;
}
</style>Try It Yourself (Faded Example)
Fill in the blanks to create a materials list in HTML.
<h2>Required Materials</h2>< ><li>PBS buffer (pH 7.4)</li><li>Trypsin-EDTA (0.25%)</li><li>FBS (10%)</li></ >
Common Errors & Solutions
Q: Text is too small to read
Set font-size: 16px or higher on body. The browser default is 16px, but specifying it explicitly is good practice.
Q: What happens if I don't close a tag?
HTML is forgiving and won't throw an error, but layouts will look unexpected. If you open a tag (<ul>), always close it (</ul>).
Q: CSS isn't being applied
Check if the <style> tag is inside <head>, and if selector spelling is correct. Class selectors start with a dot (.) like .warning.
Q: Should <script> only go in <head>? Can't I put it in <body>?
Both work, but in practice scripts are often placed at the bottom of <body>. Two reasons:
- Browsers read HTML top to bottom. A
<script>in<head>runs before the page is drawn, potentially slowing loading. - If
document.getElementById("result")runs from<head>, the<body>elements don't exist yet, returningnull.
If you want scripts in <head>, add the defer attribute: <script defer src="app.js"></script>. This runs the script after HTML parsing is complete.
Q: What's the difference between absolute paths (/page) and relative paths (page)?
- Absolute path: Starts with
/. Relative to the server root./samples/listalways points tohttp://domain/samples/list. - Relative path: Starts without
/. Relative to the current document location. If the current page ishttp://domain/admin/dashboard, thenlistpoints tohttp://domain/admin/list.
If link or form action paths behave unexpectedly, confusing absolute and relative paths is likely the cause.
Q: Deployed to GitHub Pages but getting 404
GitHub Pages looks for index.html as the default page. If your filename is something else like my_page.html, you need to type the filename in the URL directly. Also, filenames with spaces need %20 encoding in URLs. Use no spaces in filenames and name your main page index.html.