darkdepauli7.nft
HTML: A Comprehensive Guide

HTML: A Comprehensive Guide

darkdepauli7.nft's photo
darkdepauli7.nft
·

5 min read

Table of contents

HTML, or HyperText Markup Language, is the most basic building block of the Web. It defines the structure of web content, including text, images, and other elements. HTML uses 'markup' to annotate content for display in a Web browser.

Anatomy of an HTML Document

An HTML document is typically composed of several key elements:

  • <!DOCTYPE html>: This is the doctype. It's not an HTML tag, but it informs the browser about the version of HTML the document is using.

  • <html>: This is the root element of an HTML page.

  • <head>: This contains meta-information about the document, such as its title and link to CSS files.

  • <meta charset="UTF-8">: This specifies the character set for the document, which is usually UTF-8.

  • <title>: This sets the title of your page, which is the title that appears in the browser tab the page is loaded in.

  • <body>: This contains all the content that you want to show to web users when they visit your page, such as text, images, videos, and so on.

Here is an example of a basic HTML document structure:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>
</html>

HTML Elements

HTML elements are the building blocks of HTML pages. They are written with start tags, content, and end tags. For example, <p>My first paragraph.</p> where <p> is the start tag, My first paragraph. is the content, and </p> is the end tag.

Some elements have no content and are called void elements, like <img>, <br>, and <input>. These elements don't have an end tag. For example, <img src="image.jpg" alt="My test image">.

HTML elements can also have attributes that contain extra information about the element. For example, in the <img> tag, src and alt are attributes. The src attribute specifies the path to the image file, and the alt attribute provides alternative text for the image if it cannot be displayed.

HTML Article Element

The <article> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable. This could be a forum post, a magazine or newspaper article, or a blog entry.

Here is an example of the <article> element in use:

<article>
  <h2>Article Heading</h2>
  <p>This is some text.</p>
  <footer>
    <p>Posted on <time datetime="2023-11-25">November 25, 2023</time> by Staff.</p>
  </footer>
</article>

In this example, the <article> tag encloses a heading (<h2>), a paragraph (<p>), and a <footer> which contains the post's metadata.

HTML is a powerful tool for structuring and presenting content on the web. Its simplicity and flexibility make it a cornerstone of web development.

Difference between a start tag, content, and end tag

In HTML, an element consists of a start tag, some content, and an end tag.

  • Start tag: This is the opening part of an HTML element. It's written with the element name surrounded by angle brackets, like <p>. The start tag indicates the beginning of an element.
  • Content: This is the information enclosed within the start and end tags. It could be text, other HTML elements, or nothing at all (in the case of self-closing elements). For example, in <p>Hello, world!</p>, the content is Hello, world!.
  • End tag: This is the closing part of an HTML element. It's similar to the start tag but includes a forward slash before the element name, like </p>. The end tag indicates the end of an element.

Here's an example of an HTML element with these parts labeled:

<p>This is some text.</p>

  • <p> is the start tag.

  • This is some text. is the content.

  • </p> is the end tag.

It's important to note that some HTML elements, known as void or self-closing elements, do not require an end tag. Examples of these include <br>, <img>, and <input>

Other void elements besides <img>, <br>, and <input>

There are several other void elements in HTML besides <img>, <br>, and <input>. Here are a few examples:

  • <hr>: This tag is used to insert a horizontal rule in HTML documents to separate different sections. It doesn't require a closing tag.

  • <link>: This tag is used to define a link between an HTML document and an external resource. It can have attributes like rel, charset, disabled, href, etc. It doesn't require a closing tag.

  • <base>: This tag is used to specify a base URL for all the links present on that page. There can only be 1 base URL on a single page. It doesn't require a closing tag.

  • <meta>: This tag provides metadata about the HTML document. Metadata is not displayed on the page, but is machine parsable. It doesn't require a closing tag.

  • <br>: This tag defines a line break. It is an empty element without a closing tag.

  • <source>: This tag is used to specify multiple media resources for media elements (<audio>, <video>). It doesn't require a closing tag.

  • <track>: This tag is used to specify text tracks for media elements. It doesn't require a closing tag.

  • <wbr>: This tag represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

These void elements are self-closing, meaning they don't have a closing tag. They are used to represent elements that can't have any content.

In conclusion, HTML is a powerful tool for structuring and presenting content on the web. Its simplicity and flexibility make it a cornerstone of web development. As you continue your journey in learning HTML, remember to experiment and practice to get a firm understanding of how different elements and attributes work.

HTMLWeb Developmentwebdev