HTML Lecture 05 - HTML Formatting
- Alex Wright
- Aug 29, 2020
- 2 min read
Updated: Jul 1, 2022
HTML Formatting
There are many different kinds of formatting elements in HTML used to give special meaning to a text. We are going to look at some of those formatting elements.:
<b> - Bold text
<strong> - important text
<i> - italic text
<em> - emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - deleted text
<ins> - inserted text
<sub> - subscript text
<sup> - superscript text
Let's use all of these formatting elements in our code:
<!DOCTYPE html>
<html>
<head>
<title>Lecture 05</title>
</head>
<body>
<p>I am a <b>bold</b> text</p>
<p>I am a <strong>strong</strong> text</p>
<p>I am an <i>italic</i> text</p>
<p>I am an <em>emphasized</em> text</p>
<p>I am a <mark>marked</mark> text</p>
<p>I am a <small>small</small> text</p>
<p>I am a <del>deleted</del> text</p>
<p>I am a <ins>inserted</ins> text</p>
<p>I am a <sub>subscript</sub> text</p>
<p>I am a <sup>superscript</sup> text</p>
</body>
</html>
The results are:
You can see above how different HTML formatting elements have affected the words in a sentence.
HTML Quotations
Just like formatting elements, we have HTML quotation elements used to Quote a sentence or cite a source. The commonly used quotation elements are:
<blockquote> - To define a section that is quoted from another source.
<q> - To define a short quotation
<abbr> - It is used to define the abbreviation or acronym
<address> - It is used to define the contact information.
<cite> - Used to define the title of the creative work.
Let's use all of these quotation elements in our code:
<!DOCTYPE html>
<html>
<head>
<title>Lecture 05</title>
</head>
<body>
<p>Here is a quote from NASA's website:</p>
<blockquote cite="https://www.performance.gov/NASA/#:~:text=NASA's%20historic%20and%20enduring%20purpose,challenges%20and%20catalyze%20economic%20growth">
The National Aeronautics and Space Administration (NASA) is the United States government agency responsible for U.S. space exploration, space technology, Earth and space science, and aeronautics research.
</blockquote>
<p>NASA's goal is to: <q>Expand human knowledge through new scientific discoveries.</q></p>
<p>The <abbr title="National Aeronautics and Space Administration">NASA</abbr> was founded in 1958.</p>
<address>
Written by Atif Rabbani.<br>
Visit us at:<br>
atifrabbaniblogs.com<br>
Box 786, Wonderland<br>
USA
</address>
<p><cite>Julius Caeser</cite> was written by William Shakespeare.</p>
</body>
</html>The results are:
As you can see above the first statement is indented showing that it is a blockquote. NASA's goal on the second line is under double quotes representing it as a quote. The third line has NASA underlined and as you hover over it, it will display the abbreviation. The fourth paragraph shows the address in italics and the last line displays the name of the book in italic representing the book name written by William Shakespeare.
HTML Comments
HTML Comments are used by programmer to indicate what is being done on a specific line of code, this not only helps the person who is writing the code but also for people who may look at the code in the future and understand the flow of program easily. Comments do not appear on a webpage. Let us have a look at the below code.
<!DOCTYPE html>
<html>
<head>
<title>Lecture 05</title>
</head>
<body>
<!--I am a comment.-->
<p>I am a paragraph</p>
</body>
</html>The results are:
As you can see in the results, the commented part did not appear on the webpage.
Comentários