初心者向けHTMLの書き方【サンプル付き、webデザイン観点も解説】

 

初心者向けのHTMLの書き方を解説します。タグの書き方や、使い分けなど入門的な初心者向けのHTMLをサンプル付きで、webデザイン観点も踏まえて解説していきます。書き方だけでなくwebデザイン観点も踏まえて理解できると、実際にHTMLで就職するときや稼ぐ時に役立つかと思います。

 

この記事の信頼性ですが、僕はwebデザイン分野で5年の経験がありまして、今ではwebデザインで企業コンサルをして毎月10万円以上副業収入を稼げるまでになりました。なので、HTMLの書き方だけでなくwebデザインとしてのHTMLの役立て方とか観点も理解できると思います。

 

HTMLとwebデザイン

 

まずHTMLを理解していきましょう。HTMLとは、webデザインにおける枠組みを定義できるマークアップ言語です。厳密には、プログラミング言語ではないですね。なので、webデザインをしたい、webデザインを仕事にしたい場合は必須のスキルです。

 

CSS

ちなみにwebデザインにおいては、HTMLだけではなくてCSSも学習する必要がありますね。CSSは、HTMLで定義したwebデザインに対して、色合いなどを定義することが可能です。これで基本的なwebデザインが可能になります。webデザイナーやフロントエンドエンジニアの入り口は、HTMLとCSSでOKです。

 

 

HTMLでブラウザに表示する方法

 

初心者であれば最初にHTMLを学び始める上で、HTMLでどのように自分がwebデザインできるのかをイメージしてからの方が学習のモチベーションが高まるでしょう。そのために、HTMLでブラウザ表示するところから解説したいと思います。まず、次の物を準備します。

 

・テキストエディタ sublime text
・ブラウザ なんでも

 

これがテキストエディタですね。

 

次のサンプルコードをコピーしてみます。

<!DOCTYPE html>
<html>
<head>
<title>weblife-forjob</title>
<meta charset=”UTF-8″>
</head>
<body>
<h1>HTMLの初心者向け学習</h1>
<p>ブラウザに表示する</p>
</body>
</html>

 

先ほどのテキストエディタにコピーします。

 

 

File>Saveで保存します。

 

そして保存されたHTMLをブラウザに放り込むと表示されますね。

 

こんな感じでまずは初心者はHTMLでブラウザにどう表示できるのかざっくりやってみてモチベーションアップするといいですね。では、徐々にHTMLについてもっと理解していきましょう。

 

HTMLの書き方

 

初心者が覚えるべき最初のHTMLの書き方の基本は、挟むと入れ子構造、そしてタグの中にさらにタグを書いて詳細に指定する、ということですね。

 

挟むと入れ子構造

挟むと入れ子構造とは何かと言うと、先ほどの例でいうと、下記です。入れ子構造にしてみました。挟むとは、タイトルを<title>weblife-forjob</title>のように挟むことで、入れ子構造とは<html></html>のなかに、さらに<head></head>があるように、タグで挟む中にさらに挟まれるタグを入れるという感じです。

 

<!DOCTYPE html>
<html>
<head>
<title>weblife-forjob</title>
<meta charset=”UTF-8″>
</head>
<body>
<h1>HTMLの初心者向け学習</h1>
<p>ブラウザに表示する</p>
</body>
</html>

 

こんな感じにすると、コーディングとして可読性も上がり、メンテナンスがしやすくなります。実際にプログラマーやエンジニア、フロントエンドエンジニアとして食べていくには美しいコードをかけることも重要になってきます。

 

属性指定もできる

またHTMLでは、属性指定も可能ですね。属性指定とは、<p></p>というpタグ(テキストを表現するタグ)ににアンカーリンクでurlをつけることもできたりします。こういうやつです。

 

参考:webデザイナーの就職選択肢と方法【知っておいたほうが得です】

 

これはどうHTMLしているかというと、下記のようになりますね。ちなみに、リンクするurlで狙っているキーワードをテキストリンクに入れる方がSEO効果があります。GoogleがそのURLがどんなコンテンツか識別しやすくなるからです。

 

<a href=”https://weblife-forjob.com/webdesigner-employment”>webデザイナーの就職選択肢と方法【知っておいたほうが得です】</a>

 

またwebデザインやUXデザイン観点で言うと、関係ないコンテンツ同士で内部リンクを貼るのはあまり効果的ではないですね。クリックされにくいですし、Google的にも関連性がないリンクだと認識されます。

 

なので、基本的には、例えばこういったHTMLのコンテンツであれば、HTMLに関するコンテンツへのリンクだけを内部リンクとするのがいいです。

 

HTMLの構造

 

では次にHTMLの基本的な全体構造をみていきましょう。

 

HTML宣言

まずはHTML宣言ですね。まあお作法的な感じです。このファイルがHTMLファイルだと言うことを定義する感じですね。

 

