Header of the Article
By Neon · August 2025
This is a self-contained article. It could be shared independently and it is wrapped around the article tag(<article></article>)
This project is built primarily with HTML to explain HTML. A touch of CSS was added to enhance navigation and visual appeal.It's designed to help me and anyone new to web development to understand the basic structure and behaviour of HTML.
It's not a complete or official guide but rather a practical reference that summarizes what i've learned and how i undertsand each concept.
Note: The codes written here are best understood when copied and tested directly in an editor. There may be minor errors or inconsistencies since the project focouses on learning through experimentation. The code preview written here might mess up the mobile version because of the preformatted tags
Check out MDN DOCS
This is a...markup language. I don't really know how to explain what a markup language is so i just see it as a word processor in programming language form. Because of how easy it is people tend to argue it's not even a programming language.
HTML 5 file starts with a boilerplate, a doctype declaration that tells the browser you are using HTML 5. Think of it like an hamburger, between the buns are the html content, the buns are the doctype declaration.Inside it are two main parts and they are
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Document </title>
</head>
<body>
</body>
</html>
<p></p>): The introduction above was written in the paragraph tag <em></em>): This was written in the emphasized tagThis text is written
in the
Preformatted tag console.log('Hello');The numbering used to list the types of text tags were made with the help of the list tags
The list tags include Ordered list(<ol></ol>) and Unordered list(<ul></ul>), both having a Sub tag used to mark the next item on the list which is represented by <li></li>.There's another one but i don't think it's really useful anymore and it is called a description list(<dl></dl>) and the tags used under it are description term(<dt></dt>) and description details(<dd></dd>)
Here is how we use them:
When you run this code in your editor:
<ol>
<li>This is number one</li>
<li>This is number 2</li>
</ol>
You will get this:
<ul>
<li>This is number one</li>
<li>This is number 2</li>
</ul>
You will get this:
<dl>
<dt>Mitochondria</dt>
<dd>A powerhouse</dd>
</dl>
You will get this:
By Neon · August 2025
This is a self-contained article. It could be shared independently and it is wrapped around the article tag(<article></article>)
Code preview:
<Form>
End product:
<fieldset>
<legend>Login form</legend>
<label for="username">Username:</label>
<input type="text" id="username" placeholder="Enter username" >
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter Password" >
<label for="age">Age:</label>
<input type="number" id="age" value="18" >
<label for="color">Pick Color:</label>
<input type="color" id="color" value="#fff000" >
<label for="gender">Gender:</label>
<select id="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<input type="checkbox" id="remember" name="remember" value="yes">
<label for="remember">Remember me
<input type="radio" id="option1" name="option" value="1">
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="option" value="2">
<label for="option2">Option 2</label>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<button type="button" onclick="alert('Hello!')">Click Me</button>
</fieldset>
</form>
<label for="username">Username:</label>
<input type="text" id="username" placeholder="Enter username">
Can also be written alternatively as this
<label for="username">Username:
<input type="text" id="username" placeholder="Enter username">
</label>
This consist of 6 tags(that i know of), 3 of the tags are more important compared to the other 3 and they are, table, tr and td.
| Tags | Uses |
|---|---|
| <table> | This is the parent of the table, without it there won't be a table |
| <tr> | This stands for "table row" and it is the start of every row in the table |
| <td> | Stands for "Table data", indented under the tr tag and responsible for filling the columns in the row |
| <thead> | This tag is usually used at the begining of a table. It is used to group the heading of the table |
| <tbody> | This is used to group the body of the table |
| <th> | This is used under the <thead> tag in the place of <td> |
Here's the preview of the code used to make the table above
<table>
<thead>
<tr>
<th>Tags</th>
<th>Uses</th>
</tr>
</thead>
<tbody>
<tr>
<td><table></td>
<td>This is the parent of the table, without it there won't be a table </td>
</tr>
<tr>
<td><tr></td>
<td>This stands for "table row" and it is the start of every row in the table</td>
</tr>
<tr>
<td><td></td>
<td>Stands for "Table data", indented under the tr tag and responsible for filling the columns in the row</td>
</tr>
<tr>
<td><thead></td>
<td>This tag is usually used at the begining of a table. It is used to group the heading of the table</td>
</tr>
<tr>
<td><tbody></td>
<td>This is used to group the body of the table </td>
</tr>
<tr>
<td><th></td>
<td>This is used under the <thead> tag in the place of <td></td>
</tr>
</tbody>
</table>
1.Abbreviation(<abbr></abbr>): The word HTML is an Abbreviation
2.Time example(<time></time>):I wrote this code at . This tag doesn't change things visually but it helps for SEO
3.Highlight(<mark></mark>): This text is highlighted
4.Progress(<progress></progress>):
<progress value="70" max="100"></progress>
70%
5.Summary:
<details>
<Summary>Click to expand</Summary>
<p> This is the continuation of the content</p>
</details>
This is the continuation of the content