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.
 |
Download the notes
Text Formatting in HTML
|
Download as PDF |
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.
 |
Take a Practice Test
Test yourself on topics from Software Development exam
|
Practice Now |
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
|
Semester Notes
,Text Formatting in HTML | HTML5 for Web Development - Software Development
,Viva Questions
,past year papers
,Previous Year Questions with Solutions
,Extra Questions
,study material
,Sample Paper
,Important questions
,mock tests for examination
,Free
,ppt
,Text Formatting in HTML | HTML5 for Web Development - Software Development
,MCQs
,Exam
,Objective type Questions
,Summary
,video lectures
,shortcuts and tricks
,practice quizzes
,Text Formatting in HTML | HTML5 for Web Development - Software Development
;
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
|
|
