ブログ

【WEB制作の基本】HTMLとは?

更新日:2023年04月08日
【WEB制作の基本】HTMLとは?

WEBサイトを作成するのに欠かせないものに「HTML」があります。

HTMLとはWEBサイトを作るための設計図(骨組み)ともいえる重要なものです。
しかし、HTMLという言葉を聞いたことがあっても、具体的にイメージが浮かばない方も多いのではないでしょうか?

この記事では、HTMLの特徴や基本構造を解説していきます!

HTMLとは

HTML(HyperText Markup Language)は、WEBページを作成するためのマークアップ言語です。
例えば、ホームページの各箇所に「ここが見出し、段落、画像です」とHTMLで位置づけします。
HTMLは、WEBページの骨組みを決める役割を持っています。

HTMLの特徴

ハイパーテキストとは

ハイパーテキストとはハイパーリンクを埋め込むことができる高機能なテキストとなります。 ハイパーリンクとは、リンク機能のことを指します。

マークアップとは

マークアップとはタグで文章を囲うことで「目印をつけて」その文章に意味を持たせることです。
タグで印づけをすることでその文章にどういう意味があるのか、コンピューターに伝えることが出来ます。

HTMLタグの書き方

HTMLの基本は「要素をタグではさむ」という形式で書いていきます。
タグは「<>」といった記号であらわされ、テキストなどの要素を「<>要素」といった形で記述します。
【HTMLタグの例】
<h1>見出しについて</h1>
<p>段落について</p>

HTMLの基本構造

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="キャッチフレーズを入力します">
    <title>Document</title>
  </head>
  <body></body>
</html>

HTML文書データを保存する際の拡張子

拡張子とは、そのデータがどのようなデータなのかを示すものです。ファイル名のあとに「.」ドットをつけてその後に記載される部分が拡張子となります。
HTML文書データを保存する際は、拡張子を「.html」とします。
【HTMLの拡張子】
index.html

基本的な骨組みの要素 html・head・body

<html>タグ

HTML文書のすべての要素はタグで囲まれる必要があります。
つまり、HTML文書の最初にを、HTML文書の最後にを記述することで、その間に書かれた内容がhtml要素となります。
(1)DOCTYPE宣言
<!DOCTYPE html>
(2)言語を指定する
<html lang="ja">

<head>タグ

HTML文書タイトル・概要・キーワードなど、文書全体に対する情報をhead要素に記述します。
HTML文書の付加情報という位置づけのため、head要素に記述された内容は基本的にブラウザには表示されません。
(1)文字コードを指定する
<meta charset="UTF-8">
(2)ページにタイトルを指定する
<title>Document</title>
(3) IE 互換モードに対応する
<meta http-equiv="X-UA-Compatible" content="IE=edge">
(4)メディアクエリに対応する
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
(5)ページにキャッチフレーズを指定する
<meta name="description" content="キャッチフレーズを入力します">

<body>タグ

ブラウザで表示させる文字や画像などのコンテンツを、タグの中に記述します。実際のWebページでは、コンテンツとなるさまざまな要素がbody要素の中に含まれます。

コメントタグ

コメントタグを使えば、囲まれた部分は無視され実行されません。したがって、ブラウザに表示させたくない部分をコメントにすれば表示されません。
【コメントタグの例】
<!-- コメントタグ -->

私たちにお任せください

フェア・デザインではホームページから
動画・グラフィックまで各種制作依頼を
幅広くお受けしております。
まずはお気軽にお問い合わせください。

お問い合わせ
お問い合わせ