-
Notifications
You must be signed in to change notification settings - Fork 13
Add DOCTYPE #6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Add DOCTYPE #6
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,87 @@ | ||
DOCTYPES and markup styles | ||
|
||
DOCTYPE宣言とマークアップ方法 | ||
|
||
Summary | ||
要約 | ||
|
||
In this article we will explore the different doctypes you are likely to come across on your journey around the Web, as well as look at how XHTML and HTML differ. | ||
|
||
この記事では、Web上で出くわす様々なDOCTYPEをXHTMLとHTMLの違いと一緒に、見ていきたいと思います。 | ||
|
||
Introduction | ||
序論 | ||
|
||
The doctype appears just above the <html> tag, at the very start of each document you write: | ||
DOCTYPE宣言は、<html>の直前に位置し、あなたが作成するそれぞれのドキュメントのスタートです。 | ||
|
||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>My fabulous document</title> | ||
|
||
... etc | ||
|
||
The doctype explains what type of HTML is to be expected and therefore what spec validators (for example the W3C HTML validator) should validate your document against. | ||
DOCTYPE宣言は、予想されるHTMLのタイプと、バリデータ(例えばW3CのHTMLバリデータ)があなたの文書を検証する仕様を説明します。 | ||
|
||
|
||
Standards versus quirks mode | ||
標準 vs quirksモード | ||
|
||
The doctype also serves to make the browser render the page in so called "standards mode". In standards mode, browsers generally try to render the page according to the CSS specifications — they trust that the person who created the document knew what they were doing. | ||
DOCTYPEはブラウザがページを「標準モード」と呼ばれるモードで描画するようにします。 | ||
標準モードでは、ブラウザは通常ページをCSS仕様に従って描画するよう試みます。 | ||
ブラウザは、ドキュメントを作った人が、彼らがなにをしていたかを知っていると信頼しています。 | ||
|
||
On the other hand, if a browser finds an outdated, incomplete or missing doctype at the start of the page, they use “quirks mode”, which is more backwards compatible with old practices and old browsers. Quirks mode assumes that the document is old or that it has not been created with web standards in mind — it means that the web page will still render, but the browser will work a bit harder in doing so, and you’ll likely get a strange or ugly result, which you weren’t quite expecting. The differences are mostly related to how CSS is rendered, and only in a few cases about how the actual HTML is treated. As a web designer or developer, you will get the most consistent results by making sure that all browsers use their Standards rendering mode, hence you should stick to web standards, and use a proper doctype! | ||
一方、もしブラウザがページのはじめで古い不完全なDOCTYPEを見つけるか、あるいはなかったら、古いやり方、古いブラウザ向けに後方互換の「quirksモード」を使います。 | ||
Quirksモードは、そのドキュメントが古い、あるいはWeb標準の考え方で作られていないと仮定します。 | ||
それは、そのWebページはいまだに同じように描画されようとしますが、しかしブラウザはそれをするのはややむずかしく、そしてあなたは期待とは違うおかしいかあるいは見苦しい結果を得ることを意味します。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 実際にどうなるかというと、そのWebページは同じように描画されようとしますが、ブラウザにとってこのタスクはむずかしいものであるため、見た目がおかしいか、あるいは見苦しいなどの予期せぬ結果となってしまうことが多いです。 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The differences are mostly related to how CSS is rendered, and only in a few cases about how the actual HTML is treated. 上記の訳が抜けているようです。 以下に日本語訳例を出しますので参考にしてください。 違いの多くはCSSがどのように描画されるかに関連します。また非常に希なケースとして実際のHTMLがどう扱われるかにも差があります。 |
||
|
||
The HTML5 doctype and friends | ||
HTML5と、その他のDOCTYPE | ||
|
||
In this course, we are sticking with the HTML5 doctype: | ||
このコースでは、わたしたちは、HTML5のDOCTYPEを学んでいきます。 | ||
|
||
<!DOCTYPE html> | ||
|
||
There is no disadvantage to using this doctype, and it is certainly a lot easier to remember than the others! | ||
|
||
DOCTYPEを使用して、不利なことはいっさいありません。さまざまなことが必ず楽にできます。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 上記のDOCTYPEを使用して、不利なことは一切ありませんし、他のDOCTYPE宣言と比べると格段に覚えやすいはずです! |
||
|
||
This is the one we'd recommend you use going forward, as even if you don't plan to start using any of the new HTML5 features in your work yet, it will still validate most of the HTML 4/XHTML 1.0 features (there are a couple of exceptions where features have been removed from the spec, but as you'll learn later, validation is merely a useful tool, and not the be all and end all of everything), and will be future proof for when you do start using new HTML5 features. | ||
何かしらHTML5を使い始める業務が無いようでしたら、これからに備えて強くオススメしたいことがあります。 | ||
HTML 4/XHTML 1.0の多くはまだ動作しています。 | ||
(例外が2つあります。ただ単に削除された想定外の特徴2つ | ||
バリデーションは、単に使いやすいツールで、それですべてが終わるわけではないことが、いずれ分かるでしょう。) | ||
HTML5を使い始めた時、証明されるはずです。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. もしまだ新しいHTML5の機能を使う予定が無かったとしても、この宣言は多くのHTML 4/XHTML 1.0の機能に準拠しています(いくつかの機能が仕様から削除されているため例外はあります。しかし、この後学んでいく通り、バリデーションはそれほど利用価値の高いツールではありませんし、最終的な目標はそこではありません。)、その上、今後HTML5を利用し始めようと思った場合にも有効であり続けます。 |
||
|
||
There are however, other doctypes that you may come across when working on various projects. | ||
でも、さまざまなプロジェクトが進む時、あなたは他のDOCTYPEを扱うことになるでしょう。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. しかし、もちろん、様々なプロジェクトに関わる際に他のDOCTYPEにも出くわすことでしょう。 |
||
|
||
Let's look at some of the others you might bump into. | ||
では、あなたがぶち当たる他のDOCTYPEを見ていきましょう。 | ||
|
||
HTML versus XML syntax | ||
HTMLとXML構文 | ||
|
||
Table 1 shows the main syntax differences between HTML and XHTML: | ||
表1はHTMLとXHTMLの主な構文の違いを表しています。 | ||
|
||
HTML | ||
|
||
Elements and attributes are case insensitive, eg <h1> is the same thing as <H1>. | ||
要素と属性は大文字と小文字を区別しない。例: <h1>は<H1>と同等。 | ||
|
||
Certain elements don’t need a closing tag (eg paragraphs, <p>), while others (called “empty elements”) shouldn't have a closing tag (eg images, <img>). | ||
いくつかの要素は終了タグを必要としません。(例: 段落, <p>) | ||
一方で、他の要素(空要素と呼ばれるもの)は、終了タグを持つべきではない。 | ||
|
||
Attribute values may be written without being enclosed in quotes. | ||
属性値は引用符で囲まずに書くこともできる。 | ||
|
||
Shorthand can be used for certain attributes (ie <input required>). | ||
属性値の省略はいくつかの属性で利用できる。( 例: <input required>) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
一方、もしブラウザがページのはじめにDOCTYPEが古いか、不完全か、あるいは存在しなかった場合、古いやり方、古いブラウザ向けに後方互換の「quirksモード」を使います。