HTML: HTML とは何なのか、Web にとってどれほど重要なのか。

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

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

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

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

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

HTMLとは何ですか?

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

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

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

HTML ファイルの構造

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

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

HTML 要素の構造

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

たとえば、段落タグ

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

。

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

例

e388a4556c0f65e1904146cc1a846bee O nome do meu cão é Retovem. 94b3e26ee717c64999d7867364b1b4a3

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 8b05045a5be5764f313ed5b9168a17e6, 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:

• : É 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 などの検索エンジンにとって使いやすく、すべてのユーザーがアクセスできるページを作成できます。その結果:

• ユーザーエクスペリエンスの向上
• 視聴者のリーチを拡大
• さらに多くのウェブが含まれています。

HTML、CSS、JavaScript の間にはどのような関係があるのでしょうか?

フロントエンド開発者は Web サイトを開発するときにさまざまなテクノロジーを使用しますが、フレームワークとライブラリを使用するかどうかに関係なく、基本は常に同じ、HTML、CSS、JavaScript です。

この記事で説明したように、HTML はページのコンテンツを構造化して整理するために使用されるマークアップ言語です。しかし、HTML だけでは要素のスタイルを設定したり、複雑なインタラクションを構築したりすることはできません。

それは壁、ドア、窓を提供する建物の構造のようなものです。しかし、HTML 言語と CSS 言語の違いは何でしょうか?

HTMLとCSSの違い

CSS (Cascading Style Sheets) は、HTML とは異なり、Web ページ上の HTML 要素の外観とレイアウトを定義するスタイル言語です。

これを使用すると、色、フォント、余白、サイズ、位置、その他の属性を要素に配置できます。

それは、建物を美しく魅力的で楽しいものにする、絵画、装飾、インテリア デザインのようなものです。

HTMLはどのような分野で使用されていますか?

HTML は一般的に Web 開発の分野で使用されますが、次のような他のプログラミング分野でも使用することもできます。

• メールマーケティングの開発中
• モバイル開発中
• ゲーム開発中
• デスクトップアプリケーション開発

これらやその他のエクスペリエンスを作成するために、HTML は CSS や JavaScript などの他のテクノロジーと組み合わされることが多いことに注意することが重要です。

結論

この記事では、HTML、その歴史、仕組み、タグや要素を使用した使用方法について学びました。 HTML をどこに適用できるか、HTML、CSS、JavaScript の関係を知ることに加えて。

HTML はマークアップ言語であり、プログラミング言語ではありません。要素を作成し、Web ページを構造化するために使用されます。これはフロントエンド開発者によって使用されるテクノロジーであり、通常は CSS や JavaScript と組み合わせて使用​​されます。

このコンテンツが気に入った場合は、コメントに意見を残して共有し、より多くの人に見てもらい、気に入ってもらいましょう。

また会いましょう!

以上がHTML: HTML とは何なのか、Web にとってどれほど重要なのか。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。