現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

今回は、初心者の方にもわかるようにHTMLとはなんなのか。
HTMLを使うと何ができるかを紹介していきます。

HTMLとは

HTMLとは、ハイパーテキストマークアップ言語のことを指し、Webページの構造を記述するために使用されます。
HTMLでは、コンテンツを開始タグと終了タグで囲む事で、コンテンツに意味を与えます。
例えば、以下のコードは、見出しと段落である事を現します。

See the Pen LMvLOZ by akitoshi (@windii-zoe) on CodePen.

このように、見出しや段落など意味を与えたいものの種類によって、使うべきタグ
（要素）は異なります。

この、タグを覚える作業がHTMLの学習には欠かせません。

タグの一覧は以下のサイトにありますので是非後ほどご覧になってください。
HTMLタグ/HTML要素一覧 – TAG index

HTMLの使い方

先程言ったように、開始タグと終了タグによって囲むことによりHTMLは使えるようになります。

開始タグと終了タグの違いは、開始カッコ終了後のスラッシュです。

開始タグにスラッシュ（/)
は必要ありませんが、終了タグには必ずスラッシュ（/)が必要となります。

見出しと、段落

h1~6を使用すると、見出しにする事ができます。
h1タグは大見出し
h2タグは中見出し
h3タグは小見出し
です。
h4~6はあまり使わないので、あることだけ覚えておきましょう。

段落を表すには、Pタグを利用します。
Pはparagraphの略です。

See the Pen magwLB by akitoshi (@windii-zoe) on CodePen.

リンク aタグ

aタグを使用すると、HTMLタグがクリックされた時に、外部のコンテンツにリンクさせる事ができます。

<a href="https://twitter.com/Akakizoe?lang=ja">Twitterフォローしてね！</a>

aタグを使用するにはhref属性が必要です。
href属性で遷移して欲しいURLを指定することで、aタグをクリックした時に外部コンテンツに移動します。
もし、href属性で#(ハッシュ）を指定すると、ページのTOPに移動します。

#リンクだよ。クリックしてみる？

画像を表示する IMGタグ

IMGタグを使用すると、ブラウザに画像を表示する事ができます。
imgタグは他のタグと違い閉じタグが必要ありません。
src属性で表示したい画像の場所を指定することによって使用できます。

<img src="url">

ネスト imgタグをaタグで囲って画像でリンクする。

aタグで別のimgタグを囲むと、画像全体でリンクする事ができます。
imgタグでない場合もリンクする事ができるのですが、今回はわかりやすいようにimgタグを使用しました。

<a href="#"><img src="url"></a>

まとめ

今回は、HTMLの中でも超重要なhタグ、pタグ、aタグ、imgタグとhtmlの基本的な使い方を紹介しました。
次の記事では、リスト、テキストフィールド、フォームについて説明していきます。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

最新記事 by WINDII (全て見る)

• Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
• IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
• IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日