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.
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.
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,
title will always stand by itself, where a
heading can have descendants. So,
subsubheading, and so on.
Subsubheading starts to make things unnecessarily complicated. To resolve this, we replace the sub with enumeration. Now, it read as
heading3, and so on. But human beings love a shortcut, so we have a tendency to name them
h3, and so on. This explains what we saw yesterday:
<!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>
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
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
... <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. The
translate="no" helps to avoid mistakes in interpreting a word.
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:
... <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.
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 as well, which is an analogous known in prose. Since I mildly like poetry, let us make one for the introduction.
<!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.
<!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~