<!DOCTYPE html>

 

htmlタグ

次にHTMLタグですね。このタグは、HTMLファイルにおいてHTMLの部分の開始と終了を定義します。ここからここまでがHTMLですよー、と言う感じです。

 

<html>

</html>

 

headタグ

次にheadタグですね。headタグはwebブラウザ上に表示されない、設定部分を記載します。例えば、titleとかですね。あとはCSSファイルもこちらに書いていきます。

 

<head>

</head>

 

titleタグ

titleタグは、ブラウザのタブに表示される部分のことです。SEO的にも意味のあるタグなので、キーワードを選定して描くといいですね。

 

<title>

</title>

 

bodyタグ

最後はbodyタグです。基本的にwebブラウザに描画されるのは、このbodyタグの中身です。なので、webデザインとしてはこのbodyタグ内にどのようにマークアップしていくかと言う話になりますね。

 

<body>

</body>

 

初心者向けHTML頻出タグ

 

そうしましたら、どうbodyタグ内にwebデザインのためのマークアップをしていくか解説します。基本的には、ここで解説しているマークアップのためのタグを覚えるといいですね。

 

pタグ

pタグはHTMLで一番基本的なbody内に描くタグですね。文章を描く場合に使います。

 

<p>ここに文章を描く</p>

 

hタグ

hタグは見出しに使います。hタグはSEOにも非常に大きな意味を持っていて、キーワードをhタグに含めるように作るとSEOにも良いです。なお、hタグはh1からh4など数字が大きくなると小さい見出しになり入れ子構造にするのが基本です。

 

<h1>1番大きい見出し、基本的に1つだけ</h1>
<h2>2番目に大きい見出し。幾つでも</h2>
<h3>3番目に大きい見出し。幾つでも</h3>

 

imgタグ

imgタグは、画像に使います。altは書いておくと、SEOにも効果があって、画像検索で見つかりやすくなりますね。

 

<img src=”XXX.jpeg” alt=”アイウエオ”>

 

aタグ

aタグは、リンクを作るときに使いますね。先ほども解説下通りで、aタグで内部リンクを作る場合は、キーワードを入れた方がいいですね。

 

<a href=”リンク先URL”>キーワードを入れる</a>

 

ui・ol・liタグ

ui、ol、liタグは箇条書きを書くためのHTMLタグですね。liの場合は。・での箇条書きになります。

 

<ul>
<li>1段目</li>
<li>2段目</li>
<li>3段目</li>
</ul>

 

こちらの場合は、数字での箇条書きになりますね。

 

<ol>
<li>1段目</li>
<li>2段目</li>
<li>3段目</li>
<ol/>

 

 

webデザインに生かすHTML

 

より本格的にHTMLを学ぶ時に、webデザインを意識していく場合には、ClassとIdタグ、Divタグ、Spanタグが重要になりますね。マークアップ言語の中では、設計に近くなります。

 

ClassとId

ClassとIdは、HTMLで書いたそれぞれのタグに対して識別できるユニークな属性を書くことで、CSSを書くときに効率的にwebデザインすることができます。これはズバリ、そのタグ名の者には固有のwebデザインを施すことができると言う目的があります。あるいは共通化とも言えます。

 

 <タグ名 class=”ペケペケ”>〜<タグ名>
<タグ名 id=”パカパカ”>〜<タグ名>

 

classとidには、英数字を使うルールがあり、また先頭文字に数字は使えません。エラーが起きる可能性があります。classとidの違いでいうと、classはHTML内で何個も同じclassを使えますが、idはidだけあって1つのid名しか作れません。

 

divタグ・Spanタグ

divとspanタグはまとまりを作る時に使います。

 

<p>おはよう</p>
<p>こんにちは</p>
<p>こんばんは</p>
<p>さようなら</p>

 

これを次のようにします。

 

<div class=”first”>
<p>おはよう</p>
<p>こんにちは</p>
</div>
<div class=”second”>
<p>こんばんは</p>
<p>さようなら</p>
</div>

 

こうすると、CSSでfirstの塊だけオレンジ色、secondの塊だけ水色の背景色などのように塊単位でwebデザインを作成できます。divとspanの違いは、改行されるかどうかです。divが改行されて、spanは改行されません。

 

初心者向けHTML学習方法

 

ここまででHTMLの基本的な初心者としての内容は大丈夫です。もっと詳細に初心者向けのHTMLを学びたい場合は、ditinstallあたりが無難だと思います。無料の動画サービスでHTMLを学べます。

 

ditinstall

 

まとめ

 

ということで初心者向けのHTMLを解説しました。webデザインの学習でマークアップ言語を学びたい場合は、このHTMLから始めるといいですね。HTMLの次はCSSを学ぶといいです。

 

人気:webデザインスクールのおすすめと選び方【デザイン歴5年の僕が解説】

最新情報をチェックしよう!