HyperText Markup Language (HTML)

April 2, 2022

HTML stands for HyperText Markup Language. It is a standard markup language for documents to be in a web browser. It can be along with Cascading Style Sheets (CSS) for the look and JavaScript (JS) for the behavior.

The first version of HTML was written by Tim Berners-Lee in 1993. Today, HTML has the fifth version. I remember the moment I coded HTML5. It was in 2013 for my final project and research paper. It was a social network. HTML5 was still new and not many web browsers support it yet.

Perhaps many of you have heard that content is a king and design is a queen. HTML is a content. It is not a programming language. It is easy to learn. The design or CSS makes a great experience for users when reading HTML. The HTML should be easy to read by machines such as search engines and humans. That's why Semantic HTML is important. Good semantic HTML also improves the accessibility of web documents. For example, screen readers can read the document correctly.

There are many resources out there that can help you learn HTML. I'm here to show you common mistakes that people love to make. They are not just about Semantic HTML. I hope this note can help or improve how to code HTML. Feel free to leave me a comment if I missed something.

Start

1
2
3
4
5
6
7
8
9


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
    
</body>
</html>

First, let me remind you how to start the HTML. The <!DOCTYPE html> defines that this document is an HTML5 document. I told you that today is the HTML5 era. The <head> contains meta information. The <body> is for the content.

Page

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
    <h1>Page Title</h1>
    <p>The main description.</p>
    <h2>Sub Heading 1</h2>
    <p>The <a href="https://picsum.photos/seed/picsum/300/200" target="_blank" rel="noopener noreferrer">Image</a>.</p>
    <figure>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="The Image">
        <figcaption>The Image</figcaption>
    </figure>
    <h2>Sub Heading 2</h2>
    <p><strong>Unordered</strong> vs <b>Ordered</b>.</p>
    <ul>
        <li>First Item</li>
        <li>Second Item
            <ol>
                <li>1st Item</li>
                <li>2nd Item</li>
                <li>3rd Item</li>
            </ol>
        </li>
        <li>Third Item</li>
    </ul>
</body>
</html>

I used two headings here. <h1> and <h2>. <h1> is important on every page and should contain only one. <h2> is the subtitle of the page and it could be many on every page. You can use <h3> as a subtitle of the <h2> and so on until <h6>.

I used rel="noopener noreferrer" for the link. The noopener instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it. The noreferrer instructs the browser to omit the Referer header and otherwise leak no referrer information. It is a recommendation to get an SEO score.

I used the alt tag to show text if the picture doesn't load and figure to show the picture as a figure of the page.

The <strong> and <b> will bold the text. But they have different meanings in search engines. The <strong> means it is important.

Yeah, that's how to make a nested list. You put the <ul> or <ol> before the </li> tag.

Frontpage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


<!DOCTYPE html>
<html>
<head>
<title>Frontpage</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <h1>Frontpage</h1>
        <article>
            <h2><a href="#">Article 1</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
        </article>
        <article>
            <h2><a href="#">Article 2</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
        </article>
        <article>
            <h2><a href="#">Article 3</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
        </article>
    </section>
    <footer>
        <p>Copyright &copy; 2022</p>
    </footer>
</body>
</html>

The <header>, <footer>, <section>, <article>, and <nav> are from HTML5. Today, W3C recommends them. I still found some developers are not familiar with them. The code above just an example how to use them.

I used © to print © That is called HTML entities. They are used to display reserved characters in HTML.

Bad Page

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38


<!DOCTYPE html>
<html>
<head>
<title>Bad Page</title>
</head>
<body>
    <h1>Bad Page</h1>
    <p>A common mistake.</p>
    <div>
        <div>
            <a href="#">
                <div><img src="https://picsum.photos/seed/picsum/300" alt="Item 1"></div>
                <div>Item 1</div>
                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            </a>
        </div>
        <div>
            <a href="#">
                <div><img src="https://picsum.photos/seed/picsum/300" alt="Item 2"></div>
                <div>Item 2</div>
                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            </a>
        </div>
        <div>
            <a href="#">
                <div><img src="https://picsum.photos/seed/picsum/300" alt="Item 3"></div>
                <div>Item 2</div>
                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            </a>
        </div>
    </div>
    <div>
        <a href="#">Page 1</a>
        <a href="#">Page 2</a>
        <a href="#">Page 3</a>
    </div>
