ブログ記事詳細

Article Details 記事詳細

2020年06月06日

ウェブ制作をマスターするために基礎を理解しよう!第一回:HTMLとは?

お世話になっております。SeekNextの佐藤です。
今回からは実際に使用できるスキルやテクニックだけでなく基礎的な情報についても書いていければと考えております。

今回はWeb制作やWebサービスを学ぶ始めるのに一番重要な「HTML」について書いていこうと思います。

最初は「ウェブ制作」を学ぶ上で一番の土台となる『HTML』について数回に分けて解説していきます。

HTMLとは?

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。このHTMLに装飾を加えるCSSやJavaScriptを用いて現在のホームページやサービスは運用されています。
そのためHTMLを理解することが出来れば、高度な技術を学習する際も理解しやすくなりますし。

早速HTMLをみてみよう!

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトルです</title>
</head>
<body>
  こんにちは
</body>
</html>

上記のようなコードをHTMLと呼びます。このようなコードの組み合わせによってホームページを作成していきます。最初はよく分からないと思いますが、流しながらで良いので進んでいきましょう。

コード解説

<!DOCTYPE html>
このコードがHTMLで書かれていますよと明言しています。HTMLを書く際は必ず記載する「おまじない」みたいなものです。プログラミングにはこういった「おまじない」みたいな決まり文句も多いので、深く考えずHTMLを書く際に「最初に必ず記載するものなんだ」くらいの理解で問題ありません。

<html lang=”ja”>
</html>

記載されたコードがHTMLとして認識されます。HTMLではタグと言われる二つのタグで要素を囲むことによって色々なものを表現します。lang=”ja”はこのHTMLは日本語を基本として制作していますと明言しています。lang=”en”にするとこのサイトは英語サイトですと明言していることになります。
※最近ではlang属性はあまり関係ないとされていますので、記載しなくても問題ありません。

<head></head>
ここにはファイルの設定情報を記載します。

<meta charset=”UTF-8″>
文字コードを指定しています。文字コードについてもあとで解説しますので、これも最初は「おまじない」と認識して大丈夫です。数々のサイトやサービスを制作してきましたが、「UTF-8」以外で指定されたサイトやサービスは稀です。

<title>タイトルです</title>
そのファイルのタイトルを設定可能です。検索を順位を決定するSEOに直結する部分ですので、そのファイルに適切なタイトルを設定します。

<body></body>
この中には実際に見える部分を書いていきます。ホームページ上に「こんにちは」と記載したい場合はこの中に記載していきます。

今回はHTMLの基礎コードについて書いていきました。次回はHTMLを実際に書いていきたいと思います。