HTML Introduction: Basic HTML syntax and tag usage
This guide explains HTML, which is essential for creating websites such as homepages.
You'll be able to learn by doing, as I'll explain while writing simple code together!
What is HTML?
HTML (HyperText Markup Language) is a markup language used to display text and images in web browsers.
HTML is not a programming language, but rather called a markup language. It was created for building websites.
If everyone created their own way to display content in browsers, it would be difficult for both browser creators and website creators, right?
Think of HTML as rules for displaying content in browsers.
By establishing rules like "use ○○ to display text" and "use ○○ to display images", browsers can follow these rules to display content properly.
This site and this page are also created with HTML.
A browser is software that displays websites that users search for.
There are many types of browsers, including Google Chrome provided by Google and Microsoft Edge provided by Microsoft.
Safari, which iPhone users are familiar with, is also a type of browser provided by Apple.
Everyone reading this page is probably using some kind of browser.
Let's Look at HTML
HTML is created using text and alphabetic characters like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NakoBase Title</title>
</head>
<body>
<h1>NakoBase</h1>
<p>Let's learn HTML basics</p>
</body>
</html>
This is a simple example, but even this can be displayed in a browser!
Let's Actually Write HTML and Display It
Now let's actually write HTML and display it!
The article Prepare tools for learning HTML and CSS explains how to set up an editor and browser, so if you haven't done this yet, please refer to it.
Open VSCode and Create a File
First, open VSCode like this.
Then, create a file named sample.html from New File. (Any filename is OK)
Copy the HTML
Copy the same HTML sample from earlier and paste it into sample.html.
<!DOCTYPE html>
<html lang="en">
<head>
<title>NakoBase Title</title>
</head>
<body>
<h1>NakoBase</h1>
<p>Let's learn HTML basics</p>
</body>
</html>
If it looks like this in the editor screen, you're all set!
Don't forget to save your changes.
Display in Browser
To display in a browser, open your browser (Chrome, etc.) and drag and drop the created sample.html file.
If it displays like this in the browser, your HTML is being shown!
Repeat This Process
Now, let's change the HTML file like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>NakoBase Title</title>
</head>
<body>
<h1>Changed it!</h1>
<p>Let's learn HTML basics</p>
</body>
</html>
Now when you refresh (reload) the browser, the display should change.
This way, by repeating update HTML file => reload browser, you can create websites while checking the display.
We'll continue building websites by repeating this process.
The font size and colors of HTML can be changed using a stylesheet language called CSS.
Right now it has a simple appearance without decoration, but CSS allows you to change the visual appearance.
I'll explain CSS in another article.
HTML Writing Basic Rules
Now that you've created HTML, let's learn the basic rules for writing HTML!
Writing in the sample.html from earlier will deepen your understanding.
Basic Rule 1: HTML Tags
The foundation of HTML is HTML tags that look like <tag name>.
By surrounding content with pairs of <tag name> (opening tag) and </tag name> (closing tag), it's recognized as an HTML tag.
There are many types of tags, and the role and meaning of the content changes depending on which tag you use.
<tag name>content</tag name>
<h1>Heading</h1>
<p>Paragraph text</p>
Self-closing Tags
Some tags don't have content, so they don't need closing tags.
You'll get used to these as you use them, so you don't need to memorize them all!
<img src="image.jpg" alt="description"> <!-- HTML tag to display images -->
<br> <!-- HTML tag for line breaks -->
<hr> <!-- HTML tag to display horizontal lines -->
Basic Rule 2: Attributes
HTML tags have attributes that control the tag's behavior.
For example, the <img> tag for displaying images has attributes called src and alt.
<img src="image.jpg" alt="description">
src is an attribute that specifies the image path (file location), and alt is an attribute that specifies the image description.
In other words, you can create HTML by learning HTML tags and attributes!
By using HTML tags appropriately, you can create HTML that's easy for users to see and for search engines like Google to recognize.
Basic HTML Structure
Now that you understand the basic rules, let me explain the basic HTML structure and each tag.
Document Type Declaration
This is a tag you'll definitely use when creating HTML.
Use this to declare that this file is an HTML file, so write it at the very top of the HTML file as a standard practice.
<!DOCTYPE html>
html Tag
This is also a tag you'll definitely use.
Write it below the document type declaration above and wrap everything.
<!DOCTYPE html>
<html lang="en">
</html>
HTML tags often specify lang as an attribute.
By specifying lang, you're setting webpage information, and it's not displayed in the browser.
head Tag
Mainly used to set webpage information and is not displayed in the browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NakoBase Title</title>
</head>
</html>
For example, using the title tag as shown allows you to specify the webpage title.
Also, using the meta tag as shown allows you to specify the webpage's character encoding.
You don't need to understand character encoding right now, but for Japanese sites, it's safe to specify UTF-8 to prevent character corruption.
There are many tags that can be written in the head tag, so I'll introduce them in another article. You can learn them gradually as needed.
body Tag
The body tag is mainly used to set the webpage content.
Basically, the contents of this tag are displayed in the browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title>NakoBase Title</title>
</head>
<body>
<h1>NakoBase</h1>
<p>Let's learn HTML basics</p>
</body>
</html>
The tags introduced so far are the basic structure for writing HTML.
When writing HTML, it's convenient to use this structure as a template.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website Title</title>
</head>
<body>
</body>
</html>
By the way, you'll notice there are two spaces in nested sections like inside the html tag and head tag. This is called indentation.
Indentation is used to make code more readable. Proper indentation makes the code structure easier to understand.
If you have time, try writing with indentation like in the examples.
Commonly Used HTML Tags
From here, I'll introduce tags commonly used when actually creating websites.
These are basically tags written inside the body tag.
Heading Tags (h1~h6)
Tags that represent headings.
h1 is the largest heading.
<h1>Largest heading</h1>
<h2>Second largest heading</h2>
<h3>Third largest heading</h3>
<h4>Fourth largest heading</h4>
<h5>Fifth largest heading</h5>
<h6>Smallest heading</h6>
Browsers have default styles applied, so the font size increases as the heading level gets larger.
Paragraph Tag (p)
A tag that represents text paragraphs.
This might be the most frequently used tag on websites with lots of text.
<p>This is paragraph text.</p>
<p>New paragraphs are created with new p tags.</p>
This is how it displays in the browser.
This page you're currently viewing also uses p tags extensively.
Line Break Tag (br)
A tag that inserts line breaks within text.
<p>First line text<br>Second line text</p>
This is how it displays in the browser.
It's often used inside p tags like in the example.
Horizontal Rule Tag (hr)
A tag that draws horizontal lines on the page.
<p>Content above</p>
<hr>
<p>Content below</p>
Used for page or content divisions, but I recommend using it moderately so it doesn't become hard to read.
Emphasis Tags (strong, em)
Tags that emphasize text.
<p>This is <strong>bold</strong> text.</p>
<p>This is <em>italic</em> text.</p>
This is how it displays in the browser.
The strong tag displays in bold, and the em tag displays in italic.
List Tags (ul, ol, li)
Tags that create lists.
ul creates unordered lists (bullet points), ol creates ordered lists.
li creates list items and must always be written inside ul or ol.
<!-- Unordered list -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- Ordered list -->
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
This is how it displays in the browser.
Use ul tags when no ordering is needed, and ol tags when ordering is required.
Link Tag (a)
A tag that creates links to other pages or files.
The a tag uses the href attribute to specify the link destination.
<a href="https://nakobase.com">Link text</a>
<a href="/about">Link to page</a>
This is how it displays in the browser.
This is a very frequently used tag.
Image Tag (img)
A tag that displays images.
Use the src attribute to specify the image path (file location).
The alt attribute allows you to specify a description of the image.
<img src="image-file.jpg" alt="Image description">
<img src="logo.png" alt="Logo">
Image formats that can be displayed include jpg, png, gif, svg, etc.
PDF format images cannot be displayed.
Comments
This has appeared here and there so far, but here's how to create comments.
By wrapping with <!-- -->, you can leave comments in HTML.
<!-- Comment -->
Comments are personal notes that are not displayed in the browser. They're often used to make code more readable.
While not visible on screen, others can see them if they try, so don't leave confidential information.
The tags introduced so far are commonly used HTML tags.
When actually creating websites, you'll combine these tags to build them.
Practical Example
Using the tags introduced so far, let's actually create a self-introduction website!
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Self-Introduction Page</title>
</head>
<body>
<h1>Welcome to My Self-Introduction Page!</h1>
<p>This is my self-introduction page.</p>
<h2>My Hobbies</h2>
<ul>
<li>Reading</li>
<li>Listening to music</li>
<li>Programming</li>
</ul>
<h2>My Favorite Sites</h2>
<p><a href="https://www.google.com">Google</a> is a useful search engine.</p>
<hr>
<p><em>This page was created for HTML practice.</em></p>
</body>
</html>
If it displays like this, it's complete.
Modifying it with your own information would make for even better practice!
id and class Attributes
The id and class attributes allow you to assign management names to HTML tags.
They don't affect browser display, but are mainly used with CSS and JavaScript, which I'll introduce in other articles.
<p id="title">Title</p>
<p class="text">Text</p>
For example, you could make the color of the id "title" red and the color of the class "text" blue.
You'll naturally understand this as you learn CSS, so first understand these concepts.
- id and class can be added to any HTML tag
- id and class should use alphanumeric characters (Japanese characters may cause issues)
- Only one id can be assigned to one HTML tag
- Multiple classes can be assigned to one HTML tag
Summary
I've explained the basics of HTML.
This article contains the fundamentals, so please practice by actually moving your hands.
Once you understand HTML basics, you can learn CSS to add styling and create more complex structures. First, practice with basic tags and get familiar with HTML!