[For beginners] Basic HTML syntax and how to use tags!

By reading this article, you will understand the role and usage of the basic syntax used in HTML.

If you are just starting to learn HTML, or if you want to reconfirm the basic syntax of HTML, please check it out!

[Basics] Features and Usage of HTML Tags
- How to use HTML tags
Six Basic Syntaxes Essential for HTML
- DOCTYPE tag
- html tag
- head tag
- meta tag
- title tag
- body tag
[Copy and paste OK] Template using basic HTML syntax
summary

[Basics] Features and Usage of HTML Tags

HTML tags are marks that make up content such as outlines, layouts, and sentences in HTML documents .

There are many types of HTML tags, each with a specific role. The browser knows what the content is from the tags that are entered in the HTML file.

For example, the p tag, which is a type of HTML tag, has the role of representing a paragraph, so the enclosed content is recognized as a sentence.

There are other tags such as the head tag that conveys the information of the HTML document to the browser and the header tag that represents the header.

Websites and web services are built on the basis of HTML tags.

How to use HTML tags

There are two ways to write HTML tags: one is to enter the content between the opening tag and the closing tag, and the other is to display it only with the opening tag.

A start tag is a tag that marks the beginning of an HTML document. Enter the name of the tag between angle brackets "<>".

The closing tag is the tag that ends the content you have entered, enter the same tag name as the opening tag after entering the slash “</>” in angle brackets.

For example, to use a tag that displays the character p tag, enter as follows.

In addition, you can use HTML tags that display only the opening tag by simply entering the name of the tag between angle brackets "<>".

The input method differs depending on the type of HTML tag used, so check which input method is used before using the tag.

Six Basic Syntaxes Essential for HTML

To create a website using HTML documents, you need to create the foundation of the site with six HTML tags, which are the basic syntax of HTML.

I will explain the characteristics and usage of tags, which are the basic syntax of HTML.

DOCTYPE tag

DOCTYPE is to declare that the document in the specified file is written in HTML.

DOCTYPE declaration is done by entering the DOCTYPE tag at the top of the file . By using the DOCTYPE tag, you can tell the browser which version of HTML to use and the structure of the file.

The method of declaring the use of HTML5 in DOCTYPE is as follows.

<!DOCTYPE html>

Display only the opening tag as above.

The article below explains it in detail, so if you want to know about specifying versions other than HTML5, be sure to check it out.

html tag

The html tag has the role of telling the browser that the specified range is entered in HTML.

DOCTYPE declares the type of file, while htm tag declares the extent to which HTML is used.

When using the html tag, specify the lang attribute that determines the language used within the element.

The html tag is almost always specified directly below the DOCTYPE tag, and is entered as follows.

<!DOCTYPE html>
<html lang="ja">
HTML
</html>

Use the html tag by entering the opening tag and the closing tag.

head tag

The head tag is a place to enter general information about the HTML file, and has the characteristic that it is not displayed on the browser.

The information specified in the head tag includes the title of the HTML file, reading of external files, and metadata.

The main information to be entered in the head tag is as follows.

What content in the file tells search engines
Keywords for content created in files
Character code type
file title
Stylesheet information

All of the above information is not displayed on the browser, and is intended to be recognized by search engine crawlers as basic information about the file.

How to enter the head tag is as follows.

<!DOCTYPE html>
<html lang="ja">
  <head>
  </head>
</html>

Enter the head tag directly below the html tag.

meta tag

A meta tag is a tag that conveys information about an HTML file to search engines, and is used by entering it in the head tag.

The information that can be specified in the meta tag is as follows.

Meta description: You can enter a summary of the HTML file in about 100-120
Meta Keywords: Specify keywords that represent the contents of the HTML file
Character code type
Specifies a viewport that restyles the display screen to fit the size of the device.

Each of the above contents is entered in the head tag with a meta tag.

How to enter the meta tag is as follows.

title tag

As the name suggests, the title tag is a tag that specifies the title of the HTML file, and is entered within the head tag.

How to enter the title tag is as follows.

<head>
    <title>Web</title>
</head>

The title specified in the title tag will be displayed in the tab on the browser.

By entering a title tag, the contents of multiple pages open on the browser can be grasped by tabs, making it easier for the user to use.

body tag

The body tag is a tag that inputs the contents of the html file that you want to display in the browser.

All the content on the screen displayed when the user opens the website is created within the body tag.

The input method of the body tag is as follows.

<!DOCTYPE html>
<html lang="ja">
  <head>
  </head>
  <body>
  </body>
</html>

Enter the body tag directly below the closing tag of head, and use the opening and closing tags.

[Copy and paste OK] Template using basic HTML syntax

Based on the 6 basic syntaxes that are indispensable for HTML, we created a template that can be used by copying and pasting by adding frequently used HTML tags.

If you want to copy and paste the basic syntax for coding and proceed with site design smoothly, please use it.

HTML syntax template

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="web
        <meta name="keywords" content=
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
        <link rel="stylesheet" href="test.css"> <!--test.css
        <title></title>
    </head>
    <body>
        <header>
            <nav>
                <ul>
                    <li><a hrer="#">1</a></li>
                    <li><a hrer="#">2</a></li>
                    <li><a hrer="#">3</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <article>
                <p>力</p>
            </article>
            <aside>
                <p></p>
            </aside>
        </main>
        <footer>
            <nav>
                <ul>
                    <li><a hrer="#">1</a></li>
                    <li><a hrer="#">2</a></li>
                    <li><a hrer="#">3</a></li>
                </ul>
            </nav>
        </footer>
    </body>
</html>

The characteristics of the tags entered in the body tag are summarized below.

header: A tag that specifies the header part of the web page.
main: tag that specifies the main part of the web page
article: A tag that specifies the main article in the main content
aside: A tag that specifies the sidebar part within the main content
footer: tag that specifies the footer part of the web page
nav: A tag that specifies a navigation menu within a web page
ul: A tag that specifies an unordered list
li: tags that specify the contents of each list

The above tags are not required, but they are often used in HTML coding, so it’s good to remember them.

summary

This time, I explained the basic syntax of HTML and how to use tags. How was it?

After creating the HTML file, first specify the basic syntax below.

DOCTYPE tag
html tag
head tag
meta tag
title tag
body tag

The above basic syntax is essential when creating a web page in HTML, so let’s understand the meaning of each tag.

Also, if you want to finish entering the basic syntax without trouble, please try using the basic syntax template described in this article!