HTML Basics: Comprehensive Guide from Writing and Editing to Studying Methods

<> With the mandatory programming education, opportunities to hear the word programming have increased recently. However, when asked “What programming language do you know?”, few programming beginners can immediately answer with a specific language. </>

Even so, HTML is very well known as a programming language. The reason is that HTML is widely used by people in professions other than programmers.

You might be thinking “HTML is widely used by people in professions other than programmers…?” Now, this article is an introduction to that mysterious language, HTML. It explains everything from basic HTML writing and editing methods to studying methods. Let’s get started.

What Exactly Is HTML? The Meaning of HTML

Now, I said that HTML is used by people other than programmers, but what exactly is HTML?

According to W3Schools, a foreign programming learning site, HTML is explained like this:

HTML stands for Hyper Text Markup Language HTML is the standard markup language for Web pages

Now, some of you might have question marks floating above your heads. First, for programming beginners, the term “markup language” might not click.

The “markup” in markup language is “mark up” in English. According to the dictionary, this English phrase means “to add codes that indicate document structure and display methods.”

This might be a bit difficult. In simple terms, “HTML is a language for writing text.” You might have used Microsoft Office’s Word. In Word, you make text bold, create lists and checklists, create tables, add titles, right? Furthermore, you might change text colors or table formats.

HTML is a convenient tool that allows you to describe such tasks in a programming way. Just explaining in words might not make it click. Let’s actually look at what HTML looks like.

The following code is actual HTML code.

<br /><meta charset="utf-8">
<title>Page Title</title>
# This is a Heading
This is a paragraph.

This is a another paragraph.

This code can be converted and displayed in a human-readable format like this.

“Hmm, I understand the logic, but is this really convenient? Isn’t it troublesome?” Some of you might feel this way. Indeed, looking at just this, HTML seems very tedious and verbose.

As you might be thinking, HTML is a very tedious language to write. I’m writing a blog article using HTML right now, and the fact that writing HTML is very tedious is something everyone acknowledges.

Actually, HTML is rarely written directly. Let me give some examples.

Many people have probably seen blog articles from free blog services like Hatena Blog, Ameba Blog, or note.com. Those blog articles are displayed in HTML. Beyond that, almost all websites and web pages accessible from internet browsers can be said to be displayed in HTML.

So are all the bloggers writing on Ameba Blog or note.com writing their blogs in HTML? No, they’re not. On free blog platforms, in most cases, there are graphical user interfaces that allow you to add HTML-compatible decorations to text without specialized knowledge of HTML - in other words, just with a computer mouse or smartphone tap.

You might have heard of WordPress too. WordPress is a free blog creation tool made in PHP, created for writing blogs. WordPress is said to have about 70% market share of all websites in the world, and is used in various website cases from personal blogs to large company homepages.

WordPress similarly doesn’t require you to write HTML. It’s made user-friendly so that even people without HTML skills can complete wonderful articles with just mouse operations.

In this way, although HTML is used in almost all websites, not everyone who writes those articles knows HTML.

Is HTML a Programming Language?

Now, as some of you might have noticed, I haven’t called HTML a programming language once in this article. As I said above, “HTML is a markup language.” HTML is not a programming language.

HTML is a language whose purpose is to render, or display, things written in HTML in a human-readable way. On the other hand, programming languages are meant to automate operations, process strings and data.

For example, the following is programming code written in a programming language called Python.

<br />import itertools

test_list = [[5,10,15,20,25,30],[20,40,60,80,100],[-20,-40,-60,-80,-100]]
output_list = list(itertools.product(*test_list))

import csv

count = 0

with open("output.txt", 'w', newline='') as myfile:
wr = csv.writer(myfile, quoting=csv.QUOTE_ALL)
wr.writerow(["id","candlesize","up","down"])
for i in output_list:
wr.writerow([count] + list(i))
count = count + 1

This program outputs text data in CSV format like the following.

"id","candlesize","up","down"
"0","5","20","-20"
"1","5","20","-40"
"2","5","20","-60"
"3","5","20","-80"
"4","5","20","-100"
"5","5","40","-20"
"6","5","40","-40"
"7","5","40","-60"
"8","5","40","-80"
"9","5","40","-100"
"10","5","60","-20"
"11","5","60","-40"

