HTML: HTML とは何なのか、Web にとってどれほど重要なのか。-CSSチュートリアル-php.cn

ニュースサイト、ソーシャルネットワーク、銀行システムなどにアクセスすると、ユーザーインタラクションを可能にする画面上で利用できるいくつかの要素が用意されています。

しかし、これがどのようにして構築されたのか、立ち止まって考えたことはありますか?

Web サイトの構築を担当するプロフェッショナルの 1 人がフロントエンド開発者です。フロントエンド開発者は、UX/UI デザインチームが作成したレイアウトを figma を使用してコードに変換します。

技術的には、Web サイトの構築はいくつかのテクノロジーを通じて行われますが、その 1 つが HTML です。

この記事では、HTML とは何か、その目的と使用方法について学びます。

HTMLとは何ですか?

Web サイトの開発に使用されるテクノロジーであるため、HTML でプログラムすると考えるのが一般的です。重要な点は、HTML はプログラミング言語ではなく、マークアップ言語であるということです。

プログラミング言語は、アルゴリズムの作成、変数およびデータ構造の操作に使用されます。 HTML (Hypertext Markup Language の英語の頭字語) は、Web ページのコンテンツを構造化してフォーマットします。

このテクノロジーを使用してプロジェクトを構築するには、「.html」形式のファイルが必要です。これをブラウザで開くと、ソースコードが解釈されて画面に要素が表示されます。

HTML ファイルの構造

HTML ファイルの構造はツリーとして解釈できます。

要素であるルートがあり、そこから子として解釈できる新しい要素 (分岐のようなもの) を宣言でき、その結果、親要素を作成することもできます。さらに、同じ原点行を共有する要素を兄弟と呼ぶことができます。

HTML 要素の構造

HTML 要素の構造は、山括弧で囲まれたタグを開くことによって構築されます。

たとえば、段落タグ

の後には表示されるコンテンツが続き、最後に開始タグと同じタグで閉じられますが、要素名の前にスラッシュが付いています:

。

最終結果は次のようになります:

例

<p> O nome do meu cão é Retovem. </p>

ログイン後にコピー

HTML では何を作成できるのでしょうか?

HTML を使用すると、ブログ、オンラインストア、ニュースページなど、選択したテーマの Web ページを構築するためのさまざまな要素を作成できます。

作成できる主な要素の一部は次のとおりです:

タイトルと段落
リンクとボタン
画像
リストとテーブル
フォーム
ビデオとオーディオ

このマークアップ言語は、プロジェクトのニーズに応じて使用できる幅広いリソースを提供しますが、そのうちのほんの一部についてのみ説明しています。

HTMLの進化

Tim Berners-Lee は、CERN (欧州原子核研究機構) で NeXTSTEP 開発環境を使用して HTML を開発しました。元々は、検索とツール間の通信を管理するためのツールのセットでした。

インターネットの進化に伴い、このソリューションは世界中で注目を集めました。最初のバージョンは柔軟性があり、この分野の初心者にとって役立ちました。

時間の経過とともに、その構造はより厳格になりましたが、現在でもブラウザーは下位互換性を通じて古い方法で作成された Web ページを解釈できます。

仕様は 1990 年代に定義され、その後 HTML ワーキンググループが設立され、1995 年に HTML 2.0 バージョンが公開されました。

1997 年末に HTML 3.5 バージョンがリリースされ、これに伴い、W3C ワーキンググループは 2000 年に XHTML の開発に重点を置き始め、2014 年についに HTML がリリースされました。HTML は現在まで使用されています。今日。

現在使用されている HTML に至るまで、いくつかのバージョンの HTML がリリースされましたが、HTML と HTML5 の違いは何ですか?

HTMLとHTML5の違い

古いバージョンでは、コンテンツの構造化は主に

やなどの汎用要素によって行われていました。

HTML5 には、ヘッダー、フッター、セクションの区切りなどの要素の目的を参照するセマンティックタグがあります。

さらに、HTML5 ではオーディオがネイティブにサポートされており、ページに直接埋め込むことができます。

このバージョンでは、フォームでさらに多くの種類のフィールドをカバーすることもできます。要素のネイティブ検証を生成する電子メール、番号、日付、仕様フィールドが利用できるようになりました。

ただし、HTML は静的バージョンであることを理解しておくことが重要です。現在でも開発と改良が続けられており、機能や機能が随時追加されています。

HTML vs XML: Quais são suas diferenças?

Tanto o XML (Extensible Markup Language) quanto o HTML são linguagens de marcação utilizadas na web, mas apesar disso, possuem propósitos e estrutura diferentes.

