Text Formatting in HTML | HTML5 for Web Development - Software Development PDF Download
| Table of contents |
|
| Introduction |
|
| Headings |
|
| This is a Heading 1 |
|
| Paragraphs |
|
| Emphasis and Strong |
|
| Text Formatting |
|
| Line Breaks |
|
| Preformatted Text |
|
| Sample Problems |
|
Introduction
HTML (Hypertext Markup Language) is the standard language used for creating web pages. In HTML, you can not only structure your content but also apply various formatting styles to make it visually appealing. In this article, we will explore the basics of text formatting in HTML, including headings, paragraphs, emphasis, and more.
Headings
Headings are used to structure and organize the content on a web page. HTML provides six levels of headings, from '<h1>' to '<h6>', where '<h1>' represents the highest level of heading and '<h6>' the lowest. The higher the number, the smaller the heading size.
Here's an example:
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
Output:
This is a Heading 1
This is a Heading 2
This is a Heading 3
Paragraphs
To create paragraphs in HTML, we use the '<p>' tag. This tag is used to enclose a block of text that forms a paragraph. Here's an example:
<p>This is a paragraph of text.</p>
<p>This is another paragraph.</p>
Output:
This is a paragraph of text.
This is another paragraph.
Emphasis and Strong
HTML provides tags for emphasizing and highlighting text. The <em> tag is used for emphasizing text, which is typically displayed in italics. The <strong> tag is used to highlight text, usually displayed in bold.
Here's an example:
<p>This text is <em>emphasized</em>.</p>
<p>This text is <strong>strong</strong>.</p>
Output:
This text is emphasized.
This text is strong.
Text Formatting
HTML provides additional tags to format text, such as '<u>' for underlined text, '<s>' for strikethrough, '<sub>' for subscript, and '<sup>' for superscript. Here's an example:
<p>This is <u>underlined</u> text.</p>
<p>This is <s>strikethrough</s> text.</p>
<p>This is <sub>subscript</sub> text.</p>
<p>This is <sup>superscript</sup> text.</p>
Output:
This is underlined text.
This is strikethrough text.
This is subscript text.
This is superscript text.
Line Breaks
To insert line breaks within a paragraph, you can use the '<br>' tag. It is a self-closing tag, meaning it doesn't require a closing tag. Here's an example:
<p>This is the first line.<br>
This is the second line.</p>
Output:
This is the first line.
This is the second line.
Preformatted Text
If you want to display text exactly as it is, including spaces and line breaks, you can use the '<pre>' tag. It preserves the formatting and is commonly used for displaying code snippets or ASCII art. Here's an example:
<pre>
This is some
preformatted text.
</pre>
Output:
This is some
preformatted text.
Sample Problems
Problem 1: Create a webpage with a heading that says "Welcome to My Website."
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>
Problem 2: Write a paragraph describing your favorite hobby.
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
<h2>About Me</h2>
<p>My favorite hobby is playing guitar. I enjoy strumming the strings and creating beautiful melodies.</p>
</body>
</html>
Conclusion
In this article, we have covered the basics of text formatting in HTML, including headings, paragraphs, emphasis, and various formatting tags. By applying these techniques, you can make your web content more visually appealing and well-structured.
|
20 videos|15 docs|2 tests
|
|
4.96/5 Rating |
|
Nov 22, 2024 Last updated |
|
Explore Courses for Software Development exam
|
|
Viva Questions
,Text Formatting in HTML | HTML5 for Web Development - Software Development
,Text Formatting in HTML | HTML5 for Web Development - Software Development
,Text Formatting in HTML | HTML5 for Web Development - Software Development
,study material
,Summary
,past year papers
,mock tests for examination
,Exam
,video lectures
,Extra Questions
,ppt
,practice quizzes
,Previous Year Questions with Solutions
,Important questions
,Objective type Questions
,shortcuts and tricks
,Semester Notes
,MCQs
,Sample Paper
,Free
;
Text Formatting in HTML Free PDF Download
Importance of Text Formatting in HTML
Text Formatting in HTML Notes
Text Formatting in HTML Software Development Questions
Study Text Formatting in HTML on the App
|
© EduRev
|
Education Revolution
|
Follow Us
|
