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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

Q&A

解決済

2回答

3049閲覧

HTML5 : pre要素内にcode要素を記載するのはなぜか?

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

0グッド

1クリップ

投稿2018/07/19 03:16

#前提
現在ping-tを用いてHTML5の資格試験に向けた学習を進めております、Web初学者です。
pre要素とcode要素の関係について不明点があったため、この場を借りて質問させていただきます。

以下のコードはping-tのものではなく自分で書いたものですが、まずご覧ください。

#該当のコード

html

1<!DOCTYPE html> 2<head> 3 <meta charset="utf-8"> 4 <title>Document</title> 5</head> 6<body> 7<pre> 8<code> 9public class Main { 10 public static void main(String[] args) { 11 12 System.out.println("Hello World!!"); 13 } 14} 15</code> 16</pre> 17</body> 18</html>

#不明点
上記のコードにてpre要素code要素の順序がpre要素>code要素となっている理由がわかりません。

pre要素でcode要素をマークアップしてしまった場合、その際に行った改行が見た目に反映してきてしまうため、code要素内にpre要素を記載するのが正しいと自分は考えております。

しかし、調べてみると多くのpre要素とcode要素の説明をしているサイトはpre要素>code要素となっているため、そちらが業界ではスタンダートなのかと感じました。

この記述法に何か合理的な理由はあるのでしょうか? 何卒よろしくお願い致します。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

仕様に沿ってそうしているのでは?

<pre>: 整形済みテキスト要素 - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/pre

許可されている内容 記述コンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 フローコンテンツを受け入れるすべての要素

<code>: 行内コード要素 - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/code

許可されている内容 記述コンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 記述コンテンツを受け入れるすべての要素

投稿2018/07/19 04:01

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/07/19 04:22

code要素内にpre要素を入れるのが仕様として正しくないことがわかり、不明点が解決致しました。 とてもわかりやすい回答、ありがとうございました!
guest

0

HTML は文書の論理構造を記述する物です。
その観点から言うと、

pre 要素 「印刷用に整形済み」なブロックであることを示す(parserによる整形を抑止する)
code要素 「ソースコード」なブロックであることを示す

なので、どちらが親になるかは理解しやすいかと思います。
※印刷用に整形済みだがソースコードではない(出力イメージなど)ブロックもある

投稿2018/07/19 04:16

tacsheaven

総合スコア13703

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/07/19 04:32

お早いご回答ありがとうございます! 重ねての質問で申し訳ございませんが、pre要素が「”印刷用に”整形済み」というのは、どこに表記されている情報なのでしょうか? 自分の検索能力が低く恐縮なのですが、見つけることができませんでした。 お忙しいところ恐れ入りますが、ご返答いただければ幸いです。
tacsheaven

2018/07/19 05:45

HTML5 の日本語訳 https://momdo.github.io/html/grouping-content.html#the-pre-element では、こういう表現です。 「pre要素は、構造が要素によってではなく印刷規則によって表される、整形済みテキストのブロックを表す。」 pre 要素は、その内部の構造がそのまま印刷規則と適合する(描画横幅に合わせた自動改行を入れたりしないという意味で)ことで、整形を行わないブロックとして定義されているのです。
退会済みユーザー

退会済みユーザー

2018/07/19 05:59

「整形済みテキスト」という単語でそのまま認識していましたが、正しくは「印刷規則に適合する整形済みテキスト」だったことがとてもよくわかりました。 続いての質問、ご対応いただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問