【日本語版Webflow(ウェブフロー) University】 HTMLの構造について

この投稿はWebflow社が提供する「HTML structure」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/html-structure

日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。

‍

適切なコードを自動で生成してくれるWebflow

‍

既にご存知の通り、HTMLはウェブ上で最も重要な基盤の1つです。

そしてウェブページを見るとき、ほとんどの場合、そのページのコンテンツと設定はHTMLに含まれています。

そして、私たちのHTMLには2つの主要な構造的要素があります。

1つは本文（body）で、コンテンツを含み、もう1つはヘッド（head）で、ページの設定を含んでいます。

本文には見出し（heading)などのコンテンツを保存できます。見出し（heading)内に入れたものはすべて見出しになります。同様に、段落(paragraph)を追加すると段落になります。画像も同じです。

画像を本文に追加すると、ブラウザによってレンダリングされます。

ここで重要なのは、普通であれば見出しには見出しのタグ、段落には段落のタグなど適切なタグを自分でコーディングしなければなりませんが、Webflow ではこれらのタグとコードは、自動的に生成されます！

次に、ヘッドについて話しましょう。ここにはページの設定が入ります。ウェブページに関するすべての情報をここに取り込みます。タイトルタグなどの情報が含まれます。

タイトルタグを変更すると、Googleに伝わる可能性があります。また、一般的なメタタグもあります。

たとえば、説明（description）タグは、Googleの検索結果でよく使用されます。

ヘッドにはカスタムHTMLやCSS、さらにはより具体的なOpen Graphタグなど、追加のコンテンツを取り込む柔軟性もあります。

したがって、本文にはページのコンテンツが含まれており、ヘッドにはページの設定が含まれています。

これらの2つの構造的要素は、ウェブブラウザがウェブページを読み込むときに適用されます。

Chrome、Firefox、Edge、Safari、Internet Explorer 3.0、Windows 95など、すべてのウェブブラウザに適用されます。

Webflowで行っていることは、本文のコンテンツとヘッドの設定を視覚的に作成し操作することで、ウェブページの外観と機能をプレビューするためのものです。

したがって、コードを90分間チェックしまくって、タグを閉じ忘れたことに気付いてしまうことを心配する必要はありません！

代わりに、私たちはコンテンツの作成に完全に集中できます。