We will teach you the basics of website design.<br> ~Web Structure: HTML~

Hello! This is Kakurai from the WS Department (Webmaster Support Department).
On a daily basis, I work on operations, updating our clients' websites together with them.

The importance of a company's website as the "face of a company" on the Internet is increasing, and many of our clients are "web managers" who are involved with the Internet for the first time in their work.

When dealing with us as a web production company, it is often necessary for you to understand technical terminology and website structure in order to make decisions when making daily updates, but it is also true that there is much content that is difficult to imagine through verbal exchanges alone.

So, for those of you who are new to web design, I would like to explain the basics of web design. This time, I will focus on the structure and HTML that are the foundation of a website.

1. About the Structure of the Web

The websites we visit every day exist on servers on the Internet.

A server is like a piece of land on the Internet.
The website is the "house" built on the land, and each room in the house is a web page within the website. That's the structure.

The vast amount of data uploaded to the server is used as the materials and blueprints to construct the website. Users can load the data for each room on their computer or smartphone screen as if they were visiting various rooms in a house, and the data is displayed as a page on their device screen.

In the house on the server, each room is managed by a division called a "directory." If we roughly divide the directories by room name, they look like this:

If we were to replace the room structure with a web and use our Monosasu site as an example, it would look roughly like this.

In order for a user to view a page on a website, they need to know the location of the directory in which it is located. The URL indicates that location.

When data is uploaded to the server, a URL is constructed according to the directory structure.
By the way, the URL of the page you are currently viewing is this:
URL: http://www.monosus.co.jp/posts/2018/06/133412.html

If you break down the alphanumeric sequence of this URL, it looks like this:
The Monosus site server (http://www.monosus.co.jp) has a folder for postings (posts), which are further divided by year (2018).
The folders are further divided by month (06)
The HTML for each article ID (133412.html) has been uploaded.

The server is the land, the website is the house, and the pages are the rooms. The division of the rooms is the directory, and the URL of each page is constructed based on that.
Do you have a rough understanding of the structure of the website?

Next, I will explain what HTML is.

2. About HTML

HTML is an abbreviation for HyperText Markup Language, a markup language created to create web pages. Most of the web pages we see every day are based on HTML. The text you are reading now is also created using HTML.

All you see on the screen is normal Japanese text, but if you look behind it (the source), you'll see a screen written in HTML surrounded by mysterious numbers and symbols. (We'll show you how to read the source later.)

The original role of HTML is to add marks and meaning to text (markup). Let me explain what it means to add meaning in a way that is easier to imagine...

For example, let's say we have an ordinary wooden stand.
Is this wooden platform a "chair" or a "desk"?

To explain this using HTML-specific code concepts, it looks like this:

・Chair
<chair>wooden platform</chair>

・For desks
<Desk>Wooden table</Desk>

When the word "wooden table" is surrounded by the tags <chair>~</chair>, this table has the meaning of "chair". Conversely, when surrounded by the tags <desk>~</desk>, this table has the meaning of "desk".
*The "/" notation in the tag at the end of a sentence is used to close the tag and indicate "this is the end of the meaning."
*Of course, HTML tags such as chairs and desks do not actually exist (lol).

By surrounding text with HTML-specific alphanumeric characters called tags, it is possible to give meaning to the text.

Since the desk and chair are a bit abstract, let's explain it a bit more in terms of actual HTML tags. For example, to make a certain text meaningful as the title of a page, use the title tag.

By surrounding text with "<title>...</title>", you can make that text the title of the page. This tag itself is not actually displayed on the page, but it plays a role in displaying the title in the tab when viewing the page on a PC, as the text when bookmarking, and as the page title displayed when searching.

That's all there is to how to write a title tag!

<title>monosus</title>

If you write data in HTML format surrounded by this tag, the phrase "monosus" will have meaning as a title.

Now let's actually look at the source of the screen and search for the part of the HTML that has the meaning of the title. (※Only possible on PC)

Press the Ctrl key and the "U" key on your keyboard at the same time (Command+Option+U on a Mac). This will take you to a page in a separate tab with a long list of alphanumeric characters and Japanese text. This is HTML. It may make your eyes hurt, but there is a word "title" hidden within.

Is the description enclosed in <title>～</title>?
If you found it, now you can read HTML!

Another tag that often appears is the "heading" tag.
If you enclose text you want to make into a heading in tags "<h2>...</h2>", that text will have the meaning of a heading. If you write data in HTML format with the text enclosed in these tags, the source code part between <h2> and </h2> will disappear and the text part will be displayed with the meaning of a heading.

There are heading tags ranging from h1 (H1) to h6 (H6) according to the level. h1 has the strongest meaning, and as the number increases the meaning becomes weaker. It depends on the site, but many companies use their company logo as h1 and the main page heading as h2.

Monosasu site's h1 (H1) to h6 (H6).
The design of each heading is laid out using CSS, a code separate from HTML.

In addition to providing meaning to text, HTML can also load images.

The tag used in this case is the img tag (image tag).
The img tag does not need to be enclosed in a closing tag, so you can call and display the image just by putting the URL of the image you want to call in the ~ part of <img src="~" />. It is not only possible to call images, but also to use other tags to load data in different languages. The method of calling is not limited to HTML, but it is enough to know that it is possible to load other data with HTML.

In addition to the title, h2, and img tags introduced this time, there are many other tags, each with its own meaning. I won't explain the other tags here, but I hope you can get a general idea of what HTML is written in.

3. Title and meta tags

Finally, there are two tags that web managers should be particularly aware of: title tags and meta tags.

Both tags are invisible on a website page, but they play an important role in unexpected places, such as being displayed on the screen in search results on Google, Yahoo, etc.

Users browsing a website will quickly skim through the titles of pages that come up in a search and click on the page with a title that is close to what they are looking for. The title tag is a very important tag for SEO (search engine optimization) purposes, as it greatly affects the order in which pages are displayed in search results. It also plays a role in informing search engines such as Google and Yahoo about the content of the page.

Next, meta tags are tags that describe "page information other than the title." There are several types of meta tags, but the one that web managers should be particularly aware of is "description."

This is a tag that describes the page, and is the text that is displayed in small letters under the title of the search results. (If there are multiple search keywords, the description text will not necessarily be displayed.) There is also a theory that this tag does not affect the ranking of search results, but in order to provide accurate information to users, we recommend that you update the description text.

If you want to check what text is currently in the description of your company's website, you can look at it in the same way as you did when searching for the title tag.

With your company's website open, press the Ctrl and "U" keys on your keyboard at the same time (Command+Option+U on a Mac).
Open the HTML and look for the tag "<meta name="description" content="～" />".
The "~" part is set as the description text.

The description text is set for each page, so be sure to check it out for the main content on your company's website.

This time, we talked about the basics of "Website structure," "HTML," and "title and meta tags." We hope this will be helpful to web managers who are running their own company website for the first time. If we have another opportunity, we would like to introduce more basics to you.

KAKURAI Hiromi

I love my own kid. I do 'oshi-katsu' every day.

We will teach you the basics of website design. ~Web Structure: HTML~

1. About the Structure of the Web

2. About HTML

3. Title and meta tags

We will teach you the basics of website design.
~Web Structure: HTML~