Introduction to HTML

• Websites use has rapidly increased, allowing worldwide users to relay and reference content.
• Websites facilitate quick access to content through mouse clicks or finger taps.
• During the COVID-19 pandemic, websites have allowed for communication with coworkers, relatives, and loved ones, overcoming physical distances.
• This unit introduces the Hypertext Markup Language (HTML), the core language for websites.
• HTML is a markup language, not a programming language, and consists of tags.

Lesson Objectives

• Define HTML.
• Understand HTML's importance.
• Describe the HTML hierarchical structure.
• Differentiate between elements and tags.
• Use core HTML tags.

Importance of HTML

• HTML, known as Hypertext Markup Language, is the leading markup language.
• It serves as the standard markup language for websites.
• HTML uses markups or tags to represent elements and forms the core of a website, upon which all web development technologies rely.
• HTML documents are plain files saved with extensions like *.html, *.htm, or *.xhtml.
• HTML documents can be created using any text editor.
• HTML has evolved through versions, with HTML 5.2 being the current version.
• HTML's continuous evolution positions it as the future of the web, governed by W3C.

Structure of HTML Documents

Elements

• Elements are components of an HTML file, including anchors, paragraphs, tables, forms, lists, and images.

Tags

• Tags, or markups, represent elements in an HTML file, informing HTML how to handle them.
• Tags include the tag name enclosed in angle brackets <tagName>Content goes here...</tagName>.
• Tags are either paired or empty.

Paired Tags

• Paired tags consist of a start tag (opening tag) and an end tag (closing tag).
• The start tag marks the beginning of a section using a left-angle bracket, the tag name, and a right-angle bracket.
• The closing tag signifies the end of a section, using a left-angle bracket, a slash, the tag name, and a right-angle bracket.
• Example: ,
  ,

Empty Tag

• Empty tags do not have an end or closing tag.
• Empty tags are formed using a left-angle bracket, the tag name, and a right-angle bracket.
• The slash is sometimes omitted.
• Example:
  , , <input/>

Attributes

• Attributes provide additional information or characteristics to HTML tags.
• They enhance or modify a tag and are placed within the start tag after the tag name, separated by a space.
• HTML tags can have multiple attributes separated by spaces.
• Attribute values can be enclosed in single or double quotes.
• Multiple values can be assigned, separated by commas.
• Example: <tagName attribute="value"></tagName>.
• Numeric attribute values do not always need to be quoted.
• Selected attributes might not have an equated value.
• Selected attributes fall into the category of attribute minimization

Hierarchical Structure

• Tags are structured hierarchically for readability and execution by browsers.
• HTML file structure follows the first in, last out (FILO) rule.
• The tag that starts first ends last.

HTML Tag and its children

• The tag acts as the root or outermost tag.
• It is suggested to have only one root tag, the tag, in an HTML file.
• The and tags are children of the tag.
• The and tags are parent of elements inside them.
• The