フロントエンド開発「HTML」について

今日はカップヌードルのぶっこみ飯を食べました。時間がない時によく食べます。最近のインスタントってクオリティが高い！罪深き、うまさ。チキンラーメンのぶっこみ飯もおすすめです。

今回はフロントエンド開発の「HTML」についてお話しします。フロントエンド開発と言うのは、普段私たちが目にするWebサイトやアプリの見た目を作る分野のこと。つまり、Webページのデザインやレイアウト、リンクボタンの配置や動きなど、ユーザーが実際に触れる部分を作るのがフロントエンド開発です。フロントエンド開発についてはこちらの記事に詳しく記載しているので、合わせて読んでみてください！

フロントエンド開発には「HTML」と言うプログラミング言語があります。聞いたことがある方もいるかと思いますが、HTMLについてご説明したいと思います。

HTMLについて

HTMLとは、「HyperText Markup Language(ハイパーテキストマークアップエンゲージ)」の略で、Webサイトを制作する時の基本になります。HTMLはマークアップ用語と呼ばれ、ページの構造(骨組み)を作るためのもの。Webサイトの見た目や動きではなく、見出しやテキスト、画像、リンクなどの配置を指定していくのがHTMLです。HTMLは「タグ」と言う特殊な記号で要素を囲み、それぞれを定義していきます。例えば<h1>と言うタグはWebサイトのタイトルや一番大きな見出しに使います。

<h1>女性が始めやすいテクノロジー</h1>

こんな感じです。　タイトル(大見出し)の後に続く中見出しや小見出しには<h2>、<h3>が順番につきます。

<h2>フロントエンド開発について〜HTML〜</h2>

<h3>HTMLについて</h3>

数字が大きくなるほど、見出しが小さくなります。他にもテキストを表す<p>タグや、画像を表示させる<img>タグ、リンクを作る<a>タグなど様々なタグがあり、ぞれぞれテキストと一緒に記述していきます。

(例)

<h1>女性が始めやすいテクノロジー</h1>

<p>pタグは文章や説明文を書くときに使います</p>

<img scr="画像ファイルの名前.jpg" alt="画像の説明文">　　←注:<img>タグには終了タグがつきません！

<p>リンクは下記から</p>

<a href="リンク先のURL">ここをクリックするとリンク先のページに移動します</a>

このように記述していきます。基本的にHTMLは検索エンジンの最適化（SEO）や、アクセシビリティを考えて記述していくことが大切です！HTML自体はシンプルですが、実はとても奥が深いんです。

次回はCSSについて説明していきます！