[For complete beginners] Explaining the basics of HTML tags from scratch!

programming

"I want to make a website, but I don't know where to start."
"HTML seems difficult... What are tags?"

These are common concerns that beginners have, and many stumble at the first step.
But don’t worry. In this article,What are HTML tags?of,Easy to understand for complete beginnersLet me explain.

Language that even elementary school students can understandandSpecific code exampleUsing
Our goal is to enable anyone to create the basics of a website.


What is HTML? A simple explanation starting from the basics

Conclusion: HTML is the foundation of your website

HTML (High-Level Text, Message, Message Locator) is a programming language for creating web pages.Underlying Languageis.
The role of HTML is to determine, for example, what is a heading and what is an image.Deciding on the structure of informationis.

For example, when you write a blog, you decide on the title, body of text, and image, right?
The configurationHTML is written in a format that computers can understand.is.


What are HTML tags? Explaining their roles and usage

Conclusion: Tags are symbols that "enclose" information.

The characteristics of HTML are:Surrounding text with commands called tagsis located.
Tags are enclosed in < and > symbols and are used as follows:

1
2
<h1>This is a headline</h1>
<p>This is a paragraph.</p>
  • <h1> represents "Heading 1"
  • <p> represents a "paragraph"

All tags are enclosed in a start tag and an end tag.
In the closing tag / EnterLet's not forget that.


Commonly used HTML tags and their uses

Conclusion: You can create a web page just by learning basic tags

The first tags that beginners should remember are:

  • <h1> ~ <h6>: Heading size
  • <p>: A paragraph of text
  • <a>: Link (anchor)
  • <img>: Display image
    • ,
        ,
      1. :list

    Example: Code to create a link

    1
    <a href="https://www.example.com">Click here</a>

    Example: Code to display an image

    1
    <img src="sample.jpg" alt="サンプル画像">

    If you remember this,You will be able to create a simple self-introduction page..


    HTML rules and points to note

    Conclusion: Be careful not to make mistakes or forget to close tags

    The important thing when writing HTML is to "follow the rules."
    If you write tags incorrectly, they may not be displayed or the layout may be disrupted.

    Common mistakes

    • Forgotten closing tag:<p>Hello
    • Invalid tag nesting:<a><p>link</a></p>
    • Missing double quotes:<img src="sample.jpg">

    To avoid these mistakes,Completion features for editors such as VSCodeIt is better to use.
    Also, right-click on Google Chrome and select "Inspect"Check HTML structurecan.


    The Importance of HTML Education According to Public Data

    The Ministry of Education, Culture, Sports, Science and Technology:Utilizing HTML in Information Education in Elementary and Junior High SchoolsWe are doing it.
    The Ministry of Internal Affairs and Communications' "Information and Communications White Paper" also states that ICT is a basic skill for developing ICT personnel.
    Learning HTML is considered important.

    Source: https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r04/html/nd143320.html

    That is, the HTML isIt is also socially valuable and useful for career development.It's a skill.


    Common HTML errors and how to fix them

    Conclusion: Forgetting to close tags is the most common mistake

    Here are some common stumbling points for beginners:

    • <p>or<div>etc.Closing tag is missing
    • <img>The path (location) is incorrect.
    • <>I write the symbol in full-width.

    Solution

    • Always use tags in pairsLet's do it
    • Put the images in the same folderThis reduces mistakes.
    • Use your editor's auto-completion featureIt is useful to

    Complete code that can be created using only HTML

    The following can be created using only HTML:Simple profile pageis.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>わたしの紹介</title>
    </head>
    <body>
      <h1>Hello, this is ○○</h1>
      <p>This page was created using only HTML.</p>
      <img src="me.jpg" alt="自分の写真" width="200">
      <h2>hobby</h2>
      <ul>
        <li>reading</li>
        <li>programming</li>
        <li>trip</li>
      </ul>
      <p>More information <a href="https://example.com">Here</a> Please see.</p>
    </body>
    </html>

    This code .html If you save it under the nameAnyone can create a homepage.


    Summary: HTML tags are a great place to start

    HTML may seem difficult, but actuallyA language that requires little learning and can be used immediatelyis.

    • Using tags correctly can help you create web pages
    • If you follow the basic rules, you won't fail.
    • Using an editor makes it easy to avoid mistakes

    HTML is a great starting point for programming.
    Get started and create your own page!

Copied title and URL