MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Introduction to HTML

この翻訳は不完全です。英語から この記事を翻訳 してください。

本来、HTML は、要素で構成される極めてシンプルな言語です。HTMLは、テキストの断片に、文書における他とは異なる意味(段落なのか?箇条書きなのか?表の一部なのか?)を与え、文書を論理的なセクション(ヘッダを持つのか?コンテンツのを3段組にするのか?ナビゲーションメニューを持つのか?)に構成し、ページに画像や動画のようなコンテンツを貼り付けるために使うことができます。このモジュールでは、これらのうち最初の2つについて紹介し、HTMLを理解する上で知る必要がある基本的な概念や文法について紹介します。

前提条件

このモジュールを始めるにあたり、HTMLの知識は一切必要ありません。しかし、コンピュータを利用したり、Webを受動的に利用したりする(例:単にそれらを見る、コンテンツを消費するなど)ことについては、最低限慣れ親しんでおくことをお勧めします。基本的なソフトウェアをインストールするに挙がっている基本的な作業環境は整えておくべきです。また、ファイルを扱う(未訳)にあるような、ファイルを作成し、管理する方法についても理解しておいてください。これらは両方共、完全な初心者用のモジュール「Web入門」の一部です。

:もし、自分自身でファイルを作れない環境(タブレットやその他の端末)で作業する場合、(ほとんどの)コードサンプルはJSBinThimbleのようなオンラインコーディングプログラムで試すことが可能です。

ガイド

このモジュールは以下の記事を含んでいます。これらを読むことで、HTMLの基礎理論の全てを学び、スキルを試すのに十分な機会が得られるでしょう。

HTML入門
Covers the absolute basics of HTML, to get you started — we define elements, attributes, and all the other important terms you may have heard, and where they fit in to the language. We also show how an HTML element is structured, how a typical HTML page is structured, and explain other important basic language features. Along the way, we'll have a play with some HTML, to get you interested!
What’s in the head? Metadata in HTML
The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page <title>, links to CSS (if you want to style your HTML content with CSS), links to custom favicons, and metadata (which is data about the HTML, such as who wrote it, and important keywords that describe the document.)
HTML text fundamentals
One of HTML's main jobs is to give text meaning (also known as semantics), so that the browser knows how to display it correctly. This article looks at how to use HTML to break a block of text up into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.
Creating hyperlinks
Hyperlinks are really important — they are what makes the Web a web. This article shows the syntax required to make a link, and discusses link best practices.
Advanced text formatting
There are many other elements in HTML for formatting text, which we didn't get to in the HTML text fundamentals article. The elements in here are less well-known, but still useful to know about. In here you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.
Document and website structure
As well as defining individual parts of your page (such as "a paragraph" or "an image"), HTML is also used to define areas of your website (such as "the header", "the navigation menu", "the main content column".) This article looks into how to plan a basic website structure, and write the HTML to represent this structure.
Debugging HTML
Writing HTML is fine, but what if something is going wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help you.

Assessments

The following assessments will test your understanding of the HTML basics covered in the guides above.

Marking up a letter
We all learn to write a letter sooner or later; it is also a useful example to test out our text formatting skills! So in this assessment you'll be given a letter to mark up.
Structuring a page of content
This assessment tests your ability to use HTML to structure a simple page of content, containing a header, footer, navigation menu, main content, and sidebar.

See also

Web literacy basics 1
An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the Introduction to HTML module. Learners get familiar with reading, writing and participating on the web in this six-part module. Discover the foundations of the web through production and collaboration.

ドキュメントのタグと貢献者

 このページの貢献者: t-eimizu
 最終更新者: t-eimizu,