プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. フロントエンド

HTMLとは?使い方と主要要素を紹介#1【初心者向け】

最終更新日:2019/01/17

html
今回は、初心者の方にもわかるように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.

ぞえ

実務未経験から1年でフリーランスエンジニアになって給料が6倍になった男/アル中の記憶ない系/しかも190cmの巨人。今は週3勤務しながら@ryudoi1と当メディア運営中 詳細なプロフ ぞえのプロフィール!! Twitterアカウント Twitter 技術系の雑談や、質問の行える無料サロンもやっています。 windii social

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP