HTML Code Structure
Download (.odt) Download (Markdown)Element
[hook]<h1>: opening tag
Hello World: content
</h1>: closing tag
<a>: opening tag
href="index.html": attribute
Hello World: content
</a>: closing tag
There are some elements, which are only consists of a self-closing tag. For example:
<br>: self-closing tag
<img>: self-closing tag
src="image.png": attribute 1
alt="This is an image": attribute 2
Embedded elements
[hook]<div></div>: parent (container) element
<h1>Hello World</h1>: child element
(The <div></div> element contains another element, <h1>Hello World</h1>)
Tags which are usually used in parent elements (e.g. div, section, article, nav, header, main, footer) are also called semantic tags.
Boilerplate
[hook]The skeleton of the HTML code, which contains the whole content and metadata of the webpage.
<!DOCTYPE html>: tells the browser it's an HTML code
<html lang="en"></html>: it's the root tag of the code structure. The lang attribute provides the (human) language of the website (English in this case).
<head></head>: contains the metadata of the website and links to CSS and JavaScript code files.
<meta charset="UTF-8">: provides the character coding of the webpage (the most common one is UTF-8 because it has the widest support, but there are also a few others)
<meta name="viewport" content="width=device-width, initial-scale=1.0">: provides the display size of the content. width=device-width means the content width is equal to the width of browser window (viewport) or mobile screen. initial-scale=1.0 sets the scaling of the content to 100%.
<title>Name of the website</title>: A short title which appears on the browser tab.
<body></body>: it contains all content that's visible for the user.
Pro tip: In most modern text editors you don't have to type the whole boilerplate yourself. You can use a built-in shortcut instead. E.g. in VSCode/VSCodium type html:5 and press Tab or Enter.
Writing comments to the code
[hook]If you write a long, complicated code you may want to comment it for your future self to remember what the code does or your fellow devs to understand the code. Comments don't appear for the users on the rendered website.
This is how you can write a comment:
(License text is also contained in comment. See the code of FosseryWeb home page.)