Such programs can be implemented similarly in other languages like Ruby, JavaScript, or Java. But what if you tried to get this output in HTML?

<table class="table table-striped table-bordered">
<thead>
<tr>
<th>id</th>
<th>candlesize</th>
<th>up</th>
<th>down</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>5</td>
<td>20</td>
<td>-20</td>
</tr>
<tr>
<td>1</td>
<td>5</td>
<td>20</td>
<td>-40</td>
</tr>
...
</tbody>
</table>

In this way, HTML can only express text in a different form. Rather than generating long data from short code like programming languages, HTML’s characteristic is to generate readable text from long code.

HTML Basics: How to Write

Now, let’s learn a bit about how to actually write HTML.

HTML basically starts with the following format.

<br /><meta charset="utf-8">
<title></title>

“ indicates that the file is written in HTML.

The part enclosed in html is where you write HTML. When writing HTML, you always insert this tag.

In head, you write information needed for SEO measures such as the web page title and keywords.

In body, you write the text you actually want to display using HTML tags.

For example, the following is the simplest HTML example. It uses h1, p, and a tags.

<br /><meta charset="utf-8">
<title></title>
# yuipro
A blog about all things programming, including programming languages, software, development environment setup, scripting/coding, Linux, databases, website/web service creation, and more. It covers a wide range of programming languages including Python, Ruby, SQL, Bash, and JavaScript.