</body>
</html>

A common mistake some developers make. Sometimes, I found some images without the alt attribute. As we see in the code above, the a tag is an inline tag but covers div tags which are block tags.

Good Page

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


<!DOCTYPE html>
<html>
<head>
<title>Good Page</title>
</head>
<body>
    <h1>Good Page</h1>
    <p>It is better.</p>
    <ul>
        <li>
            <figure>
                <a href="#"><img src="https://picsum.photos/seed/picsum/300" alt="Item 1"></a>
            </figure>
            <p><a href="#">Item 1</a></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </li>
        <li>
            <figure>
                <a href="#"><img src="https://picsum.photos/seed/picsum/300" alt="Item 2"></a>
            </figure>
            <p><a href="#">Item 2</a></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </li>
        <li>
            <figure>
                <a href="#"><img src="https://picsum.photos/seed/picsum/300" alt="Item 3"></a>
            </figure>
            <p><a href="#">Item 3</a></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </li>
    </ul>
    <ol>
        <li>
            <a href="#">Page 1</a>
        </li>
        <li>
            <a href="#">Page 2</a>
        </li>
        <li>
            <a href="#">Page 3</a>
        </li>
    </ol>
</body>
</html>

The code above is better than the previous one. Now, the machines and humans know that there is a list of items and a list of pages. The inline tags should be in block tags.

Style

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<!DOCTYPE html>
<html>
<head>
<title>Style</title>
<style>
.success { color:green }
</style>
</head>
<body>
    <p><span style="color:red">Inline</span> styles are not recommended.</p>
    <p><span class="success">Classes</span> are better.</p>
</body>
</html>

CSS inline styles are mostly created by WYSIWYG (What You See Is What You Get) editors. They are bad because they have the potential to create repetition. CSS styles should be in CSS classes. The second paragraph for an example.

Comment

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
</head>
<body>
    <!-- A good comment is to show a piece of information. -->

    <!--
    This is a very bad comment for HTML.
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultrices pulvinar nulla, id gravida felis mattis vitae. Pellentesque vel turpis odio. Curabitur risus elit, dignissim sodales purus eget, imperdiet sollicitudin sem. Quisque ac mi diam. Cras aliquet metus nec purus egestas luctus. Mauris condimentum commodo neque, a lacinia risus ultricies sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ut blandit metus, ut pulvinar nisl. Morbi venenatis velit nec enim aliquet egestas.</p>
    <p>Sed non purus leo. Suspendisse aliquam efficitur diam id pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin nulla nunc, ultrices nec vestibulum sit amet, tempus ac lectus. Sed vulputate imperdiet justo, at tempus orci ultricies ac. Vivamus ac mollis magna, a pellentesque nibh. Mauris nec ex at metus mollis consectetur sit amet ac lacus. In non porttitor magna. Fusce a odio eget orci tincidunt lacinia. Fusce vel mi sed felis sollicitudin semper et at quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut lacus eget eros molestie rhoncus. Cras sit amet ipsum maximus, eleifend mi hendrerit, auctor urna.</p>
    <p>Aliquam sollicitudin in nulla eu pellentesque. Curabitur consequat justo ut augue egestas, in luctus sem faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper imperdiet velit, id auctor sapien malesuada dictum. Proin porttitor volutpat rhoncus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas varius convallis nibh, non gravida orci. Nam venenatis auctor metus. Suspendisse nunc justo, condimentum id mollis ac, tempus in justo. Etiam porttitor tortor ligula, ut pharetra tellus volutpat in. Nam id risus elementum, hendrerit lacus ut, varius tortor. Vestibulum efficitur malesuada aliquam. Nullam urna enim, cursus vitae dolor a, porttitor blandit lorem. Fusce egestas porta mi, vitae tincidunt ante congue id.</p>
    <p>Suspendisse in aliquam orci. Sed vulputate urna ut diam accumsan dignissim. Suspendisse sed semper sem. Proin dapibus, diam iaculis auctor hendrerit, elit ipsum vulputate erat, et fermentum sem nibh id turpis. Nunc placerat ante ut libero ultrices, vitae tempor nisl bibendum. Nam dictum gravida arcu eu condimentum. Integer venenatis imperdiet cursus. Donec urna augue, fringilla nec placerat non, aliquam nec ligula. Praesent et nisi sit amet mauris faucibus efficitur. Pellentesque volutpat eget nunc eget gravida. Curabitur suscipit urna eget velit auctor, at efficitur nisl dictum.</p>
    <p>Donec viverra massa in ullamcorper aliquet. Praesent at nisi vestibulum, volutpat mauris ac, pretium odio. Vestibulum ac eros at ex congue commodo eget ac diam. Donec sagittis elementum hendrerit. Maecenas at malesuada nisl, ac blandit nulla. Integer condimentum sit amet magna at semper. Integer nisi mi, porta id ante at, rutrum tempus magna. Nam ipsum libero, volutpat sed ornare vel, ornare id risus.</p>
    -->
