HTML その２ #要素 #タグ #規格 #仕様 #ついでに英語の勉強 #body #article #section #h1 #h2 #h3 #h4 #h5 #h6 #address
出典
ココ ↓ に最新の規格が載ってる。
要素の意味
body
The body element represents the contents | of the document.
body要素は内容を表す。ドキュメントの。
In conforming documents, there is only one body element.
規格に従っているドキュメントには、body要素が1個だけ存在する。
英語「conform」の意味・使い方・読み方 | Weblio英和辞書
article
The article element represents a complete, or self-contained, composition | in a document, page, application, or site | and that is, in principle, independently distributable or reusable, | e.g. in syndication.
article要素は完全な、あるいは自己完結的な構成を表す。ドキュメント、ページ、アプリケーション、またはサイト内における。そしてそれは、原則的に、独立して配布または再利用できる。たとえば企業連合などで。
英語「self-contained」の意味・読み方・表現 | Weblio英和辞書
英語「composition」の意味・使い方・読み方 | Weblio英和辞書
英語「e.g.」の意味・使い方・読み方 | Weblio英和辞書
ひと塊でコピペしても意味が通じる部分のことなw
見出しだけ～とかリストだけ～とかはアカン。
section
The section element represents a generic section | of a document or application.
section 要素は一般的なセクションを表す。ドキュメントやアプリケーションの。
A section, in this context, is a thematic grouping of content, | typically with a heading.
この文脈で言うセクションとは、テーマ別にグループ化されたコンテンツのことだ。通常は、見出しを伴う。
英語「section」の意味・使い方・読み方 | Weblio英和辞書
英語「context」の意味・使い方・読み方 | Weblio英和辞書
英語「thematic」の意味・読み方・表現 | Weblio英和辞書
英語「heading」の意味・使い方・読み方 | Weblio英和辞書
１個の見出しと、その下にぶら下がってる文章をまとめて１個のセクション。
h1, h2, h3, h4, h5, and h6
These elements represent headings | for their sections.
これらの要素は見出しを表す。セクションの。
These elements have a heading level | given by the number | in their name.
これらの要素は見出しレベルを有する。その見出しレベルは数字で与えられる。その数字は名称の中にある。
The heading level corresponds to the levels | of nested sections.
見出しレベルはレベルに対応する。入れ子にされたセクションのレベルに。
The h1 element is for a top-level section, h2 for a subsection, h3 for a sub-subsection, and so on.
h1 要素は最上位のセクション、h2 要素はサブセクション、h3 要素はサブーサブセクション、などなど。
英語「semantic」の意味・読み方・表現 | Weblio英和辞書
英語「outline」の意味・使い方・読み方 | Weblio英和辞書
英語「correspond」の意味・使い方・読み方 | Weblio英和辞書
英語「nest」の意味・使い方・読み方 | Weblio英和辞書
h1が大見出しで、h2がその下の小見出し、h3はh2の下の小見出し…でh6まである。
address
The address element represents the contact information | for its nearest article or body element ancestor.
address要素は連絡先情報を表す。最も近くにあるarticle要素またはbody要素の先祖要素についての。
If that is the body element, then the contact information applies to the document | as a whole.
もしそれがbody要素なら、連絡先情報は文書に適用される。全体にわたって。
英語「ancestor」の意味・使い方・読み方 | Weblio英和辞書
英語「as a whole」の意味・使い方・読み方 | Weblio英和辞書
address要素のいっちゃん近くにあるのがbody要素やったら文書全体、article要素やったらその上の要素についての連絡先情報が書かれてる、ゆーことなw
使用例
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>わたしの一日</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<article>
<h1>わたしの一日</h1>
<section>
<h2>朝</h2>
<p>朝ごはんを食べて、学校に行きました。</p>
</section>
<section>
<h2>昼</h2>
<section>
<h3>学校</h3>
<p>国語と算数を勉強しました。先生の話をよく聞きました。</p>
</section>
<section>
<h3>放課後</h3>
<p>図書室で本を読んだり、友だちとおしゃべりしたりしました。</p>
</section>
</section>
<section>
<h2>夜</h2>
<p>夜ごはんを食べて、お風呂に入りました。</p>
</section>
<address>
書いた人：カッパ花子<br>
メール：<a href="mailto:hanako@example.com">hanako@example.com</a>
</address>
</article>
</body>
</html>style.css
body {
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
background-color: #fdf6e3;
color: #333;
line-height: 1.4; /* ← 少し詰めました */
padding: 20px;
max-width: 800px;
margin: auto;
}
h1 {
color: #2a7ae2;
border-bottom: 2px solid #2a7ae2;
padding-bottom: 10px;
margin-bottom: 20px;
}
h2 {
color: #d35400;
margin-top: 25px;
margin-bottom: 10px;
}
h3 {
color: #16a085;
margin-top: 20px;
margin-bottom: 8px;
}
section {
margin-bottom: 18px;
padding: 10px 15px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
address {
margin-top: 35px;
font-style: normal;
background-color: #f0f0f0;
padding: 10px;
border-left: 5px solid #999;
}
a {
color: #2a7ae2;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}参考動画
いいなと思ったら応援しよう！
よろしければ応援お願いします。 チップはキュウリ代になります。🥒