More HTML Tags
CS 1150 Fall 2016
Formatting Elements
• <b> - Bold text
• <i> - Italic text
• <mark> - Marked text
• <small> - Small text
• <sub> - Subscript text
• <sup> - Superscript text
Semantic Markup
• There are some text elements that are not intended to affect the structure
of your webpages, but they do add extra information to the pages – they are
known as semantic markup
• For example, the <em> element is shown in italics in most browsers, but you
should not use it to change the way that your text looks; its purpose is to
describe the content of your webpages more accurately
• Semantic markup information is useful to screen readers or search engines
HTML <b> and <strong> Elements
• <b> is a formatting element that bolds the text, while <strong> is a semantic
element
• <b> This text is bold </b>
• <strong> This text is strong </strong>
• Browsers display <strong> as <b>. However, there is a difference in the
meaning of these tags: <b> defines bold, but <strong> means that the text is
“important”
HTML <i> and <em> Elements
• <i> is a formatting element that italicizes the text, while <em> is a semantic
element
• <i> This text is italic </i>
• <strong> This text is emphasized</strong>
• Browsers display <em> as <i>. However, there is a difference in the meaning
of these tags: <i> defines italic, but <em> means that the text is
“emphasized”
HTML <small> Elements
• The HTML <small> element defines smaller text
• <small> is a formatting element
• <small> This text is small</small>
HTML <marked> Elements
• The HTML <marked> element defines marked or highlighted text
• <marked> is a formatting element
• <marked> This text is marked</marked>
HTML <sub> Elements
• The HTML <sub> element defines subscripted text
• <sub> is a formatting element
• <sub> This text is subscripted</sub>
HTML <sup> Elements
• The HTML <sup> element defines superscripted text
• <sub> is a formatting element
• <sup> This text is superscripted</sup>
HTML <del> Elements
• The HTML <del> element defines deleted or strike-through text
• <del> is a semantic element
• <del> This text is deleted</del>
HTML <ins> Elements
• The HTML <ins> element defines inserted or underlined text
• <ins> is a semantic element
• <ins> This text is inserted</ins>
Other Semantic Elements
•
•
•
•
•
•
In addition to <strong> and <em>, there are other semantic elements that describe
extra information about the text
<blockquote> indicates to the browser that there is a long quote present
<q> indicates a shorter quote
<abbr> indicates an abbreviation or acronym
<cite> indicates a reference to a piece of work like a book or film
<dfn> indicates a the defining instance of a new term
White Space Collapsing
• When the browser comes across two or more spaces next to each other, it
only displays one space
• Similarly, if it comes across a line break, it treats that as a single space too
• This is known as white space collapsing
Line Breaks
• If you want to add a line break inside the middle of a paragraph, you can use
the line break tag <br />
• The line break element is known as an empty element – it does not have an
opening and closing tag, but instead has only one tag
• <pThe Earth<br />gets one hundred tons heavier every day<br />due to
falling space dust.</p>
Horizontal Rules
• To create a break between themes, such as a change of topic in a book or a
new scene in a play, you can add a horizontal rule between sections using
the <hr /> tag
• The horizontal rule element is known as an empty element – it does not
have an opening and closing tag, but instead has only one tag
• <p>Section One<hr />Section Two</p>
Helpful Links
•
•
•
•
http://www.w3schools.com/html/html_formatting.asp
Example files for formatting and semantic elements:
•
•
https://www.cs.mtsu.edu/~crn2k/public/courses/1150/formatting_semantic_elements.html
https://www.cs.mtsu.edu/~crn2k/public/courses/1150/more_semantic_elements.html
Example file for white space collapsing
https://www.cs.mtsu.edu/~crn2k/public/courses/1150/spaces.html
Example file for line breaks and horizontal rules
https://www.cs.mtsu.edu/~crn2k/public/courses/1150/breaks.html