</body>
</html>

A comment in HTML should be a piece of information for developers. Comments are not for dead codes. It is even worse for HTML. It makes the HTML file heavy to load.

Email

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Email</title>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td align="center" valign="top">
                <table border="0" cellpadding="0" cellspacing="0" width="600">
                    <tr>
                        <td align="center" valign="top">
                            <table border="0" cellpadding="0" cellspacing="0" width="600">
                                <tr>
                                    <td>
                                        <img src="https://picsum.photos/seed/picsum/600/150" alt="Banner" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" valign="top">
                            <table border="0" cellpadding="0" cellspacing="0" width="600">
                                <tr>
                                    <td valign="top">
                                        <table border="0" cellpadding="20" cellspacing="0" width="100%">
                                            <tr>
                                                <td valign="top">
                                                    <h1>Heading 1</h1>
                                                    <h2>Heading 2</h2>
                                                    <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Aenean ultrices pulvinar nulla, id gravida felis mattis vitae. Pellentesque vel turpis odio. Curabitur risus elit, dignissim sodales purus eget, imperdiet sollicitudin sem. Quisque ac mi diam. Cras aliquet metus nec purus egestas luctus. Mauris condimentum commodo neque, a lacinia risus ultricies sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ut blandit metus, ut pulvinar nisl. Morbi venenatis velit nec enim aliquet egestas.</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" valign="top">
                            <table border="0" cellpadding="10" cellspacing="0" width="600">
                                <tr>
                                    <td valign="top">
                                        <table border="0" cellpadding="10" cellspacing="0" width="100%">
                                            <tr>
                                                <td colspan="2" valign="middle">
                                                    <a href="#">unsubscribe from this list</a> | <a href="#">update subscription preferences</a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Coding an HTML for email isn't much different than coding a website was back in the late '90s. Layouting using table. I used XHTML 1.0 instead of HTML5 for strict purpose and because many recommendations from many email providers. We can check whether our XHTML is valid or not at here, https://validator.w3.org. More information about XHTML 1.0 can be found here, https://www.w3.org/2010/04/xhtml10-strict.html.

Form

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
    <h2>Bad Form</h2>
    <form>
        <label for="bad_for_number">Number:</label><br>
        <input type="number" id="bad-for-name" name="bad_for_number"><br>
        <label for="bad_for_date">Date:</label><br>
        <input type="date" id="bad-for-date" name="bad_for_date">
    </form>
    <h2>Good Form</h2>
    <form>
        <p>
            <label for="good-for-name">Number:</label><br>
            <input type="number" id="good-for-name" name="good_for_number"><br>
        </p>
        <p>
            <label for="good-for-date">Date:</label><br>
            <input type="date" id="good-for-date" name="good_for_date">
        </p>
    </form>
</body>
</html>

The for attribute on the <label> is equal with the id of the <input> instead of name.

Closing

Feel free to clone the repository, https://github.com/aristorinjuang/html, of examples above and try it on your own. You can check my references for more information.