HTML BASICS

Quen Del Pilar
WD35P
(Things I learned in week 1)

What is HTML?

HTML stands for HyperText Markup Language. It is a standard markup language for web page creation. It allows the creation and structure of sections, paragraphs, and links using HTML elements (the building blocks of a web page) such as tags and attributes.

Example of an HTML code and website

HTML has a lot of use cases, namely:

  • Web development. Developers use HTML code to design how a browser displays web page elements.
  • Internet navigation. Users can easily navigate and insert links between related pages and websites.
  • Web documentation. HTML makes it possible to organize and format documents.

What are HTML Elements?

The element usually starts with an opening tag, which consists of the name of the element. It's wrapped in opening and closing angle brackets. The opening tag indicates where the element begins. Similar to the opening tag, the closing tag is also wrapped in opening and closing angle brackets. But it also includes a forward slash before the element's name. Everything inside the opening and closing tags is the content.

Illustration of an HTMl element structure

But not all elements follow this pattern. We call those that don't empty elements. They only consist of a single tag or an opening tag that cannot have any content. These elements are typically used to insert or embed something in the document. They can be classified into two categories:

Block-Level Elements

A block-level element takes up the entire width of a page. It always starts a new line in the document. For example, a heading element will be in a separate line from a paragraph element.

Inline Elements

An inline element formats the inner content of block-level elements, such as adding links and emphasized strings. Inline elements are most commonly used to format text without breaking the flow of the content.

HTML Tags

An HTML tag is commonly defined as a set of characters constituting a formatted command for a Web page. At the core of HTML, tags provide the directions or recipes for the visual content that one sees on the Web.

Block-level Tags

  • <adress>
  • <article>
  • <div>
  • <h1>
  • <header>
  • <li>
  • <main>
  • <nav>
  • <ol>
  • <p>
  • <table>

Inline Tags

  • <a>
  • <button>
  • <cite>
  • <code>
  • <data>
  • <em>
  • <i>
  • <select>
  • <span>
  • <time>
  • <video>

What are HTML Attributes?

Elements also have attributes, which contain extra information about the element that will not appear in the content.

Illustration of HTML attributes structure

With this example, you can see the following characteristics of attributes:

  1. There is a space between attributes and the element name
  2. Attributes are added in the opening tag
  3. Attributes are added in the opening tag
  4. Attributes usually have a name and a value: name=“value”