In recent years, with the spread of computers and smartphones, online business activities via
the Internet
have become increasingly important. Above all, it is important to understand HTML, which forms the basis of the web system.
HTML is an indispensable language for creating websites such as homepages, but some companies are faced with the problem of “Where should I start learning about the content?” or “HTML seems difficult, but I don’t understand it.” There are probably many people in charge.
In this article, we will explain the basics of HTML and its usage scenarios that even beginners can easily learn, as well as the basic structure of “HTML tags” and “
CSS
” that you should understand.
What is HTML?
Simply put,
HTML
is the language used to create the screens displayed on websites you view on the Internet.
It is an abbreviation for “Hyper Text Markup Language”, and to put it simply, it is a format that defines the structure of the text (document) and layout of pages published on the web. .
Although the term “markup language” may seem complicated, it basically clarifies the structure of the text, such as where to place the title and main text on a website, and where to group paragraphs together. The aim is to create specifications that are easy to use for creators around the world.
It is important to understand that the creator is sending instructions to the computer using markers called “HTML tags” to change the appearance of the website.
You can easily view the source of a web page
All web pages are written in HTML, and the source of this HTML can be easily displayed on a browser. The following explains how to display HTML source in Google Chrome.
1. Launch Google Chrome
2. Open any web page where you want to view the HTML source
3. Right-click on the web page to display the context menu
4. Click “View page source” in the context menu
5. The HTML source of the web page will be displayed in the new tag.
Background of the birth of HTML
HTML is a language that was created in the 1980s from its predecessor, SGML (Standard Generalized Markup Language).
SGML, which was standardized by ISO (International Organization for Standardization) at the time, has a high degree of freedom of expression, but is difficult to use, and it is necessary to define an easy-to-understand structure that can be easily used by many people in various environments. There was. Therefore, HTML was born, which is based on the functionality of SGML.
In 1989, Tim Berners-Lee (hereinafter referred to as Mr. Berners-Lee), who was working as a programmer at CERN (European Organization for Nuclear Research), a world-class technology research institute, developed a system that allowed him to connect to a server from any machine or software. Developed the Internet system “WWW (World Wide Web)” that makes it possible to view certain information. Part of that system was HTML0, an early version of HTML.
In 1994, the international organization W3C (World Wide Web Consortium), founded by Berners-Lee, established HTML, the language for expressing web pages, as an international standard technology. It has become widely popular all over the world.
HTML has continued to evolve year by year, with HTML1.0 in 1993, HTML2.0 in 1995, and HTML3.2 in 1997, and the current latest version, HTML5, was recommended in 2014.
Differences from XML and XHTML
When learning HTML, it is often compared to “XML” and “XHTML,” which are also markup languages. XML, like HTML, is a language based on the functionality of SGML.
HTML is for displaying information that is easy for humans to read, while XML is for transmitting information that is easy for machines to understand, and the key point is that each has completely different characteristics.
Because XML is a program specification, it is more extensible than HTML, and it is important to understand that it is used to sort and exchange data, and to recognize and manage importance.
On the other hand, XHTML can be said to be an intermediate language that is based on the functionality of XML but also has the characteristics of HTML. The writing rules are stricter than HTML, so there are more steps, but the key point is that there is a high degree of freedom of expression.
It is far less well known than HTML, and there are not enough learning opportunities, so it is not becoming more popular. Development itself ended in 2009, so it is unlikely that new XHTML will be created in the future. If you are unsure which to use when creating a website, it is best to use general HTML.
HTML terminology
Below, we will explain HTML terminology.
tag
Tags
are like marks used to help computers understand the meaning and content of text. Humans can understand text when they see it, but computers cannot understand text in its raw form.
Therefore, we use landmarks called tags to help computers understand the meaning of the text. Generally, by inserting text between “start tag = <>” and “end tag = </>”, the computer can understand the meaning of the text.
element
An element refers to the entire text part between the start and end tags, including tags. For example, “<strong>” and “</strong>” below are tags, but the entire tag including the text part is called an element.
<strong>ProFuture MarkeTRUNK</strong> = element
attribute
Attributes allow you to provide additional information and settings to HTML elements. Generally, by writing attributes in the start tag, you can add additional information and settings to the element. For example, “href=”” surrounded by the following tags is the attribute, and the URL portion between “” (double quotation marks) is the attribute value.
< a href =”https://www..co.jp/mk/”> ProFuture MarkeTRUNK </a>
Attribute: href=””
Attribute value: https://www..co.jp/mk/
What are the basics of HTML tags?
HTML tags, which are used when creating websites such as homepages, are a language that instructs computers about the structure of sentences, specifying headings, paragraphs, image display, links to other documents, etc. Let’s take a look at the basic structure to see what it is.
| Typical types of HTML tags | |
| <h1>～<h6> | Tags that create headings (the smaller the number, the larger the heading) |
| <a> | Tag for embedding links (specifying link destinations to other pages) |
| <p> | Tag specifying paragraph |
| <br> | Tag specifying line break |
| <hr> | Tag to draw borders horizontally |
| <img> | Tag to insert image |
| <button> | Tag to create a button |
There are over 100 types of HTML tags, and by using the marks (tags) shown in the table above, you can give meaning to the displayed characters.
HTML tag usage example
Below are examples of how to use HTML tags.
When creating a heading “What is HTML?”
For example, if you want to create a heading “What is HTML?”, use the following.
<h1>What is HTML? </h1>
Use the HTML tag “<h1>” to enclose the start and end of the text so that you can identify it as a heading. Headings can be selected from “<h1> to <h6>” depending on the font size you want to represent.
If you want to create a button called “HTML tag”
If you want to create a button called “HTML tag”, do the following.
<button>HTML tag</button>
Also, let’s express the button type with “type=””. For example, if you want to create a “button” using a general-purpose button (one whose behavior when clicked is not determined), use the following.
<button type=”button”>Button</button>
The key is to specify the button you want to represent by type.
The closing tag of the enclosure usually contains a backslash like </h1> or </button>. However, in the case of “HTML5”, the writing method is different, such as tags called “empty elements” such as “br”, “hr”, and “img” without backslashes, and the backslash “p” can be omitted. So be careful.
SEO measures with HTML tags
Even if there are mistakes in the HTML tags, there are basically no penalties from search engines (search programs such as Google or Yahoo!).
For example, Google’s crawler program acquires various information on the Internet, such as websites, images, and PDFs, on a daily basis, and is said to be able to correct errors and mistakes in HTML structure and make decisions. Masu.
However, search engine results are displayed based on the information that crawlers move between links in HTML and analyze and create a database, so it is important to have the pages you create recognized correctly.
If your website is not recognized by crawlers, your website will not be displayed as search results. In order for the site you have created to be displayed at the top of search results and seen by many people, it is necessary to optimize the HTML and implement effective
SEO
measures.
Specifically, put keywords in the appropriate distribution in “h1 to h4”, put appropriate keywords in the embedded link of “tag” to increase the crawler circulation rate, and be careful about broken links. Examples include:
| Each role of h tags 1 to 4 | |
| h1 | Main heading (title) |
| h2 | Medium headings (chapter, table of contents, etc.) |
| h3 | Subheadings (points of each chapter) |
| h4 | Super small heading (supplementary information smaller than h3) |
The heading tags “h1-h4” are important for both users and search engines. Headings are important clues to understand the content of a website. Include keywords that are frequently searched for or that are easy for users to find in your headlines. Similarly, it is important to include appropriate keywords that clearly describe the content of the <a> tag links.
Disadvantages of HTML
The disadvantage of HTML is that even a small mistake in writing can have a large impact. For example, the indispensable “tags” in HTML are a set of “start tag = <>” and “end tag = </>,” but even if the end tag “/” is missing, the display may be distorted. The characters may become garbled and you will not be able to create the composition you want.
Also, only simple designs can be constructed and dynamic expressions are not possible. Since HTML has these disadvantages, it is necessary to compensate for them with various other languages.
What is CSS?
When understanding HTML, many people may have questions such as “What is CSS?” and “What is the difference between CSS and HTML?” Below are the basics of CSS and specific usage examples.
Overview and history of CSS
<a href=” https://www..co.jp/mk/words/css ” target=”_blank”> CSS </a> is an abbreviation for “Cascading Style Sheets”, and like HTML, it is a W3C It is a “language that specifies the style of sentences” recommended by. It was first proposed by Haakon Wium Lee in 1994, and “CSS1” was born in 1996. After that, it went through “CSS2” and “CSS2.1”, and now “CSS3” is the latest version.
While HTML is a language that specifies the text structure itself, CSS is a language that allows you to specify what kind of decoration (design) to add to the text. To put it simply, HTML represents the content of the text, and CSS specifies the color, size, etc. of that text.
You can create it by writing it directly in HTML tags, HTML files (files containing sentences enclosed in HTML tags), or writing them in CSS files (files created externally).
What you can do with CSS
By using CSS, you can make headings into speech bubbles or ribbons, add gradation effects to the background, create animations, and more. You can also use CSS to specify text animations that appear one character at a time, animations that spread circles like ripples, and various types of rotation and confetti.
If you want to create even more movement with animation, it is a good idea to combine it with
JavaScript
(a program that defines movements). Many websites (homepages) are designed using HTML, CSS, images, and JavaScript. Build your own original design by referring to your competitors’ HTML and CSS.
Steps to create an HTML file
Below, we will explain the steps to create an HTML file using a familiar text editor app.
Write text using tags in a text editor app
Write characters in a text file using tags. Below we will explain how to write each tag.
“h tag” used to specify titles and headings
If you write the above case using tags, it will look like this:
“p tag” used to specify paragraphs in sentences
Use the “p tag” to specify a paragraph of text. “p” stands for “Paragraph” and means a paragraph. Mark up when the scene changes, such as when the content of the sentence changes or when the topic pauses and moves on to the next topic. For example, use it like this:
<p>Today was a great day for sightseeing as the weather was very good! </p>
<p>Now, let’s move on to the next topic! </p>
“li tag” used for bullet points
If you want to make sentences or words into bullet points, use “li tag”. “li” is an abbreviation for “list item” and means a list item. For example, if you want to create a list with the commonly used black circle icon, construct the “li tag” by specifying “disc” in the “type attribute” as shown below.
<ul>
<li type=”disc”>Strawberry</li>
<li type=”disc”>Mikan</li>
<li type=”disc”>Banana</li>
</ul>
*The “li tag” is used between <ul>~</ul> or <ol>~</ol>.
The following will be displayed.
“a tag” used when inserting a link
If you want to insert a hyperlink into text, use the “a tag”. “A” is an abbreviation for “Anchor” and has meanings such as “lowering an anchor” and “anchoring a ship.” It is mainly used by specifying a URL in the attribute value.
< a href =”https://www..co.jp/mk/”> ProFuture MarkeTRUNK </a>
Also, if you want to open and display a separate screen, specify the second attribute “target” as shown below.
< a href =”https://www..co.jp/mk/” target=”_blank”> ProFuture MarkeTRUNK </a>
By specifying the attribute value “_blank” for the second attribute “target”, the link destination will be displayed on a separate screen.
Change the file name to “.html”
Once you have written the text using tags, save the file. At that time, select “Save as” instead of “Save”. After entering the save file name, change the extension from text “.txt” to “.html” and save.
A warning message will appear saying, “Changing the extension may make the file unusable. Do you want to change it?” Click “Yes” to change it.
Check with a web browser such as “Google Chrome”
If you change the extension to “.html” and save it, the next time you open the file, it will be displayed in a web browser instead of as text. When you open the file, the web browser set to “main use” will automatically start and display the created content, so use the web browser to check the final appearance.
Do web marketers need HTML knowledge?
Although it may seem that web marketers do not need knowledge of HTML, it is better to have some basic knowledge of HTML for the following reasons.
Communication with the production side becomes smoother
Web marketers primarily work on websites, and they frequently update and change website content. Therefore, how to make a website easy to use is a very important issue from the standpoint of efficiency.
At times like this, if you can smoothly exchange things like “I want you to change things like this” or “I want the design to look like this” with the production side, communication will be smooth and both parties will be able to work more efficiently. You can proceed with your work. Even with a simple knowledge of HTML, you can convey these orders to the production side in an easy-to-understand manner.
Be able to handle HTML emails
If you have a basic knowledge of HTML, you will be able to freely handle HTML emails. HTML mail allows you to use the HTML language as is in your emails. You can change the font size and font color instead of the text that doesn’t change as much as before. You can also embed images and use tables to visually convey more information to users.
summary
HTML, which is the basis of the web system, is a language for specifying the structure of sentences. When learning how to create a website (homepage), it is important to understand the basics of HTML tags and the difference between HTML and CSS, and to take SEO measures while keeping in mind the users and search engines who will be viewing them. Masu. Let’s learn HTML by referring to the basic structures of various websites.