質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • HTML

    11512questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

HTMLのタグの意味合いに関して

受付中

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 455

Turtle

score 30

HTMLのタグに関して、一点疑問がありますので、ご質問させて頂きます。
よろしければ、ご回答いただければ幸いでございます。

認識の確認なのですが、HTMLには要素というものがございますが、現状の私の認識として、
”要素には2種類存在する”という状況でございますが、この認識にお間違いはないでしょうか。
例えば、
私の認識に間違いがあるかもしれないのですが、body要素やhead要素に関しては、この要素を使わなくとも問題なくwebページを表示することが出来るという点で、意味としては、HTML記述者間の共通の認識(body要素には~を記述、head要素には~を記述というような共通認識)としての意味合いが強いのではないかと感じております。
一方で、div要素のように、表示形式に対しては、改行という意味合いを有し、HTML記述者間の共通の認識としてもスタイルシートやスクリプトの適応をする場所という意味合いを有している要素もあると感じております。
現状、私の中では、要素というものは、上記のような”表示形式に影響を与えるもの”と”与えないもの”の2種類存在するのではないかという認識でございます。

上記の認識にお間違いはございませんでしょうか。
よろしければ、ご指摘、ご意見いただければ幸いでございます。
拙い日本語でまことに申し訳ございません。
何卒よろしくお願い申し上げます。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • tanat

    2016/05/24 15:10

    ”要素自体に意味はないのではないか”
    という質問の意味について良く分からないので、具体的なHTMLと合わせてご説明があると良い回答が得られるかと思います。

    キャンセル

  • kei344

    2016/05/24 15:13

    「意味」の定義があいまいです。受け取る人によって「意味」が変わります。もう少し具体的に、「意味の有る無しで変わること」を追記いただければと思います。

    キャンセル

  • Turtle

    2016/05/24 15:18

    ご指摘ありがとうございます。
    ぜひ、さっそく修正させていただきます。

    キャンセル

回答 4

+4

まず前提となるHTMLの基本的な役割としては

文書構造を定義するための書式
であり、それ以上でもそれ以下でもありません。
具体的にはレイアウトについてはHTMLの責任範囲外です。

そのため、ご質問の

”要素には2種類存在する”という状況でございますが、この認識にお間違いはないでしょうか。

という認識は正しくありません。
HTMLタグ全ての要素は文書構造を記述するために存在します。
デザインのdivタグにも「囲んだ要素を一つのブロックとして扱うものとする」という文書構造を示す以外に意味はありません。

ただ、実際には

  • ブラウザでHTMLを表示する

という使われ方が多い(利用者目線ではほぼ100%)ため、ご質問の様な理解になるのだと思います。

ブラウザによって表示されるHTMLは、
ブラウザがHTMLの文書構造を解釈した結果、その文書構造を人間が理解するためにはこう表示した方が良い、例えばdivの後は改行した方がブロックがわかりやすい
とブラウザやが処理した結果、グラフィカルになったものです(HTMLがレンダリングされた状態)

例えば、h1タグは太字で表示されますが、別にこれはHTMLで定義されていることでは無く、
ブラウザが勝手に気を利かせて(重要だと理解しやすいように)太字にしてくれているだけです。

ブラウザがどうHTMLをレンダリングするかはHTMLの本質である文書構造の記述とは関係無いところなので、
CSSを使う事で文書構造とデザインを切り分けて記述するのが推奨されています。
divはその性質上、他の文書構造を崩しにくいということもあり、CSSでのデザイン指定に多用されるケースがある という感じになっており、これもHTMLの役割について誤解を広める要因になっているのかなと思っています。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

htmlの要素というのは<ul><p>などのことですよね。
例えば・・・
<ul>の場合この子要素に入る<li>が順不同の一覧であることを示しています。
例)料理レシピの材料など

<ol>だった場合はこの子要素に入る<li>が順番のある一覧であることを示しています。
例)料理レシピの手順など

<blockquote>の場合はこの中の文章が他からの引用であることを示しています。

htmlは文書を「この部分のテキストは文章内でどういう意味のあるものか」ということを理解できるようにタグで囲うためのものです。

詳しくはHTML 要素リファレンス - HTML | MDN等のリファレンスを読んでみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

body要素やhead要素に関しては、この要素を使わなくとも問題なくwebページを表示することが出来るという点

body要素やhead要素を書かなくてもブラウザ側でコンテンツが表示できるのは、
仮に要素が省略されたり間違ったコードが書かれたとしても最大限表示に影響が出ないようにユーザーエージェントであるブラウザが「配慮」してくれているからにすぎません。「省略しても表示される=必要ない」ということではありません。
HTMLの言語仕様としてbody要素には「HTML文書のコンテンツ表示領域」head要素には「HTML文書のメタ情報等を記載する領域」といった役割があります。それは言語仕様として定義されたルールであり、「制作者の共通認識」などというぬるいものではありません。

一方で、div要素のように、表示形式に対しては、改行という意味合いを有し

他の方も指摘されていますが、「div要素を配置すると改行される」というのはdiv要素のもつ「意味」ではありません。
この場合の「改行」を行っているのはHTMLではなく、CSSです。ブラウザがHTMLの各要素がマークアップされた際、「この要素はこういう意味があるから、ならこういう風に表示しておくと人間は分かりやすよね〜」とこれまた「配慮」してそのように表示してくれているだけにすぎません。(ブラウザの初期スタイルシートが適用された状態)

というわけですので、

要素というものは、上記のような”表示形式に影響を与えるもの”と”与えないもの”の2種類存在するのではないかという認識

この認識は誤っています。
HTMLの要素は文書に対して「構造的な意味を与えるもの」であってそれ以上でもそれ以下でもありません。
どのような表示形式にするかはHTMLではなく全てCSSの役割です。
ほとんどのブラウザには「初期スタイルシート」が設定されているため、HTMLを書いた時点である程度
それなりの形で表示されるためHTML自体にそのような機能があるのだと誤解してしまう方もいらっしゃいますが、
HTMLは「情報に構造と意味を与えるもの」、CSSは「構造しかないHTMLに見た目の装飾やレイアウトをほどこすもの」という役割分担によって成り立っています。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)、略記・略称HTML(エイチティーエムエル)とは、ウェブ上の文書を記述するためのマークアップ言語である。 (wikipedia)

といったわけで、HTMLのタグは全て単にマークアップするためのものです。
それはDIVに於いてもかわりません。
ブラウザ上で改行されるのは、ブロック要素のスタイルが初期割り当てされているためです。
次のようにインラインスタイルで上書きしてしまえばブロック要素としての働きはなくなります(横並びになります。)

<div style="display:inline">aaaa</div>
<div style="display:inline">bbbb</div>


全部のタグの初期スタイルは全く無しでも良いのでしょうが、divはコンテンツブロック、pはテキストブロック、aはアンカー/リンク要素のように使うことを前提に用意されたタグで、大方の人はそういった目的で使うため、現在のようなスタイルが最初から割り当てられているのだと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • HTML

    11512questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。