[yuipro | Programming; Coding; Technology; Deep Learning etc](https://yuis-programming.com/)

Congratulations. You’re now a proper HTML coder. In HTML, it’s said that over 80% of HTML is made up of p tags, a tags, and h1~h6 tags. If you understand these three tags in HTML, you can consider the basics to be OK.

You can actually edit the above HTML with your own hands at the following site. Try changing the text, and if you have extra time, try adding HTML tags you know.

Repl.it - HTML online text editor

HTML Basics: How to Edit

I know someone who wrote HTML during an internship at a web media company. This was probably work intended to have them learn what HTML is like while actually writing it, but when actually writing articles for media sites or news sites, HTML is rarely written directly.

As I already mentioned above, HTML is basically automatically generated by WordPress or blog sites.

When editing HTML in practice, you mostly use blog engines like WordPress, or use Markdown or text editors. Markdown and text editors are explained at the bottom of this article, so please be sure to read them.

HTML Basics: Study Methods

I said that directly writing HTML isn’t very common… but actually, rarely, there are times when you absolutely have to write HTML. For normal article production and blog article creation, by using Markdown or tools that come standard with WordPress, you didn’t need to touch HTML directly.

However, when you try to do something a bit fancy with HTML, you need to write HTML. For example, when you want to release a web service, or when you want to do SEO (Search Engine Optimization).

In such cases, you need to learn HTML somewhat. But even so, you don’t need to learn all HTML tags at all. I myself have created over 100 websites and web services, but there are many HTML tags I don’t know and have never used.

For example, the “ tag is essential in HTML, but since most text editors can generate it with a shortcut key, there’s no opportunity to type it myself. If you asked me right now to type this tag without anything to reference, I probably couldn’t. I remember it now because I’m introducing this tag to everyone, but I’ll completely forget it in a month. That’s how unnecessary it is to remember.

<br /><aside>
<base>
<del>

There are many other tags like this that aren’t used regularly. So which HTML tags do you need to remember?

You don’t need to remember them, but I’ve listed important HTML tags that are used extremely often that you should somewhat commit to memory. If you’re about to learn HTML, please use this as a reference.

body
a
p
h1 ~ h6
b
strong
br
div
iframe
style
table

If you need tags other than the above HTML tags, I recommend the following learning site. Please use it as a reference.

HTML & CSS Beginner Course | Progate

If you can read English, this site is also recommended. You can learn about 50 commonly used HTML tags while actually writing them.

HTML Tutorial

Slightly Different Ways to Write HTML

Now, at the beginning of this article, I said that there aren’t many opportunities to write HTML directly. As mentioned, HTML is a tedious language to write. Therefore, even programmers rarely write HTML directly.

Finally, let me introduce some slightly different ways to write HTML.

Utilize Text Editors

Do you know what a text editor is? A text editor is software developed to facilitate programming. You’re probably using Windows 10. Windows has software called notepad.exe, commonly known as “Notepad.” It’s famous.

This Notepad app is also a type of text editor. But actually, this Notepad is not very suitable for programming. Famous text editors developed for programming include Sublime Text 3, Atom, and Sakura Editor. These text editors are equipped with various features such as color-coding programming code, debugging to solve errors, and executing programming code with shortcut keys.

This is an example of writing HTML in Atom, a text editor I’ve been using for years.

Were you surprised? Text editors come with shortcut keys for easily writing HTML and programming languages as standard features.

Writing <p>Hello!</p> in HTML takes a long time, but doesn’t it seem very easy if you just type p and press Enter?

For those who want to know more about the Atom text editor, it’s introduced in another article. Please read it if you’re interested.

Text editors are also introduced in detail in another article. Please read it if you’re interested.

Sublime Text 3, Atom, Vim, etc., but which text editor is actually best? [For Beginners]

Utilize Markdown

Have you heard of Markdown? Actually, in recent years, Markdown has been rapidly gaining popularity, especially among bloggers. Markdown is, in a word, a markup language for writing HTML quickly.

Let me give an actual example. The following code is actual Markdown code.

# yuipro

A blog about all things programming, including programming languages, software, development environment setup, scripting/coding, Linux, databases, website/web service creation, and more. It covers a wide range of programming languages including Python, Ruby, SQL, Bash, and JavaScript.

[yuipro | Programming; Coding; Technology; Deep Learning etc](https://yuis-programming.com/)

This Markdown is converted to the following HTML.

<h1 class="code-line" data-line-start="0" data-line-end="1"><a id="yuipro_0"></a>yuipro</h1>
<p class="has-line-data" data-line-start="2" data-line-end="3">A blog about all things programming...</p>
<p class="has-line-data" data-line-start="4" data-line-end="5"><a href="https://yuis-programming.com/">yuipro | Programming; Coding; Technology; Deep Learning etc</a></p>

What do you think? Isn’t it simple? Compared to normal HTML writing, Markdown allows you to dramatically improve the speed of writing text.

You can practice Markdown at the following site. Please try it with your own hands.

Repl.it - Markdown Online Editor

For those who want to know more about Markdown, it’s introduced in another article. Please read it if you’re interested.

Markdown Beginner Tutorial! Explaining How to Use Major Tags. Important Points to Note When Writing Markdown in Atom How to Embed Markdown in HTML - Strapdown.js

Markup Languages Other Than HTML

I think you understand that HTML is a markup language. Knowing that, you might be thinking:

“There are many programming languages like Ruby, Python, Java… but is HTML the only markup language?”

No, it’s not. HTML is not the only markup language. Since it’s outside the scope of this article, I can’t explain in detail, but let me briefly introduce them.

Have you heard of a language called LaTeX? This is a markup language created to render and mark up mathematical formulas used in math and physics. You might have seen academic papers. Research papers frequently contain mathematical formulas used in mathematics. When including formulas in PDF files of research papers, using this LaTeX language is the major method.

$$\sum^n_{i = 1} \frac{{n\choose i}}{n!}$$

For those who want to know more about LaTeX, it’s introduced in another article. Please read it if you’re interested.

How to Embed LaTeX in HTML and View in Web Browser - MathJax WordPress Plugins That Can Use LaTeX and Formulas and How to Use Them How to Use LaTeX and Install on Windows

Also, there’s a tool called mermaid. Mermaid is strictly speaking more of a JavaScript framework than a markup language. Mermaid isn’t known as a markup language, but since it converts text data and displays it in a different form, I’ll introduce it as it could be called a markup language.

With mermaid, you can create modeling graphs and flowchart diagrams. It might be applicable to work.

graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);

For those who want to know more about mermaid, it’s introduced in another article. Please read it if you’re interested.

Installation and Usage of “mermaid”, a JavaScript Library for Modeling

Additionally, the Markdown I introduced above is also a type of markup language. It’s positioned as a markup language for writing markup languages.

Summary

How was it? For programming beginners, learning HTML is the first step. However, it’s also true that many people are afraid to take that first step. As I introduced this time, HTML is not a programming language, and is simpler and easier in construction.

Let me say this clearly: HTML is not difficult at all. I hope this article can provide even a little courage to take the first step in programming learning.