in

Learn HTML For Beginner (Part 4: Text Formatting Element)

In this chapter, we will discuss tags, attributes and elements related to formatting text, such as how to make paragraphs, links, italics, bold, etc. All of these tags are placed inside the <body> section of the web page.

It should be noted, when discussing tags or attributes that have an ‘appearance’ effect, usually these tags or attributes have been declared deprecated, and we are advised to switch to using CSS.

To make the discussion of the material more complete, I still discuss the ‘obsolete’ tags and attributes but also include examples with CSS. CSS is a very broad discussion and generally discussed in a separate book. However, at the end of the book, I included a brief guide to understanding CSS. I made this so that you can follow the discussion on material that is ‘little’ involving CSS.

Element paragraph

The <p> tag is used to make paragraphs, and it is most likely this tag that you use the most when filling in content for a website.

To make a paragraph, we just need to fill in the text between the opening tag <p> and the closing tag </p>, like the following example:

<p> This is the first paragraph </p>
<p> This is the second paragraph </p>

The <p> tag is a block-level element, so it will appear separately in a new line. The web browser will also add some space before and after the paragraph. This space (or rather: margin) can later be removed or changed using CSS.

Formatting Paragraph Edges (align attribute)

One of the things you want to do in a paragraph is aligned with the edges of a text. Whether the text will be displayed align text right, left, center, or both (justify). To get this result, we can use the align attribute. The values that can be inputted are left, right, center, or justify.

Following is an example of using the align attribute in the <p> tag:

<p align="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam dictum sapien nec elit volutpat pellentesque.
Vestibulum tristique justo ut eros iaculis, sit amet tempor luctus.
Quisque convallis sapien sit amet sem efficitur, at efficitur ornare.
</p>

But before you add this attribute to HTML, the align attribute is declared obsolete by the HTML5 standard.

Know the Definition of Deprecated

Deprecated is an English term that means ‘obsolete’ or ‘despicable’. In computer programming languages, the term deprecated means a thing that is no longer supported, is outdated and should not be used.

An HTML tag or attribute if declared as deprecated, means that the tag or attribute is strongly recommended not to be used. Going forward, tags or deprecated attributes may not be supported by web browsers.

In HTML, tags or deprecated attributes are usually from previous HTML versions and are related to display effects. As we learned in the first chapter, HTML is designed to create structure, while display problems are left to CSS.

Besides deprecated, there is also the term obselete. Both of these terms have similar meaning, that is to indicate something that should not be used anymore. In the HTML5 specification, the term that is often used is obselete, but in programming languages in general, the term deprecated is more often used.

In our example this time the align attribute is deprecated, so we are advised to use the CSS: text-align property to get the same effect.

Manage Align Paragraphs With CSS

Almost all HTML attributes that are depracated have CSS code pairs to replace them, the align attribute is no exception. The same flat text effect can be obtained by using the text-align property of CSS. The value of the text-align is the same as the align attribute, which is one of left, right, center, or justify.

Following is an example of using the text-align property for the <p> tag:

<p style="text-align: justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam dictum sapien nec elit volutpat pellentesque.
Vestibulum tristique justo ut eros iaculis, sit amet tempor luctus.
Quisque convallis sapien sit amet sem efficitur, at efficitur ornare.
</p>
<p style="text-align: right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam dictum sapien nec elit volutpat pellentesque.
Vestibulum tristique justo ut eros iaculis, sit amet tempor luctus.
Quisque convallis sapien sit amet sem efficitur, at efficitur ornare.
</p>

Here is the complete code on the index.html page:

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Learn Text Formatting Element </title>
</head>
<body>
	<p style="text-align: justify">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Nam dictum sapien nec elit volutpat pellentesque.
	Vestibulum tristique justo ut eros iaculis, sit amet tempor luctus.
	Quisque convallis sapien sit amet sem efficitur, at efficitur ornare.
	</p>
	<p style="text-align: right">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Nam dictum sapien nec elit volutpat pellentesque.
	Vestibulum tristique justo ut eros iaculis, sit amet tempor luctus.
	Quisque convallis sapien sit amet sem efficitur, at efficitur ornare.
	</p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\1.png
Text Formatting Element

Like a paragraph, in the <p> tag we can also use various inline level elements as the contents of paragraphs, such as making italics, bold, or links.

Get acquainted with Lorem Ipsum

Lorem Ipsum is one of the unique things that you will often encounter in program code examples or tutorial examples (especially when discussing web design).

Lorem ipsum is a dummy text or placeholder text that is used instead of text. The goal, so that our appearance ‘contains something’ ‘(where the contents of the text are not important, because what you want to see is the effect it looks).

Lorem ipsum has been used since the 1500s in the printing industry. This Latin text originates from a literary work in 45 BC. If you are interested in the origin of Lorem Ipsum, you can read it on wikipedia.

I myself prefer to make examples using ipsum lorem so that our attention is not divided by the ‘content’ of the text, and more focused on the discussion of HTML.

Anchor Element (a)

The <a> tag (also called the anchor element) is one of the most important tags in HTML. This tag is used to make a link to another page (or it could be to link to an image file, pdf file, mp3 file, etc.).

To make a link, it needs at least 2 things, namely, text that functions as the link text (text that can be klik clicked ’) and the destination address of the link (URL).

