HTML in 1 Day: Chapter 3: Text and Typography
By Shahin Mannan on
June 1, 2024
Formatting Text in HTML
Text is a fundamental part of any webpage. In this chapter, we'll cover how to use HTML to structure and format text, making your content both readable and visually appealing.
Headings
Headings are used to define the titles and subtitles of sections within your content. HTML provides six levels of headings, from <h1> (the most important) to <h6> (the least important).
<h1>Main Title</h1> <h2>Subtitle</h2> <h3>Section Title</h3> <h4>Subsection Title</h4> <h5>Minor Heading</h5> <h6>Smallest Heading</h6>
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text and Typography</title>
</head>
<body>
<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section Title</h3>
<h4>Subsection Title</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>
</body>
</html>
Paragraphs
Paragraphs are used to group blocks of text together. Use the <p> tag to define a paragraph.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text and Typography</title>
</head>
<body>
<p>This is a paragraph of text. Paragraphs are used to group blocks of
text together, making content more readable.</p>
</body>
</html>
Text Formatting
HTML provides various tags to format text, allowing you to emphasize or style specific parts of your content.
- Bold Text:
<b>or<strong> - Italic Text:
<i>or<em> - Underlined Text:
<u> - Strikethrough Text:
<s>
Examples:
<p>This is <b>bold text</b>.</p> <p>This is <i>italic text</i>.</p> <p>This is <u>underlined text</u>.</p> <p>This is <s>strikethrough text</s>.</p>
Lists
Lists are used to group related items together. HTML supports ordered lists (<ol>) and unordered lists (<ul>).
- Ordered List: Numbers the items.
- Unordered List: Uses bullet points.
Examples:
<h2>Ordered List</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Practical Exercise
- Create a New HTML File: Save it as
text_formatting.html. - Add Headings: Include headings from
<h1>to<h6>. - Add a Paragraph: Write a paragraph about yourself.
- Format Text: Use bold, italic, underlined, and strikethrough tags within your paragraph.
- Create Lists: Add an ordered and an unordered list of your favorite hobbies.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text and Typography</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<h2>About Me</h2>
<p>Hi, I'm a web developer. This is <b>bold</b>, <i>italic</i>,
<u>underlined</u>, and <s>strikethrough</s> text.</p>
<h2>My Hobbies</h2>
<h3>Ordered List</h3>
<ol>
<li>Reading</li>
<li>Coding</li>
<li>Traveling</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>Photography</li>
<li>Cooking</li>
<li>Gaming</li>
</ul>
</body>
</html>
Save and open this file in your browser to see the formatted text.
Key Takeaways
- Use headings to structure your content.
- Paragraphs group blocks of text for readability.
- Text formatting tags allow you to emphasize and style text.
- Lists are useful for grouping related items.
Next Steps
In the next chapter, we’ll explore links and navigation in HTML. You’ll learn how to create hyperlinks and build navigation menus to enhance user experience on your web pages. Keep practicing to master text formatting and typography in HTML.
Please Sign In to post a comment.