Me, Learning Web Application: Chapter 1
Published: 2021-12-20 10:00:25

_Do not judge by its cover_. Some people, like me, tend to impose that well-saying on the others. When people have had enough experiences to guess right on _where a performance will lead to the end_ by just taking a glance at its opening, it kind of makes our statements to be of no value, nor be of help.

Just like me, bragging at the beginning of every post of mine, trying to say that none of my articles lacked of research. Although in the end people will rarely find an alibi for me whose sentences are barely easy to understand. Well, I am addicted of being exotic in writing though. Thereof, on the contrary, I am going to convey that a cover does matter. So is the first page. Why am I changed? Because I am an expert of experiencing. Well, enough then, let us go into without-further-ado.

## The Heading Tags

Clickbait, one of the most successful internet marketing to date. Everything has to do with titles and headings. Afterward, the first page, paragraph, or sentence will ensure that all readers get a good first impression.

An article `heading` is no different from the document `title` we mentioned earlier. Just because we feel bad if the browser misunderstands, we give it another name, `heading`. A `title` will always stand by itself, where a `heading` can have descendants. So, `heading`, `subheading`, `subsubheading`, and so on.

Subsubheading starts to make things unnecessarily complicated. To resolve this, we replace the _sub_ with enumeration. Now, it read as `heading1`, `heading2`, `heading3`, and so on. But human beings love a shortcut, so we have a tendency to name them `h1`, `h2,` `h3`, and so on. This explains what we saw yesterday:

```html
<!DOCTYPE html>
<html>
    <head>
        <title>First Meet Up With Naru - Naru's Blog</title>
        ...
    </head>
    <body>
        <h1>First Meet Up With Naru</h1>
        <p>Hello, Naru is here! Nice to meet you!</p>
    </body>
</html>
```

A `heading` is usually the `title` itself, except has no branding whatsoever. Thus, it does not make any sense to have two of it. As for `h2` and `h3` will be fine. I own a book from Lee, it is structured as seen:

```
Foundation of Programming Languages (branding)
├── 1 Introduction (title/h1)
│   ├── 1.1 Historical Perspective (h2)
│   ├── 1.2 Models of Computation (h2)
│   │   ├── 1.2.1 The Imperative Model (h3)
│   │   ├── 1.2.2 The Functional Model (h3)
│   │   └── ...
│   └── ...
├── 2 Syntax (title/h1)
│   ├── 2.1 Terminology (h2)
│   ├── 2.2 Baskus Naur Form (h2)
│   │   ├── 2.2.1 BNF Examples (h3)
│   │   └── 2.2.2 Extended BNF (h3)
│   └── ...
└── ...
```

I am not going to make it explicitly, as I sometimes agree with _show, don't tell_. Except, each chapter should be a separate HTML document, so there will be two separate documents for the introduction and the syntax chapters. If there will be a case to must include them on the same document, both will become `h2`. Thus, need to re-think of a new title for our document. Ah, by the way, since there will be no more than one page for any HTML document, from now on, let me call it a page instead.

We agree not to take headings beyond `h6`, as people can easily lose their track. If we insist to just write it down, the browser will likely treat it as a "valid" tag though, meaning no error will be involved. We can even apply global attributes, such as `lang` and `translate`.

```html
...
<h1>First Meet Up With Naru</h1>
<p>Hello, Naru is here! Nice to meet you!</p>

<h7 lang="ja" translate="no">Sayōnara</h7>
<p lang="ja" translate="yes">さようなら、そして良い一日を！</p>
...
```

_Ice breaking_: If we enable the translate-this-page feature, we will see that the text inside `h7` will not be translated into the local language. It does not makes sense to translate "sayōnara" into English, since that is not the actual Japanese word used in the writing, it is [a romaji](https://en.wikipedia.org/wiki/Romanization_of_Japanese). The `translate="no"` helps to avoid mistakes in interpreting a word.

Even if `h7` is a valid tag, it could behave way beyond our expectation. Indeed it is only a raw tag; our browser will have no idea to display it as a heading. It will never receive heading-like styles. But no doubt, we can provide styles ourselves later on.

In blogging, heading is not required, but it is needed. We need it, to assist people in reading and understanding the things we are explaining. Not by any chances, headings even used to help us in making our page ranked by search engines, so the best heading is guaranteed to be listed on the very top of the page or so.

Trying to run this code:

```html
...
<h1>First Meet Up With Naru</h1>
<p>Hello, Naru is here! Nice to meet you!</p>

    <h2>Naru's Big Family</h2>
    ...

        <h3>His Parents</h3>
        ...

            <h4>Daisy, A Mother</h4>
            ...

                <h5>Days With Naru's Father</h5>
                ...

                    <h6>Her First Chocolate Bar</h6>
                    ...

    <h2>Naru's Siblings</h2>
    ...
```

Will makes us noticed that, by default, the browser renders each heading level in a different style, i.e. font size and thickness. It helps to make the semantic structure stands out, as well as bring accessibility assistance to one who needs it. While using numbering has its own merits.

## The Paragraph Tag

A `p` stands for a paragraph. We can have as many `p` as needed. Despite its sound, it does not necessarily delimit it from acting as a paragraph only. But it can also be a [_stanza_](https://en.wikipedia.org/wiki/Stanza) as well, which is an analogous known in prose. Since I mildly like poetry, let us make one for the introduction.

```html
<!DOCTYPE html>
<html>
    ...
    <body>
        <h1>First Meet Up With Naru</h1>

        <p>
            A young man wakes up
            The sunshine seeps in
            What dream he was in
        </p>
        <p>
            Every day early on
            He's found lies off
            Who's he reminded of
        </p>
        <p>
            It was me, Naru
            One loves to be
            Where he would be
        </p>
    </body>
</html>
```

The rhythm sounds good, but it does not look great. Since any extra spaces and lines in HTML will be banished. Adding line breaks will get over it.

```html
<!DOCTYPE html>
<html>
    ...
    <body>
        <h1>First Meet Up With Naru</h1>

        <p>
            A young man wakes up <br>
            The sunshine seeps in <br>
            What dream he was in
        </p>
        <p>
            Every day early on <br>
            He's found lies off <br>
            Who's he reminded of
        </p>
        <p>
            It was me, Naru <br>
            One loves to be <br>
            Where he would be
        </p>
    </body>
</html>
```

Yay, that is all for today. See ya~

## References

- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
- https://stackoverflow.com/questions/10830682/is-it-ok-to-use-unknown-html-tags