NSI Rocks !

Introduction to HTML

What is HTML?

HTML, which stands for Hypertext Markup Language, is the standard markup language for creating web pages. It describes the structure of a web page using a series of tags.

A basic HTML page

index.html
<!DOCTYPE html>
<html>
<head>
  <title>My first page</title>
</head>
<body>
  <h1>Welcome!</h1>
  <p>This is a simple web page.</p>
</body>
</html>
All elements to add to the web page are to be inserted between the <body> and </body> tags

Opening/closing tags

In HTML, most tags have an opening tag and a closing tag. These tags frame the content they affect. Here are the main characteristics:

  • Opening tag: Composed of the tag name, surrounded by angle brackets < >. It can contain attributes.
    Example: <p> or <a href="https://www.example.com">
  • Closing tag: Identical to the opening tag, but preceded by a slash / to indicate the end of the element.
    Example: </p> or </a>

Example of an opening and closing tag

<p>This is a paragraph with an opening tag and a closing tag.</p>

Special cases: self-closing tags

Some HTML tags do not require a closing tag. They are called self-closing tags and are used for elements that do not contain content.

Example: <img /> or <input /> These tags can include attributes like src or type.

Example of self-closing tags

<img src="image.jpg" alt="A descriptive image" />
<input type="text" placeholder="Enter your text" />
Reminder: properly structure tags
  • All opening tags must correspond to closing tags.
  • Tags must be properly nested:
<div>
  <p>This is a paragraph.</p>
</div>

Incorrect:

<div>
  <p>This is a paragraph.</div>
  </p>
Nesting errors or forgetting closing tags can lead to unexpected behavior on your web page.

The distinction between opening, closing, and self-closing tags is essential for writing valid and understandable HTML code. A good practice is to use an editor with HTML validation to avoid syntax errors.

Basic HTML Tags

<body>

  • Usage: The <body> tag contains the main content of your HTML document, i.e., everything that is visible on the web page.
  • Example:
example.html
<body>
  <p>This is a paragraph.</p>
</body>

<hn>

  • Usage: <h1> to <h6> are title tags, h1 being the most important and h6 the least.
example.html
<h1>Main Title</h1>
<h2>Secondary Title</h2>

<p>

  • Usage: The <p> tag is used to define a paragraph.
  • Example:
example.html
<p>This is an example paragraph.</p>

<a>

  • Usage: The <a> tag defines a hyperlink.
  • Important attributes:
    • href: URL of the page the link leads to.
  • Example:
example.html
<a href="https://www.example.com">Visit our site</a>

<img>

  • Usage: The <img> tag is used to integrate images.
  • Important attributes:
    • src: The image URL.
    • alt: Alternative text for the image.
  • Example:
example.html
<img src="image.jpg" alt="Image description" />

<div>

  • Usage: The <div> tag is a generic container for content flow.
  • Example:
example.html
<div>
  <p>A paragraph inside a div.</p>
</div>

Attributes and attribute values

  • Attributes: Provide additional information about a tag. Examples: href, src, alt.
  • Attribute values: Specify the attribute data. For example, in href="https://www.example.com", https://www.example.com is the value of the href attribute.