【Web制作初学者】HTMLってなに？

2020年6月29日 19:23

こんにちは！SUNABACOプログラミングスクールスタッフのまっちまです！

Web制作所学者向けにHTMLの解説をしていこうとおもいます！

HTMLとは

HTML（ハイパーテキスト・マークアップ・ランゲージ）はウェブサイトを構成するための言語です。HTMLは要素の集まりから出来ており、コンテンツ要素をタグで囲むことで、特定の見せ方や動かし方に変えられます。

Webサイト上の『見出し』や『リンクボタン』などはHTML のタグをつかって作成されております。

〇要素で囲まなくてもウェブブラウザで表示されます。

見出し

〇要素で囲むことで、文字の大きさや太さなどが変更されます。
（例：h1）

<h1>見出し</h1>

タグを詳しく見てみよう！

<要素名>テキスト</要素名>

<p>テキスト</p>
<h1>テキスト</h1>
<h2>テキスト</h2>

１．開始タグ：<要素名>

要素名を山括弧で囲って構成されています。タグをつけたいコンテンツの頭に置くことで、その効果が開始する位置を宣言します。

２．終了タグ：</要素名>

要素名の前にスラッシュが含まれます。それを除けば開始タグと同じです。終了タグを忘れることを初心者はやりがちなミスなので注意してください。

要素の中に要素を入れることができます。例えば強調したい文字があるとき<strong>要素で囲むことで、より強く協調できます。

<p>今日は、<strong>とても</strong>眠い。</p>

ただし、入れ子構造になっているか確認をしてください。最初にp要素の中にstrong要素が来ますので、終了タグの最初にstrong要素を、一番最後にp要素を置くようにしてください。

次は間違った例です。

<p>今日は、<strong>とても眠い。</p></strong>

上記のようにタグの掛け違いは予期せぬ結果になりますので、しないようにしましょう。

実は、href属性のクォーテーションマークを省略できるって知ってました？

aタグの例でいうとhref属性だけの基本的な使い方では正しく動きます。

<a href=https://www.google.com/?hl=ja>google link</a>

しかし、他の属性が追加されると動作がおかしくなります。下の例でいうとtitle属性を追加しています。

<a href=https://www.google.com/?hl=ja　title=google link>google link</a>

安全なコードを書くために、必ず属性値にはクォーテーションを付けるようにしましょう。そうすれば先ほどのような問題を避けることができ、コードの可読性も上がります。

こちらのNoteはHanahanaworksが運営するコワーキングスペース＆プログラミングスクール「SUNABACO」の提供でお送りしています。

SUNABACOでは通常のプログラミングスクールの他に、休日のイベントとしてUnityやBlenderのイベントを定期開催しています。イベント情報は公式サイトやTwitterで入手することができます。

SUNABACOは年中無休で12:00~22:00の時間帯で営業しております。気になった方は是非お近くのSUNABACOまでお越しください。

この記事が気に入ったらサポートをしてみませんか？