Introduction

  • There is a distinction between hashtags used on TikTok and tags in HTML.

HTML Markup

  • Markup refers to the tags used to format webpage contents, providing meaning and structure to the displayed text.
  • Structural Markup: Refers to elements like headings and paragraphs that organize content visually.
  • Semantic Markup: Adds additional meaning to certain text elements, indicating emphasis, quotes, acronyms, etc.

Headings in HTML

  • HTML provides six levels of headings:
    • H1: Main heading (largest)
    • H2: Subheading
    • H3: Sub-subheading
    • H4: Fourth level heading
    • H5: Fifth-level heading
    • H6: Smallest heading
  • Different browsers may display different sizes for headings, but they can be controlled with CSS.
  • Example of headings in HTML:
    • <H1>This is a main heading</H1>
    • <H2>This is a level two heading</H2>
    • <H3>This is a level three heading</H3>
    • <H4>This is a level four heading</H4>
    • <H5>This is a level five heading</H5>
    • <H6>This is a level six heading</H6>

Paragraphs in HTML

  • A paragraph is defined as one or more sentences forming a coherent unit.
  • Start of a paragraph is indicated by a new line using the <P> tag.
  • Browsers display paragraphs on a new line with space between them.
  • Example of paragraph in HTML:
    • <P>This is a paragraph of text.</P>

Text Formatting

  • Bold Text:

    • Use <B> tag to make text bold, often signifies importance but does not add semantic value.
    • Example: <B>This text is bold</B>
    • Note: Strong Elements: <STRONG> signifies text of strong importance, usually displayed in bold.

  • Italic Text:

    • Use <I> tag to italicize text, often for technical terms, foreign words, etc.
    • Example: <I>This text is italic</I>
    • Note: Emphasis Elements: <EM> indicates emphasis and is often rendered in italics.

Superscripts and Subscripts

  • Superscript: Created using the <SUP> tag, commonly used for mathematical expressions or footnotes (like x² or dates).
  • Subscript: Created using the <SUB> tag, often used in chemical formulas, e.g., H₂O.
  • Example:
    • Superscript: <SUP>4</SUP> represents x raised to the 4th power.
    • Subscript: <SUB>2</SUB> indicates a subscript.

White Space and New Lines in HTML

  • To improve readability, authors often use indentation or extra space, but browsers collapse multiple spaces into a single space.
  • Use of <BR> for line breaks within a paragraph or sections.
  • Example of line breaks:
    • <P>Earth<BR>is getting heavier.</P>

Horizontal Rules

  • The <HR> tag is used to create horizontal lines to divide content or themes.
    • Example: <HR> creates a visual barrier in content.

Empty Elements in HTML

  • Some elements do not have a closing tag (known as empty elements), such as <BR> or <HR>, often written as <HR />.

Content Management Systems and Visual Editors

  • Visual editors resemble word processors and allow for easy formatting of content:
    • Headings can be created by selecting text and choosing a dropdown option.
    • Bold and italic text formatting available through buttons.
    • and elements for showing deleted and inserted text.

Semantic Markup elements

  • Semantic markup does not affect the structure but provides meaning, aiding search engines and screen readers.
  • Important elements include:
    • : Emphasizes words (rendered in italics).
    • : Used for longer quotes, often indented.
    • : Used for shorter quotes, displayed with quotation marks.
    • : Indicates abbreviations and accepts the title for the full term.
  • Example of definitions:
    • <ABBR title="National Aeronautics and Space Administration">NASA</ABBR>

Quotations and Citations

  • : Used for longer quotes, often taking up a full paragraph, with nested <P> tags inside.
    • Example:
    • <BLOCKQUOTE><P>Quote content.</P></BLOCKQUOTE>
  • : Used for referencing sources with italic display by browsers.
  • HTML5 allows the site attribute in <CITE> elements for more context.

Definitions

  • : Indicates a defining instance of a new term.
    • Example: <DFN>Black hole</DFN> is a region of space where nothing can escape.

Address Element

  • The <ADDRESS> element is used for contact information related to the author.
  • Can include physical addresses, phone numbers, and is typically italicized by browsers.

Insertions and Deletions in HTML

  • : Shows inserted content, usually underlined by browsers.
  • : Indicates deleted content, typically shown with a line through it.
  • Example: <P>The <INS>best</INS> idea ever had been <DEL>worst</DEL>.</P>

Strike-through Text

  • The <S> element indicates content that is no longer accurate but should not be deleted and is displayed with a line through it.

List Types in HTML

  • HTML provides three types of lists:
    1. Ordered Lists: Numbered items, created using <OL> and list items with <LI>.
    2. Unordered Lists: Bullet point items, created using <UL> with <LI> for each item.
    3. Definition Lists: Pairs of terms and definitions using <DL>, <DT> for terms, and <DD> for definitions.

Nested Lists

  • Sub-lists can be created within list items, often displayed differently to show hierarchy.

Summary

  • HTML organizes content through structural (headings, paragraphs) and semantic markup (emphasis, quotes).
  • Text can be formatted via various tags for bold, italics, and lists exist for ordered, unordered, and definitions supporting clarity and organization.