記事の監修者
1000万PVを超える新規メディアの立ち上げを開発責任者として行う。株式会社ウィルゲートを退社後、民泊の運用代行業者のTwistを設立し上場企業に売却。2016年株式会社Market Drive（現テックアイエス）を設立し、取締役副社長に就任。200万ダウンロードを超えるアプリを開発。現在はプログラミングスクールのカリキュラム制作も担当。現場でのエンジニアリングと経営の両面を支えている。
HTMLはハイパーテキストマークアップ言語の略です。
Web デザイナーが Web サイトの作成に使用するのはキーワードとコマンド。
ハイパーテキストは、読者がクリックするだけで別のページまたはページの別の部分に移動できるリンク付きのテキストです。
一方、マークアップ言語は、ヘッダーやフッターなどのページのセクションや、表や画像などのその他の要素を定義するために、タグまたは特別なマーキングを含むプレーン テキストを使用します。
HTMLは、Web ページの作成に欠かせない 3 つのツールの 1 つと考えられています。
CSS (カスケーディング スタイル シート) は、これらの要素の視覚的なプロパティ (色、形式、レイアウトなど) を設定します。
一方、Javascript は、ユーザーのアクションに応じて、これらの要素を特定の方法で動作させます。
たとえば、ユーザーがマウスをホバーしたり、ページ上のボタンをクリックしたりすると、テキストのフォント サイズが大きくなることがあります。
HTMLの記述について
HTMLを記述するには、「メモ帳、Brackets、Atom」 などのテキスト エディターが必要です。
HTMLエディターは、コーディングが正確で機能的でタグやその他の一般的な要素を自動的に挿入したり、デバッグを行ったりすることで、エラーを減らすことができます。
モバイルに対応させることができた理ブラウザなどによって一に変更も柔軟に可能です。
またいつでも更新作業が可能で、サイト全体のSEOを行いたい方にも最適な機能が搭載しています。
更にSEOを施すためにテキストデータも必要です。
HTMLは何に使用されるのか
HTMLは、Webサイトおよび Web ベースのドキュメントのデフォルト言語です。
ブラウザーがインターネット経由で表示するドキュメントまたはファイルの構造とスタイルを理解するために役立ちます。
Web ページでオーディオ、ビデオ、スプレッドシート、およびその他のアプリケーションのホストとして機能し、ハイパーテキストを使用して、Web ページ内または Web サイト間のナビゲーションを容易にします。
さらに、Webサイト作成者はHTMLを使用して、商品の「注文、予約」または情報検索のためのフォームを設計できます。
HTMLは、ブランドを構築し、 e コマースサイトやオンライン サブスクリプション ベースのビジネスを運営するための基本的な構成要素でもあります。
各種のショッピングカートを搭載することも可能で、そのままビジネスに繋げることも可能です。
HTML ドキュメントの構成要素
HTML ドキュメントの主な骨組みはタグで構成され、ブラウザにコンテンツの表示方法を指示します。
タグは、「より小さい」および「より大きい」記号で開始および終了します。
タグによりHTML ページの基本的な構造を構成しています。
文書型宣言 (DTD)
<DOCTYPE html>は、HTMLドキュメントの最初または一番上に表示され、ページの生成に使用されたHTMLバージョンをブラウザに伝えます。
WEBサイトの構成を定めるためにも、順番を確認し情報を明記しながら制作を行う必要があります。
また、組み立てには専門的な知識も求められ、複雑な構成のWEBサービスなどは時間や労力を費やして完成します。
HTML ルート要素
DTD の下に記述されるは、他のすべての要素を保持する「メインのコンテナー」のように機能します。
また、HTMLドキュメントの言語を指定できます。
たとえばは、ページがアメリカ英語で書かれていることを意味します。
記述の仕方は一定の規律に基づいてすでに定められているので入力ミスなどがあれば画面に反映されます。
Headとは
<html>と<body>の間にある<head>には、ページに関する情報を説明するメタデータが含まれています。
それらには以下が含まれます。
制作の際にはデータを確認しながら作業を進めていくことが重要です。
Titleとは
<title>または Web ページの全体的な件名。
本文に表示される見出しタグとは別ですが、一致する必要があります。
Styleについて
<style>は、ブラウザーでの要素の表示方法を定義します。
これには、見出しの色、テキストの配置、本文の背景色などが含まれます。大きさやカラーリングを指定して企業や商品に合ったイメージにすることが可能です。
Linkについて
<link>は、HTML ページにリンクされたリソース (つまり、別の Web ページまたは外部スタイル シート) を示します。
<meta>には、キーワード、作成者、およびページの説明が含まれます。
<base>はデフォルトのURL を参照します。
body について
<body>は、ブラウザーが画面に表示する情報を含むドキュメントの主要部分です。
以下を含めることができます。
ヘッダー
サイトのタイトル、ロゴ、メイン ナビゲーション、および検索バーが含まれます。
メイン コンテンツ
記事のタイトルまたは「見出し、記事の内容、投稿日、著者」などがあります。重要な要素やサイトの目的などをわかりやすく表示することが可能です。
サイドバー
ウィジェットと、カテゴリ別または日付別のアーカイブなどのセカンダリ ナビゲーションが表示されます。
フッター
「連絡先情報、ソーシャル リンク、著作権、」が表示されます。
HTML はどのように機能しますか?
Web サイトの作成者は、拡張子 .html または .htm (filename.html または filename.htm) で保存された HTML ドキュメントを入力します。
次に、このファイルは Worldwide Web にアップロードされ、オンラインでどのように表示されるかが示されます。
PC から HTML ファイルを開くには、ファイル エクスプローラーに移動し、ファイルを右クリック (Mac を使用している場合はダブルクリック) し、メニューから [プログラムから開く] を選択して、お好みのブラウザーで起動します。
Google Chrome、Mozilla Firefox、Safari、およびその他のブラウザは、この形式を認識して読み取ることができます。
ブラウザを起動し、Ctrl+O を押して「開く」メニューを表示し、html ファイルをダブルクリックすることもできます。
ブラウザーは、HTML 要素を使用してページのコンテンツを解釈し、適した形式で画面に正しくレンダリングします。
WEB制作は入力ミスなどがないように確認作業を行いながら作業を進めていきましょう。
まとめ
HTMLは基本的なWEBサイトの基本的な構成をまとめます。
ブラウザの読み込みからサイトの見せ方などを工夫することができ、また言語も自由に選択することが可能なプログラムです。
様々なサイトの構成はすべてHTMLからなる要素です。
各種のWEBサービスも目的に合わせて設定を変更することができたり、イメージ通りにカラーに設定を変更することができたり、HTMLによってサービスの目的に合わせたWEBサービスを展開することが可能です。
全国どこにいても学べる！超優良のプログラミングスクールまとめました【国内完全網羅】現役エンジニアが厳選したおすすめのプログラミングスクール
自分の住んでるエリアでプログラミングスクールを探したい⭐️
エリア別で、おすすめのプログラミングスクールをまとめました。
ぜひ参考にしてみてくださいね。
北海道 / 東北
関東
群馬 / 栃木 / 埼玉 / 茨城 / 東京 / 千葉 / 神奈川
中部
福井 / 石川 / 岐阜 / 愛知 / 富山 / 長野 / 山梨 / 静岡 / 新潟
近畿
兵庫 / 京都 / 大阪 / 滋賀 / 奈良 / 三重 / 和歌山
