Formatting in HTML Language
HTML (Hypertext Markup Language) is the backbone of the World Wide Web. It serves as the foundation for structuring content on web pag
es. One of the key aspects of HTML is formatting, which allows web developers to control the appearance of text and other elements on a webpage. In this article, we’ll delve into the world of formatting in HTML and explore some practical examples.Basic Text Formatting
HTML provides several tags for basic text formatting:
- Headings: HTML offers six levels of headings, from
<h1>(the most significant) to<h6>(the least significant). These tags are used to structure content hierarchically.<h1>This is a Heading 1</h1> <h2>This is a Heading 2</h2> - Paragraphs: The
<p>tag is used to define paragraphs.<p>This is a paragraph of text.</p> - Bold and Italic Text: You can use the
<b>and<i>tags to make text bold or italic.<b>This is bold text.</b> <i>This is italic text.</i>
Lists
HTML supports both ordered and unordered lists. For an ordered list, you can use the <ol> tag, and for an unordered list, the <ul> tag. Each item within the list is defined with the <li> tag.
Ordered List:
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>Unordered List:
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>Links
Links are an integral part of the web, and HTML provides the <a> tag to create hyperlinks.
<a href="https://www.example.com">Visit Example Website</a>Images
To display images on a webpage, you can use the <img> tag.
<img src="image.jpg" alt="A beautiful image">Text Formatting within HTML Attributes
HTML attributes like title or alt also allow for some level of text formatting. For example, the title attribute can be used to display tooltips when the user hovers over an element.
<a href="https://www.example.com" title="Visit Example Website">Example</a>CSS for Advanced Formatting
While HTML provides basic formatting, for more advanced styling and layout, Cascading Style Sheets (CSS) is commonly used. CSS allows you to control font styles, colors, layouts, and more.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #3366CC;
font-size: 24px;
}
p {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>This is a styled heading</h1>
<p>This is styled text.</p>
</body>
</html>In this example, a CSS <style> block is embedded within the HTML document to define specific styles for <h1> and <p> elements.
Discover more from PiEmbSysTech
Subscribe to get the latest posts sent to your email.
