• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ

プログラミング学習初心者のための情報メディア by Proglus(プログラス)

You are here: Home / プログラミング入門 / HTMLの正しい書き順は?タグが先?コンテンツが先?

HTMLの正しい書き順は?タグが先?コンテンツが先?

2020-08-10 By プログラミング入門ナビ編集部

Tweet
このエントリーをはてなブックマークに追加
Pocket

目次

  • 1 はじめに
    • 1.1 動画解説
  • 2 コンテンツから先に書く方法
  • 3 タグから先に書く方法
  • 4 左から右へ順番に書く方法
  • 5 先にタグを書くのがスピード面でオススメ、しかし…
  • 6 まとめ
  • 7 今すぐメルマガ登録!
  • 8 動画で学ぶプログラミング入門

はじめに

集中している女性

HTMLを学習している受講生の皆さんからよくいただく質問に

「HTMLの正しい書き順はありますか?」

というものがあります。

結論からいいますと、書き順に特に正誤はなく、正しい文法になっていればどのような書き方でも構いません。

この記事では、どのような書き順があるのかと、しいていうならばのオススメをご紹介します。

動画解説

本記事の内容を動画でも解説しています。

コンテンツから先に書く方法

まずはコンテンツから先に書く方法です。


はじめてのHTML

と、書きたい内容を書いた後でこれを段落として表示するために前後にp要素の開始タグ・終了タグをつけます。


<p>はじめてのHTML</p>

HTMLはマークアップ言語と呼ばれ、コンテンツそのものに意味を持たせるためのタグをつけてブラウザに解釈させるための言語です。

そのため、このように先にコンテンツがあり後からタグをつける書き方はある意味で教科書的な書き方といえます。

タグから先に書く方法

次に、タグから先に書く方法です。


<p></p>

と、先に段落を示すp要素の開始タグ・終了タグのセットを書いてから、その中にコンテンツを書きます。


<p>はじめてのHTML</p>

Visual Studio Codeなどをはじめとする便利なエディタでは、「p」キーの後タブキーで「<p></p>」のセットが自動で入力されたり、「<p>」だけ書くとその後に「</p>」が入力補完される機能があります。

そのため、この書き方の方が若干打つスピードは速いです。

左から右へ順番に書く方法

動画では触れていませんが、コードを左から右へ順番に書いていく方法もありますね。


<p>はじめての

という風にp要素の開始タグから始めてコンテンツを書き、最後に終了タグを書くものです。


<p>はじめてのHTML</p>

書籍やテキスト上の見本コードを見ながら、同じように書いていく場合などにこの書き方をしている方がいらっしゃるかもしれませんね。

この方法も間違ってはいないですし、もちろん同じ表示結果とはなるのですが、あまりオススメできません。

理由としては、HTMLのコーディングミスで比較的多いのがタグの書き忘れや書き間違いだからです。

この書き方をすると、開始タグを書いてから終了タグを書くまでの間にコンテンツを書く必要がありますね。

わずかな時間ではありますが、コンテンツを書いている間に終了タグを書かなければならないということを忘れて次の行に行ってしまったり、</p>と書くべきなのに見出しを書いていると勘違いして</h1>と書き間違いをしてしまうことが増えます。

先に紹介した2つの方法のように、開始タグ・終了タグの記述をなるべくまとめて行う方がこのようなミスを犯すリスクを減らせるでしょう。

先にタグを書くのがスピード面でオススメ、しかし…

タイピングしている手

ここまで3通りの書き方を紹介しました。他にもあるかもしれないですね。

HTMLプログラミングの究極目的はブラウザに想定通りの表示をさせることです。

そのため、冒頭でも記した通りどれが正解というのはなく、文法が正しく書けてさえいれば問題ありません。

しいていうならば「先にタグを書いてから中にコンテンツを書く」方法がスピードの面でオススメです。

コンテンツが先だと開始位置・終了位置にカーソルを移動させて書かなければならないため、長いコンテンツだと特に余計な時間がかかりますが、タグが先だとこの手間が小さいのと、エディタの補完機能により終了タグをタイプする時間も省けます。

しかし、エンジニアはタイピングしている時間よりも、調査や考えることに時間を使う割合が多いです。

そのためプログラミングの知識を身につける方が圧倒的に重要で、コーディングスピードの改善は後からで問題ありません。

最初のうちは自分がしっくりくる書き方に慣れていく方が大切です。

まとめ

デスクで微笑む女性

HTMLの様々な書き方を紹介しました。どれが正解、というのはなく、自分が書きやすい方法で書いていけば問題ありません。

余談ですが、ウェブ開発の仕事は正解が1つではないことが多いので、あまり正解・不正解に拘らず、自分の進めやすい方法を見つけていく姿勢が重要です。

自分のこだわりポイントを探せるのは楽しいことでもあるので、ぜひ迷いながら進めていきましょう!

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門(Proglus)

動画で学ぶプログラミング入門

オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

Tweet
このエントリーをはてなブックマークに追加
Pocket

Filed Under: プログラミング入門 Tagged With: HTML, 書く順番

Primary Sidebar

Proglus

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう
  • 無料のSSL証明書Let’s Encryptを設定・更新・自動更新する方法(CentOS7, Apache2.4対応)
  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • MySQL WorkbenchをMacにインストールする方法
  • AWS Cloud9のプレビューが上手く表示されない時の対処法
  • 初心者のプログラミング学習には13インチのMacBook Proがおすすめ!その理由も解説!
  • よくあるSQLのエラーの種類と自力でエラーを取り除く方法について説明します
  • macOSで2つのファイルの差分を確認するには?便利なdiffツールを紹介
  • MySQL 5.7 for Windowsのアンインストール方法
  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法

最近の投稿

  • 【03/02更新】Udemyプログラミング入門講座等の割引クーポン配布
  • swpファイルが作成されてvimでファイルが編集できない時の対処法とは?
  • 【無料モニター(2期生)募集!】「就職活動用のポートフォリオ制作講座」
  • フレームワークとは?開発効率UPに役立つ理由を知っておこう!
  • WordPressとは?どんなことができるの?初心者にもわかりやすく解説!

カテゴリー

  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門

タグクラウド

AI AWS AWS Cloud9 Bootstrap Cloud9 CodeWing CSS Git GitHub Heroku HTML JavaScript li Linux macOS MySQL MySQL Workbench Nuxt.js ol Proglus Python Ruby Ruby on Rails SQL Udemy vscode Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 改行 未経験 機械学習 開発環境構築

アーカイブ

  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2021 · programmingnavi.com ・About・プライバシーポリシー