O XML é projetado para representar informações hierárquicas e legíveis para humanos e máquinas. Não se preocupa com a apresentação visual e não possui estrutura pré-definida. Em vez disso, descreve a estrutura dos dados de forma consistente e portátil.

No Brasil, é o formato mais utilizado na emissão de notas fiscais.

O HTML, é usado para criar e exibir conteúdo em páginas web, é limitado devido à sua estrutura e elementos pré-definidos, focando na apresentação visual e exibição dos elementos no navegador. Ele é comumente utilizado na construção de sites.

Podemos considerar que as principais diferenças são: enquanto o XML é usado para armazenar e transportar dados, o HTML é utilizado para criar páginas web com conteúdo formatado e que possibilita a interação.

Como funciona o HTML?

Como falamos anteriormente, o HTML é utilizado para estruturar e formatar o conteúdo de páginas web através de tags, que são interpretadas pelo navegador.

Para que seja possível essa interpretação, é importante declarar qual a versão do HTML será usada.

Essa declaração é feita através do , garantindo que o navegador interprete corretamente o código.

É importante observar que isso não é uma tag HTML, e sim uma instrução para o navegador que deve ser colocada no início do documento sem espaços entre ela.

Dom

A representação estruturada do conteúdo HTML de uma página web é feita através do DOM (Document Object Modal), que é uma interface de programação que permite o acesso e manipulação dos elementos.

É o DOM que faz a estruturação em forma de árvore dos elementos, em que cada um deles é representado por um nó organizado hierarquicamente de acordo com a estrutura do documento.

Podemos analisar um exemplo de código em HTML para a exibição de uma frase na tela:

<span class="cp"><!DOCTYPE html>
<html>
  <head>
    <title>Aprendendo HTML</title>
  </head>
  <body>
    <h1>Olá, mundo!</h1>   
    <p>Este é o meu primeiro projeto HTML</p>
  </body>
</html>

ログイン後にコピー

A estrutura do DOM seria a seguinte:

HTML: o que é, Qual a sua importância para a web.

: É o elemento raiz da página, de maneira hierárquica, está acima de todos.
: Se refere à “cabeça” da página, onde é possível inserir configurações que auxiliam na renderização, assim como o título da página. Ele está dentro do elemento , portanto ele é um elemento filho dele.
: Define o título da página, aquele que ficará visível na aba do navegador. É uma ramificação do , sendo um elemento filho.
: É o “corpo” da página, onde serão inseridos os elementos visuais que deverão aparecer, como os textos. Ele também está hierarquicamente inserido dentro do , portanto, é filho dele.
: Refere-se ao título principal que ficará visível no corpo da página. Como está dentro do , consequentemente pode ser considerado como filho.
: Constrói um parágrafo de texto de acordo com o conteúdo inserido dentro dele. Também está dentro do body, portanto é filho dele e irmão do

Assim, podemos visualizar que o DOM é uma representação em forma de árvore do conteúdo inserido no HTML e que, ao criar um nó para cada elemento, permite que eles sejam acessados por meio do JavaScript.

HTML semântico

O HTML semântico é uma abordagem no desenvolvimento web que enfatiza o uso correto e significativo dos elementos, escolhendo aqueles que melhor descrevem o conteúdo que está sendo apresentado.

Em vez de usar uma

genérico para todo o conteúdo, podemos usar elementos mais específicos, como , , , , , , entre outros, de acordo com a estrutura e a natureza do conteúdo. isso é utilizado para melhorar o SEO ( Search Engine Optimization).

Uma das principais características dessas abordagem é a importância dos cabeçalhos, que são representados pelos elementos

a

, sendo essenciais para indicar a hierarquia do conteúdo.

Os sites de pesquisas dão importância aos cabeçalhos, por isso é um ponto de foco.

O texto alternativo em imagens é crucial tanto para a acessibilidade quanto para o SEO. Tendo o cuidado de inserir o atributo “alt” nas tags de imagem, fornecendo um texto descritivo, isso permite que leitores de tela leiam o texto e que sites de pesquisas considerem esse texto ao classificar as páginas.

セマンティクスの文脈におけるテキストに関しては、一般的なリンクの代わりに説明的なリンクを使用することが重要です。たとえば、「ここをクリック」リンクを作成する代わりに、そのリンクの宛先が明確になるテキストを作成します。

これらのプラクティスを適用すると、Google などの検索エンジンにとって使いやすく、すべてのユーザーがアクセスできるページを作成できます。その結果: