Getting Started with Marking Up Page Content Simple Tags < > you’re it

<p> Tag <p> defines a paragraph Automatically creates some space before and after itself Code Browser Display

<h1> - <h6> Tags Define headings <h1> is Most important <h6> is Least important Browser Display Code

<br /> Tag Inserts a single line break Empty tag – it has no end tag Use to enter blank lines, NOT to separate paragraphs Code Browser Display

<hr /> Tag Creates horizontal rule (line) AND Defines a separation of content (change) – a thematic break Empty tag - – it has no end tag Browser Display Code

<b> Tag Originally “b” short for “Bold” Default: makes text look bold Makes text have different style from the rest without meaning “extra important” Code Browser Display

<strong> Tag Default: makes text look bold Makes text have extra importance relative to content around it Additional <strong> tags show more importance Code Browser Display

<i> Tag Default: renders text in italics Represents text in different voice or mood from rest of text Code Browser Display

<em> Tag Default: renders text in italics Simple way to emphasize text (stress emphasis – something you’d pronounce differently) Code Browser Display

When to Use Which? <i> <b> <em> <strong> Words in different language Technical terms Taxonomic designations Typographically italicized text <b> Keywords Lead sentence in an article Typographically bold words <em> Stress Emphasis Something you’d pronounce differently <strong> Strong Importance Puts contents in hierarchy – assigns it a level of importance

Attributes Provide additional info about an element Specified in start tag Come in name/value pairs: name=“value” Attribute lang – short for language es – language code for Spanish Code Browser Display

 Right! Wrong! Nesting Tags must be nested correctly Should be closed out in reverse order.. First opened…Last closed Right!  Wrong!

HTML Comments Used to make notes to yourself (or to other web developers) Will be visible in HTML, but NOT in the page displayed by the browser <!-- This symbol starts my comment And I can keep typing on multiple lines Until I close off the tag like this -->