To make the text clickable, we just need to make the text between the opening tag <a> and the closing tag </a>, like the following example:

<a> Login Page </a>

Meanwhile, to make the location to be addressed when the text is clicked, we need the href attribute.

The <a> tag is included in the inline level element, so it will be displayed following the previous line of text (not moving to a new line).

href attribute

To input, the destination location that you want to link to, the <a> tag requires the href (hypertext references) attribute. The value of the href attribute is the address of the page you want to go to.

This address can be either an absolute address or a relative address (we will discuss both in a moment).

Following is an example of writing <a> tags with the addition of the href attribute:

<a href="https://www.laikie.site/login.html"> Login Page </a>

If you input the above code into the <body> section of the index.html page, here is the complete code:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning HTML links</title>
</head>
<body>
  <a href="https://laikie.site/login.html">Login Page</a>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\2.png
Text Formatting Element

The Login Page text functions as anchor text, i.e., clickable text. By default, this text is blue with an underline effect. We can change this effect using CSS.

Know Absolute Addresses and Relative Addresses

In general, addresses of file locations in HTML can be grouped into two types, absolute addresses, and relative addresses.

An absolute address is an address that lists the full URL, which consists of the protocol name (the http: // part), the domain name (such as www.laikie.site), and the file name (such as login.html). An example of a complete absolute address is https://www.laikie.site/login.html.

A relative address is a ‘relative’ address to the destination file based on the folder structure. By creating a relative address, we don’t need to create a complete URL address like an absolute address. But this relative address needs special discussion.

In order to more easily understand how to write relative addresses, I will use the example folder structure as shown below.

Text Formatting Element

In the folder structure above, I have a learn_html folder in which there are 2 folders: folder_a and folder_b and a file: index.html. In folder_a there are 2 files: hello_world.html and table.html. Inside folder_b there are also 2 files: login.html and register.html.

For example, I am currently typing code in the index.html file. To create a link to the table.html page located in folder_a, I just need to write the location of the table.html file relative to the index.html file. Here’s how to write the link:

<a href="folder_a/table.html"> Table Page </a>

If the file I am going to is login.html in folder_b, the writing will be:

<a href="folder_b/login.html"> Login Page </a>

As another example, I will now use the hello_world.html file. To create a link from the hello_world.html page to the table.html page, I just need to write the address: table.html (because these two files are in the same folder). Here’s how to write the link:

<a href="table.html"> Table Page </a>

But if I want to link to the index.html file, then I have to ‘go up’ 1 folder to the top. To move up 1 folder, we write it with a double colon followed by a slash: ‘../’. So that the writing of the link becomes as follows:

<a href="../index.html"> Index page </a>

Still using the hello_world.html file, if I want to link to the register.html file, then I have to go up 1 folder, move to folder_b, and write the name of the register.html file.

Here’s how to write the link:

<a href="../folder_b/register.html"> Register Page </a>

The rules for writing these addresses are very important to understand because they are used not only for <a> tags, but also for accessing other external files such as images, CSS files, or JavaScript files.

You might find that the folder structure is quite complicated, so you have to go up a number of folders, then go into several more folders to find the intended file, like the following example:

<a href="../../../folder_a/folder_b/hidden.html"> Hidden Pages </a>

In the example above, we go up 3 folders (from the current file), then enter folder_a, go to folder_b, and finally find the file hidden.html.

One of the advantages of using a relative address is that you don’t need to change the link if you move the site domain. For example, if I use a relative address for all internal links on laikie.site, then I don’t need to change the address of the existing link if laikie moves the address to laikieanother.site.

Besides functioning to create links to other pages, the <a> tag can also be used to link to other parts of the same page. This is usually done if the page you are writing is long enough, so it requires a ‘table of contents’ at the beginning. If the table of contents is clicked, the web browser screen will move to that section.

To make this, we need to do 2 things: mark the location of the destination and make a link to that location.

Marking a location that will be the link destination, can be done using the id attribute. The id attribute is one of the global attributes. A global attribute or global attribute is an attribute that can be used by all HTML tags.

The value of the id attribute is usually a word or a collection of characters (we can also use numbers, dashes, or underscore). For example, here is writing the id attribute with the value of chapter 1 in a paragraph:

<p id="chapter1"> This is the opening paragraph in chapter 1 </p>

Aside from being a link marker, the id attribute also works for tagging tags when using CSS or JavaScript

After the link location is complete, we just ‘associate’ the id attribute value with the href attribute. How, by using a hash sign (#) and followed by the value of the intended id attribute.

To create a link that will lead to a tag with id = “chapter1”, I just need to write the href = “# chapter1” attribute in the <a> tag. The notation of writing the href attribute is also called the fragment identifier. Here is the writing of the link:

<a href="#chapter1"> Go to Chapter 1 </a>

As an exercise file, I will modify the index.html file to look like this:

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Learning HTML links</title>
</head>
<body>
	<h1>Learn HTML</h1>
	<a href="#chapter1">Go to Chapter 1</a>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<p id="chapter1">This is the opening paragraph in chapter 1</p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\4.png
Text Formatting Element

In the example above, I used a lot of tags <br> so that paragraph text isn’t visible in the web browser window (as if it were ‘far’ below), so that when the “Towards Chapter 1” link was clicked, the web browser would move to that section.

Target Attribute

The target attribute in the <a> tag is used to determine in which window the webpage will be displayed. The values ​​that can be used for this attribute are _self, _blank, _parent, _top, or framename.

If we use the target = “_ self” attribute, the web browser will display the link page in the current window. Following is an example of its use:

<a href="https://www.laikie.site" target="_self">
Tutorial page
</a>

The target =_ self attribute is rarely written because even if it isn’t written the link will still appear on the current page.

The target =_ blank attribute will display the link page in a new web browser window.

But because now all web browsers use the ‘tab’ system, the link page will generally appear in a new tab. Following is an example of its use:

<a href="en.wikipedia.org/wiki/HTML" target="_blank">HTML on Wikipedia</a>

Some sources suggest using the target = “_ blank” attribute for all links to external websites (external links). The reason is that web visitors can still ‘return’ to our website. Because if you use target = “_ self”, our web page will be overwritten with the new page.

But for links to other pages from the same website (internal links) you should use target = “_ self”, so that the end web browser is not “full” with new tabs.

Besides _self and _blank, the target attribute still has the values _parent, _top and framename. These three values are used if the HTML page uses frames. Frames are an HTML feature for ‘breaking’ browser windows into sections. At present the use of frames is rarely used and has a deprecated status, therefore I will skip this discussion.

Rel Attribute

Rel attribute is an abbreviation of relationships. This attribute is used to state how the current page relates to the page to be linked.

The value of this attribute is quite a lot, some of which are: alternate, author, bookmark, nofollow, noreferrer, and prefetch. Rel attributes are aimed more at ‘robots’ of search engines such as Google, not on visitors. Therefore, we will not see the direct effect of this attribute.

The rel attribute is relatively rarely used, so I will not discuss all the values ​​of this attribute. However, there is one value of the rel attribute that is quite ‘famous’, namely nofollow. The rel = “nofollow” attribute is used for SEO purposes.

One of the most important points that Google uses to rank search results is to assess how much a site is referenced. Google calculates it by looking at how many links are going to the website, or known as backlinks. If a website is used as a reference from many other sites, then Google considers it the best website and is displayed in the top position.

Wikipedia is almost always in the first place. This happens because many other websites use Wikipedia as a source and link to Wikipedia. This concept is very good, but there are times when we want a link ‘not counted’ by Google.

For example, when I create articles on the Internet, sometimes I use references from other sites and make links to those websites. This link will be ‘counted’ by Google as a backlink for the site.

At the bottom of the article, I provide a comment column. In addition to filling out comments, laikie visitors can also fill in other biodata such as name, email and personal site address. The address of this site will be displayed and become a link to the site of the commentator.

However, many of these sites are not related to the discussion (and some of them go to buying and selling sites or even spam sites), so I don’t want Google to make these links count as backlinks.

Some SEO experts also do not recommend creating links to sites that are not related to the material discussed, it can even reduce the ranking site of the link giver.

To tell Google about this, we just need to add the rel = “nofollow” attribute to the link, like the following example:

<a href="https://www.laikie.site" rel="nofollow"> my site bro </a>

When Google sees a link with the rel = “nofollow” attribute, then Google will not count the link to judge the ranking of the website.

Heading Element (h1 – h6)

Heading elements are used to create headings in HTML pages. Heading elements consist of 6 levels or 6 levels, from <h1> to <h6>.

The following is an example of how the <h1> up to the <h6> tags look in a web browser:

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Learning HTML links</title>
</head>
<body>
	<h1> Article Title with h1 </h1>
	<h2> Article Title with h2 </h2>
	<h3> Article Title with h3 </h3>
	<h4> Article Title with h4 </h4>
	<h5> Article Title with h5 </h5>
	<h6> Article Title with h6 </h6>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\5.png
Text Formatting Element

As you can see, by default the web browser defaults, all heading tags are displayed in bold and in various font sizes. The <h1> tag appears with a large font size, and the <h6> tag uses a small font size. If you want to change this effect, you can do it with CSS.

Heading elements are included in the block level element and will appear separately in a new line. The web browser will also add some space before and after the heading.

Heading elements that have 6 levels reflect its usefulness to create a website title structure. The title of an article should be written with the tag <h1>, subtitles written using <h2>, subtitles with <h3>, etc. An organized structure is also an added value for search engines.

For a structure to be consistent, try not to ‘jump over’ the writing structure. This ‘jump’ example is like making a title with <h1>, then directly using the <h4> tag for the subtitles.

Apart from articles, heading elements are often used as sidebar titles, titles for the footer section, and various other parts of the website.

If you see an article title that also functions as a link, this is usually done by inserting the <a> tag between the header elements, like the following example:

<h1>
<a href=" https://laikie.site/category/html/">
Learn Basic HTML Tutorials
</a>
</h1>

Emphasis, Strong, Bold, and Italic Element

The four elements above are used to produce the bold and italic effect of the text. To get the italic effect, we can use the <em> (emphasis element) or <i> (italic element) tag, while for the bold effect, you can use the <strong> (strong importance) or <b> (bold) tag element).

These four elements are included inline level elements, so they will follow the existing path (not appearing on a new line). Usually, these tags are used in paragraphs (inside the <p> tag).

However, why is it that each effect is represented by 2 elements? It starts with the historical story of using HTML.

Tags <b> and tags <i> have been available since the initial HTML version. However, in the HTML 4.01 era, both were deemed incompatible and deprecated. The reason is, both of these tags have a ‘name’ with visual effects, and do not reflect structure.

Tag <i> which stands for italics is considered not suitable for the ‘name’ structure. W3C believes that a word should be written in italics because the word needs emphasis, not because someone wants it to appear italic.

Therefore, in HTML 4.01 the tag is declared deprecated and replaced with the <em> tag which stands for emphasis.

In HTML, tags/elements that represent structures are known as semantic elements. HTML5 brings a lot of new tags that have semantic meaning. We will study it in a separate chapter.

Just like the <i> tag, the <b> tag which stands for bold is also considered not to reflect the structure. In HTML 4.01, the <b> tag is declared deprecated and replaced by the <strong> tag which has the extension ‘strong importance’.

As you can see, the reason behind the ‘removed’ tag <i> and the tag <b> is because ‘the name is wrong’.

Nevertheless, the web browser still fully supports these two tags, and many web developers still use them because it is more practical and concise.

The feud between the tag vs. <em> and the tag <b> vs <strong> is often the subject of discussion at every opportunity that discusses how to tilt the letters with HTML. When WHATWG designed HTML5, instead of selecting the <em> and <strong> tags, they officially re-authorized the use of tags and tags (which W3C once wanted to remove). But this time both have new functions.

In the HTML5 standard, tags are used to mark words that don’t need emphasis, but want to be italicized, such as foreign languages ​​and technical terms. While the <b> tag is used to mark words that don’t really matter, but they are usually written in bold like the product name or brand name.

So which tags are used to tilt or bold letters? answer: it’s up 🙂 All four tags are fully supported by all web browsers, even more so HTML5 condones the use of all four.

But if you follow the HTML5 standard, then for words that are important and want to emphasize their meaning, use <em> or <strong>. As for words that don’t really matter, but want to be italicized or bolded, use <i> or <b>.

Here is an example of using these four tags:

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Learn Emphasis, Strong, Bold, and Italic Element</title>
</head>
<body>
	<p>One of the <strong>unique</strong> things about <i> HTML </i> 
	(and also <em> CSS & JavaScript <em>) is that we can freely
	see the codes used to create a <b>web page</b>.</p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\6.png
Text Formatting Element

Underline and Strikethrough Element

As the name implies, underline elements are used to create underline effects for text, while strikethrough elements are used to create crossed out lines.

Just like the case of tags <i> with <em> and tags <b> with <strong>, in HTML there are two types of tags for each effect. To make an underline, there are <u> and <ins> tags, while for the crossed out effect you can use the <s> tag and <del> tag.

Why are there 2 types of tags? The answer is the same as in the case of italics and bold.

In the HTML 4.01 era, the <u> and <s> tags were considered not to represent the structure, so W3C wanted to replace them with <ins> and <del> tags. But when HTML5 came, all four were again considered valid and validated to be standard.

The <ins> tag is a tag that was previously approved by HTML 4.01. This tag is an abbreviation of the insert. As the name implies, the <ins> tag is used to mark portions of text that are added later, that is when revising a post. In a web browser, text between the opening tag <ins> and the closing tag </ins> will be displayed with an underline effect.

The <u> tag will also be displayed with an underscore effect. This tag has been available since the beginning of the presence of HTML, which stands for underline. Because the ‘name’ of this tag means to display and not structure, in HTML 4.01 its use is not recommended (deprecated), but in HTML5 this tag is still considered valid.

As far as possible you should consider using underline effects in the text. Text with an underscore is often considered a link, so it will very likely make website visitors confused because they assume that this is a link and can be clicked on.

The <del> tag is an abbreviation of delete. This tag is used to mark the text you want to correct and is no longer relevant. The web browser will display the text between the opening tag <del> and the closing tag </del> with a crossed out effect. In HTML 4.01, the <del> tag is used to replace the <s> tag.

The <s> tag has been available since the initial version of HTML. The <s> tag is an abbreviation of strikethrough.

However, because the ‘name’ also does not reflect the structure (more to the display effect), the use of this tag is not condoned by HTML 4.01 (deprecated), but in HTML5 its use is re-approved again.

Here are examples of using the <ins>, <u>, <del> and <s> tags:

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Learn Underline and Strikethrough Element</title>
</head>
<body>
	<s> CSS </s> <ins> HTML </ins> is an abbreviation of
	<u> Hypertext Markup Language </u>.
	This abbreviation consists of 3 word components, 
	namely Hypertext, Markup and <del> League </del> Language.
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\7.png
Text Formatting Element

In addition to using the <del> and <s> tags, HTML also has the <strike> tag with the same display, but HTML5 states the <strike> tag is deprecated and should not be used anymore.

Superscript and Subscript Element

Superscript is the designation for small characters above text that are generally used in writing mathematical formulas such as ‘rank’. In number 3², number 2 is called

superscript. In HTML to create a superscript, the <sup> tag is used.

The subscript is a mention of small characters that are placed slightly below the normal line. Usually, the subscript is used for writing chemical formulas such as CO2. Number 2 here is called subscript. To create a subscript, HTML provides the <sub> tag.

Following is an example of using the <sup> tag and <sub> tag:

index.html

 <!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Learn Superscript and Subscript Elements</title>
</head>
<body>
	<p>
	Lately the levels of CO<sub>2</sub> in the air are getting worse.
	As many as 20,000<sup>2</sup> tons of CO2 are released from the 
	streets each year.
	</p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\8.png
Text Formatting Element

Preformatted Element

The <pre> tag is an abbreviation of preformatted, which means it is not formatted. As the name implies, the text between the <pre> tag and </pre> tag will be displayed “as is”, including whitespace characters such as spaces, tabs and enter (carriage returns).

Preformatted elements will be displayed by the web browser in a special font where the length of all letters are the same (fixed-width font), usually, the font used is Courier New, making it suitable for displaying program code or other technical text.

The <pre> tag belongs to a block level element type.

In HTML, fonts like Courier New are included in a group of fonts called monospaces.

Following is an example of using the <pre> tag:

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Learning Preformatted Element</title>
</head>
<body>
	<pre>
	This paper will appear as 'as 	is'.
	All spaces, 	tabs and enter characters will appear
	No format
	Generally 		this text is displayed in the courier new font.
	</pre>
</body>
</html>
Text Formatting Element

In writing text in HTML, usually, the web browser will ignore the second space and so on. Suppose you make a <p> word with multiple spaces <p>, then what appears is “a word with multiple spaces”. Unless the text is inside a special tag like <pre>, the web browser will only use 1 space character.

Code, Samp, KBD, and Var Element

These four elements may be rarely used. I discuss these tags because they are similar to the <pre> tag. All four are used to structure technical codes.

The <code> tag is an abbreviation of the program code. The <samp> tag stands for sample program, the <kbd> tag stands for keyboard input, and the <var> tag stands for variable.

As you can see, these four tags are used in technical text structures, specifically computer program codes. All four also include inline level elements, so they will follow the line where this tag is written.

The <code>, <samp> and <kbd> tags will appear with a monospace font such as the <pre> tag, while the <var> tag is displayed in italics.

Unlike the <pre> tag, these four tags will format whitespace, which means that if you make 2 or more spaces, the web browser only uses 1 space.

Here is an example of using these four elements:

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Learn Code, Samp, KBD, and Var Element</title>
</head>
<body>
	<p>
	<code>echo</code> is a PHP command to display something.
	For example: <samp> echo "Hello World" </samp>.
	To create a PHP variable, written with a dollar sign,
	like: <var>$a</var>.
	</p>
	<p>
	To see the results of HTML code from PHP you can use
	web developers tool, by pressing <kbd>CRTL+Shift+i</kbd>.
	</p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\10.png
Text Formatting Element

Cite, Quote and Blockquote Element

These three elements that we will discuss are used to make a quote. The <cite> tag is an abbreviation of citation that is used to mark someone’s work such as a book title, song title, movie title, musician, etc. The <cite> tag will be displayed in italics in a web browser.

The <q> tag is an abbreviation of a quote which means quote. This tag is used to make a short quote. In a web browser, the text between the opening tag <q> and closing tag </q> will appear as plain text with the addition of quotation marks at the beginning and end of the text.

The <blockquote> tag is also used to make a quote, but in contrast to the <q> tag which is an inline level element, the <blockquote> tag is a block level element, so it will appear in a new line, separate from the previous line. The web browser will add some space (margin) to the left side of the text for the <blockquote> tag. If the <q> tag is used to make a short quote, the <blockquote> tag is suitable for making a long quote.

The following are examples of using the <cite>, <q>, and <blockquote> tags:

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Learn Cite, Quote and Blockquote Element</title>
</head>
<body>
	<p>
	As <cite>Albert Einstein</cite> said:
	<q>person who never made a mistake never tried anything new.</q>
	</p>
	<blockquote>
	Friendship... is not something you learn in school.
	But if you haven't learned the meaning of friendship,
	you really haven't learned anything.
	<cite>Muhammad Ali</cite>
	</blockquote>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\11.png
Text Formatting Element

Mark Element

The <mark> tag is one of the new tags introduced in HTML5. This tag serves to mark the portion of the text that is considered important, relative to the text around it. This tag can also be used to mark search results.

Here is an example of using the <mark> tag:

Index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Learn Mark Element</title>
</head>
<body>
	<p>
	Here are the search results from the word 
	<mark>"web hosting"</mark>:
	</p>
	<p>
	The <mark>web hosting</mark> service provider 
	also has its own packages, according to the 
	features and prices provided, such as basic, 
	personal, business, corporate, etc.
	</p>
	<p>
	In the tutorial we will discuss technical things 
	that could be considered for choosing a 
	<mark>web hosting</mark> package.
	</p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\12.png
Text Formatting Element

As you can see, the web browser will display marked text with a yellow background.

Ruby Element

The <ruby> tag is used to create special characters used in East Asian languages such as Japanese, Chinese, or Korean. The word ‘ruby’ itself has nothing to do with the gemstone ‘ruby’ but comes from an English term that refers to the character ‘furigana’ in Japanese.

The <ruby> tag is a new tag from HTML5, with the pembantu helper tag ’<rt> (ruby text) and <rp> (ruby parentheses). If you don’t write Japanese, Chinese or Korean characters, this tag won’t be needed.

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Ruby Element</title>
</head>
<body>
  <ruby>
    攻殻<rt>こうかく</rt>機動隊<rt>きどうたい</rt>
  </ruby>
  <br><br>
  <ruby>
    攻<rp>(</rp><rt>こう</rt><rp>)</rp>
    殻<rp>(</rp><rt>かく</rt><rp>)</rp>
    機<rp>(</rp><rt>き</rt><rp>)</rp>
    動<rp>(</rp><rt>どう</rt><rp>)</rp>
    隊<rp>(</rp><rt>たい</rt><rp>)</rp>
    <rp>(</rp><rt>Kōkakukidōtai</rt><rp>)</rp>
  </ruby>
</body>
</html>

In order for the code above to work, we must set the text format with UTF-8. If you use Notepad ++, go to Settings-> Preferences-> New Document, from the window that appears select UTF-8 without BOM in the encoding section (check also apply to opened ANSI files), then click Close.

The <rt> tag works by ‘raising’ characters. In Japanese characters, the letters above are used for the pronunciation of the kanji characters below.

The <rp> tag functions to add parentheses. These brackets will appear for web browsers that don’t support the <ruby> tag. The <rp> tag will separate the ‘kanji’ and ‘pronunciation’ sections.

The above display is the result of the previous program code from a web browser that does not yet support the <ruby> tag, pay attention to the addition of parentheses.

Abbr Element

The <abbr> tag means an abbreviation. This tag is used to mark an abbreviation in the article.

The attribute that is often used for the <abbr> tag is the title. The title attribute functions to display the abbreviation for the abbreviation contained in the <abbr> tag. So that the length written in this attribute can be seen, we must place the mouse over the text.

Following is an example of using the <abbr> tag:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Abbr Element</title>
</head>
<body>
  <p>
    <abbr title="Hypertext Markup Language">HTML</abbr> 
	is the basis of all web pages on the internet. 
	If you want to learn how to create a website, 
	then <abbr>HTML</abbr> is your first step.
  </p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\13.png
Text Formatting Element

The <abbr> tag is displayed variously by a web browser. Web browsers Mozilla Firefox and Opera will display text with a dashed line under the text. This view is only visible if the <abbr> tag uses the title attribute. In Google Chrome, the <abbr> tag looks like plain text (without underline) with or without the title attribute.

The title is a global attribute that can be used for almost all other tags (not only for the <abbr> tag).

Address Element

The tag is used for content that contains an address and is a block level element. Most web browsers display this tag in italics (italic).

The tag can be placed at the bottom of an article (the address to contact the author of the article), in the footer section, or on a separate page, such as the contact us page.

Following is an example of using the tag:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Address Element</title>
</head>
<body>
  <address>
    You can contact us at 
    <a href="https://laikie.site/contact_us">
    laikie.site</a>.
    <br>
    If there are criticisms/suggestions/questions, you can email to 
    <a href="mailto:admin@laikie.site">admin laikie</a>.
    <br>
    Our office address is in: Chennai district, Tamil Nadu, India
  </address>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\14.png
Text Formatting Element

The <bdo> tag is an abbreviation of the bidirectional override. This tag is intended to change the direction of text that is normally written from left to right such as English or Indonesian, to from right to left like writing in Arabic.

To carry out its function, the <bdo> tag requires a dir attribute which can contain one of 2 values, i.e. ltr and rtl.

The ltr attribute value is an abbreviation of left to right which will make the text direction starting from the left then towards the right of the web browser. While rtl stands for the right to left which will display text from right to left.

The <bdo> tag belongs to the inline tag type, and will be displayed following the existing text flow. Here is an example of how to write and use the <bdo> tag in HTML:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn BDO Element</title>
</head>
<body>
  <p>
    <bdo dir="ltr">HTML is the basis of all websites on the internet. 
	If you want to learn how to create a website, 
	then the first thing to learn is HTML</bdo>
  </p>
  <p>
    <bdo dir="rtl">HTML is the basis of all websites on the internet. 
	If you want to learn how to create a website, 
	then the first thing to learn is HTML</bdo>
  </p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\15.png
Text Formatting Element

Dfn Element

The <dfn> tag is an abbreviation of definition. This tag is used to mark the definition of something. Just like the <abbr> tag, the <dfn> tag is also often added to the title attribute to explain the definition, or to be used together with the <abbr> tag (if the definition is also an abbreviation).

In a web browser, the <dfn> tag is displayed in italics (italic). Following is an example of using the <dfn> tag:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Dfn Element</title>
</head>
<body>
  <p>
    <dfn>HTML</dfn>  is the standard markup language
	used to create web pages.
  </p>
  <p>
    <dfn title="Hypertext Markup Language">HTML</dfn> 
     is the standard markup language 
	 used to create web pages.
  </p>
  <p>
    <dfn>
      <abbr title="Hypertext Markup Language">HTML</abbr>
    </dfn>
     is the standard markup language used 
	 to create web pages.
  </p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\16.png
Text Formatting Element

In the example above, you can see 3 alternative ways to use the <dfn> tag.

Small Element

The <small> tag is included in one of the deprecated tags in HTML 4.01, then ‘generated again’ by HTML5.

The text inside the <small> tag is displayed smaller than the normal text size. Because of its more appearance, the <small> tag wants to be removed by W3C on Html 4.01.

In HTML5, the <small> tag is redefined to mark portions of text that are not parts of the content, such as writing copyright, disclamier or legal notice.

Following is an example of using the <small> tag:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Small Element</title>
</head>
<body>
  <p>
    	Laikie is a computer science learning site, 
	it is hoped that laikie.site will be able 
	to become a learning media and share information
	about programming, hardware, and toeri 
	about computer science. 
    	<small>2019 Laikie. All Rights Reserved.</small>
  </p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\17.png
Text Formatting Element

Wbr Element

The <wbr> tag is relatively new and introduced by HTML5. The <wbr> tag is an abbreviation of Word Break Opportunity, which means: ‘word separator marker’. This tag is used to tell the web browser where words can be cut.

This effect will only be seen if a long word is placed in a small ‘container’, or when the web browser window is minimized. To be more easily understood, consider the following display:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning Wbr Element</title>
</head>
<body>
  <h2>Learn HTML</h2>
  <p>You will find the file you need by going to 
  directory/subdirectory/deeper/and/deeper/down/the/rabbit/hole/hereitis.</p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\18.png
Text Formatting Element

As you can see from the above display, the word “directory/subdirectory/deeper / and/deeper/down/the/rabbit/hole/hereitis” is too long, so the web browser displays it in the second line, even though the first line is still left but not enough space for the word to go up to the first line.

One solution to this is to provide hyphens. The word ” directory/subdirectory/deeper / and/deeper/down/the/rabbit/hole/hereitis” can be cut into “directory-/subdirectory-/deeper-/and-/deeper-/down-/the-/rabbit-/hole-/ hereitis “. Thus the web browser will separate the words in the “-” character, as shown below:

D:\Website\Harus serius\Laikie Berita\HTML\part4\19.png
Text Formatting Element

However, the character “-” will still be displayed if there is enough space to display all words.

The best way is to insert the <wbr> tag to replace the “-” character, like this:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning Wbr Element</title>
</head>
<body>
  <h2>Learn HTML</h2>
  <p>You will find the file you need by going to 
  directory<wbr>/subdirectory<wbr>/deeper<wbr>/and
  <wbr>/deeper<wbr>/down<wbr>/the<wbr>/rabbit<wbr>
  /hole<wbr>/hereitis.</p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\20.png
Text Formatting Element

As you can see, the Web browser will display it in 1 word if the web browser window is wide enough, and break the word if the web browser window is not wide enough.

The web browser will split words into parts marked with <wbr> tags so that the text display remains neat. Using the <wbr> tag is suitable if your website uses responsive design and has long words.

Deprecated Elements and Attributes

During the journey from the initial version of HTML to HTML5, there are some tags that are outdated or known as deprecated. You might find these tags because some web browsers still support them (for reasons of compatibility for ‘old school’ websites).

Here are some deprecated tags in HTML, which should not be used anymore:

  • Tag <acronym>: to make an abbreviation. This tag was replaced with the <abbr> tag.
  • <applet> tag: to enter Java Applet.
  • <baseasonage> tag: to make the default font settings for web pages. To change the appearance of the font, you should use CSS.
  • Tag <big>: to make the text size large. This tag is purely for display and is recommended to use CSS.
  • <center> tag: to make the text centered. It is recommended to use CSS, but this tag is still widely used because it is more practical.
  • Tag <dir>: to create a directory list. This tag was replaced by the <ul> (unordered list) tag.
  • Tag <font>: To set the text font. This tag is still often used to set the appearance of text, such as color, font size, font type, etc. This tag is entirely for adjusting the display and is recommended to use CSS.
  • Tag <isindex>: to enter the search box.
  • The <menu> tag: is used to create a list menu.
  • <strike> tag: to create text with a wrong line or strike-through. This tag is replaced by the <s> or <del> tag.
  • <tt> tag: to create text with teletype display and display with a monospace font. This tag can be replaced by the <code> tag.
  • <blink> tag: This tag originates from the browser war era between Internet Explorer and Netscape. The <blink> tag is used to make the text flicker which is quite phenomenal in its day. Currently, the use of the <blink> tag is considered disturbing visitors and the web browser no longer supports it.
  • The <marquee> tag: This tag also originated in the browser war era between IE and Netscape. The <marquee> tag is used to make the text effect run in a web browser. This tag is a little HTML tag that produces a ‘move’ effect. Some web browsers still support the <marquee> tag.
  • <frame> and <frameset> tags: Both of these tags are used to display multiple html pages on the same screen. Currently, the use of frames is no longer recommended, although modern web browsers still support it.

If you want to see if the web browser still supports these tags, please run the following HTML code sample:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Deprecated tag in HTML5</title>
</head>
<body>
  <p>
    <acronym title="HyperText Markup Language">
      HTML
    </acronym> 
    is the basis of all web pages on the internet.
	If you want to learn how to create a website, 
	the first thing to learn is 
    <strike>CSS</strike> HTML.
  </p>
  
  <p>
    Some <big>references</big> 
    that I use for this book are
    <font color="blue" face="arial" size="4px">
      Learning Web Design
    </font>,
    and <font color="green" size="5px">
    HTML Ultimate Reference
    </font>
  </p>
  
  <p>
    In this page there are many tags with status 
    <tt>deprecated</tt>.
    You are advised not to use these tags.
  </p>

  <p>
    However, as you can see, 
	the web browser still supports most of these tags.
    <blink>Tag Blink </blink>is no longer supported, 
	but the marquee tag is still displayed by 
	the web browser as an example below:
  </p>

  <marquee>Was seriously learning HTML</marquee>
  <center>Copyright laikie.site 2019</center>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\21.png
Text Formatting Element

As you can see, almost all deprecated tags are still supported by web browsers. For this reason, also the HTML5 specification does not use the term deprecated but chooses the term obselete. In my opinion, the meaning of the word obselete sounds more polite than deprecated. But both of them still refer to tags and attributes that you should not use anymore.

In addition to deprecated elements, there are also deprecated attributes that should not be used anymore. Some of them are: bgcolor, color, marginbottom, align, border, cellpadding, cellspacing, and valign.

For a complete list of deprecated / obselete tags and these attributes, please visit the WHATWG website.

HTML Entity

In HTML, there are some special characters that cannot be written to be displayed in a web browser. For example, we cannot write the following text in HTML:

In HTML, the <p> tag is used to create paragraphs.

The web browser will process “<p>” as an HTML tag, not part of the text. This happens because the characters “<” and “>” have special meaning in HTML. To overcome this, we must use HTML Entity.

HTML entity is a way of writing characters using special symbols so they are not translated by a web browser as part of HTML. We can also use HTML entities to write characters that are not on the keyboard such as the copyright symbol (©), trademark symbol (™), or currency characters such as the euro (€).

There are 2 ways of writing HTML entities, namely by using names (also called named entities) and using numbers (numeric entities). Numeric entities can be written using decimal numbers (base 10) or hexadecimal numbers (base 16).

For writing HTML entities, begin with the “&” character and end with the “;” character. For example, for writing copyright characters, here’s how to write it:

  • Named entity: &copy;
  • Numeric entity (decimal): &#169;
  • Numeric entity (hexadecimal): &#x000A9;

Immediately, we try to use it in HTML:

index.html

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn HTML Entity</title>
</head>
<body>
  <p>© 2019 Laikie. All Rights Reserved.</p>
  <p>© 2019 Laikie. All Rights Reserved.</p>
  <p>© 2019 Laikie. All Rights Reserved.</p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\22.png
Text Formatting Element

It can be seen that all three are displayed with copyright characters. For a complete list of entity characters, you can visit dev.w3.org.

Non-Breaking Space

One of the HTML Entity characters that are used quite often is the character ‘space’, or known as ‘non-breaking space’. This character has an entity value: &nbsp; Non-breaking space is often used if you want to create multiple spaces in HTML text.

Seperti yang telah kita ketahui, jika kita memisahkan kata dengan beberapa spasi, web browser hanya akan menggunakan 1 karakter spasi saja. Jika anda menginginkan kata tersebut dipisah dengan 2 atau lebih spasi, maka harus menggunakan &nbsp;.

Here is an example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Non-Breaking Space</title>
</head>
<body>
  <h3>Learn HTML</h3>
  <h3>Learn         HTML</h3>
  <p>    Learn     HTML</p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part4\23.png
Text Formatting Element

As the name implies, words are separated by characters &nbsp; will be considered by the web browser as one part, so it will not be separated if the size of the web browser window is reduced (as opposed to the <wbr> tag).

In this chapter, we have discussed various tags and attributes that are used to format text in HTML. However, there is still one more tag group that is also used to process text, i.e. list/list element.

In the next chapter, we will discuss in detail about the List Element in HTML.

HTML Tutorial List

  1. Learn HTML For Beginner (Part 1 : Introduction HTML)
  2. Learn HTML For Beginner (Part 2 : Basic Structure of HTML)
  3. Learn HTML For Beginner (Part 3 : Head Element)
  4. Learn HTML For Beginner (Part 4 : Text Formatting Element)
  5. Learn HTML For Beginner (Part 5 : List Element)
  6. Learn HTML For Beginner (Part 6 : Image Related Element)
  7. Learn HTML For Beginner (Part 7 : Audio dan Video Element)
  8. Learn HTML For Beginner (Part 8 : Table Element)
  9. Learn HTML For Beginner (Part 9 : Form Element
  10. Learn HTML For Beginner (Part 10 : HTML5 Form Element)
  11. Learn HTML For Beginner (Part 11 : Embed, Object dan Iframe Element)
  12. Learn HTML For Beginner (Part 12 : HTML5 Canvas Element)
  13. Learn HTML For Beginner (Part 13 : Scalable Vector Graphics (SVG))
  14. Learn HTML For Beginner (Part 14 : HTML5 Semantic Tag (Layout))


What do you think?

Comments

Leave a Reply

5 Pings & Trackbacks

  1. Pingback:

  2. Pingback:

  3. Pingback:

  4. Pingback:

  5. Pingback:

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading…

0

Comments

0 comments

Learn HTML For Beginner (Part 3: Head Element)

Learn HTML For Beginner (Part 5: List Element)