Intro to HTML

Learning Goals

  • Demonstrate practical use of elements and attributes

  • Understand overall document structure

  • Apply text formatting, lists, links, and images

Core Concepts

  • HTML = Hyper Text Markup Language; standard for web pages

  • Describes page structure through elements (tags)

  • Other markup languages: KML, MathML, SGML, XML, XHTML

HTML vs XHTML (strict variant)

  • Document must start with <!DOCTYPE>

  • Root <html> requires xmlns namespace

  • <html>, <head>, <title>, <body> are mandatory

  • Tags, attribute names & values must be lowercase, properly nested, always closed, values quoted

Document Skeleton

  • <!DOCTYPE html> — tells browser which spec to use

  • <html> — root element

    • <head> — meta data, <title>, styles, scripts

    • <body> — visible content

Elements & Attributes

  • Element = content wrapper (<p>Text</p>)

  • Attribute = extra info inside start tag (<p class="intro">)

  • Format: <tag attr="value">

Text Formatting Tags

  • <b>, <strong> — bold / important

  • <i>, <em> — italic / emphasized

  • <mark> — highlight

  • <small> — reduced size

  • <del>, <ins> — deleted / inserted

  • <sub>, <sup> — sub- & superscript

Lists

  • Unordered <ul> → bullets

  • Ordered <ol> → numbers

  • Description <dl> with <dt> term & <dd> definition

Hyperlinks

  • Basic: <a href="URL">text</a>

  • target values: _self (default), _blank, _parent, _top

  • Absolute URL = full address; relative URL = path within site

  • Image link: wrap <img> inside <a>

  • title attribute shows tooltip

Images

  • Tag: <img> (empty)

    • src — file path

    • alt — alternative text

    • Optional sizing via width / height or style

  • Supports animated GIFs

  • Can act as hyperlink when nested in <a>

Graphics Options

  • HTML Canvas — pixel-based drawing (bitmap)

  • SVG — vector graphics (scalable)

Quick Reference Tags

  • Structural: <!DOCTYPE>, <html>, <head>, <title>, <body>

  • Content: headings <h1>–<h6>, paragraph <p>

  • Grouping: <div>, <span>

  • Media: <img>, <video>, <audio>

  • Lists: <ul>, <ol>, <dl>

  • Link: <a>

Remember

  • Always close tags and nest properly

  • Quote attribute values

  • Provide meaningful alt text for accessibility

  • Use relative links for internal navigation, absolute for external

  • Validate code against standards for cross-browser consistency