CIP-1101: Lecture No. 2

HTML Structures

Engelbert Paul O. Dela Cruz

Course: CSAD

Professional Tools

Text Editors: VS Code, Sublime Text
Browsers for Testing: Chrome, Firefox
Version Control: Git & GitHub
Graphic Software: Figma, Photoshop

HTML Evolution Timeline

1991: First version of HTML released
1999: HTML 4.01 standardized
2000: XHTML 1.0 introduced
2012: HTML5 officially published

Key Features of HTML5

Simplified doctype: <!DOCTYPE html>
Built-in multimedia support: <audio>, <video>
Semantic elements: <header>, <footer>, etc.
Canvas API for drawing graphics
Enhanced form controls

Semantic Elements in HTML5

Common semantic elements:

<header> <nav> <section> <article> <aside> <footer> <figure> <figcaption>

Example of Semantic Markup

Sample Article Title

This is the main content of the article...

Text Formatting Elements

<b> Bold vs <strong> Strong importance
<i> Italic vs <em> Emphasized
<mark> Highlighted text
<del> Deleted text
<sup> Superscript
<sub> Subscript

Special Characters in HTML

  - Non-breaking space
< - Less than (<)
> - Greater than (>)
© - Copyright (©)

Key Concepts

Elements: Building blocks of HTML (e.g., <p>content</p>)
Attributes: Add information to elements (e.g., <img src="image.jpg">)
Nesting: Ensuring correct hierarchy of tags
Semantics: Use elements according to their meaning