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:
<!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.
...
<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.
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:
...
<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 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~
Top comments (0)