HTML Tags for Text
HTML has a variety of tags for displaying text. Here are some of the most commonly used ones:
- `<p>`: This tag is used to create paragraphs.
Example:
<p>This is a paragraph of text.</p>
- `<h1>` to `<h6>`: These tags are used to create headings of different sizes, with `<h1>` being the largest and `<h6>` being the smallest.
Example:
<h1>This is a heading</h1>
<h2>This is a subheading</h2>
- `<strong>`: This tag is used to make text bold.
Example:
<strong>This text is bold.</strong>
- `<em>`: This tag is used to emphasize text, usually by italicizing it.
Example:
<em>This text is emphasized.</em>
- `<u>`: This tag is used to underline text.
Example:
<u>This text is underlined.</u>
- `<s>`: This tag is used to strike through text.
Example:
<s>This text is strikethrough.</s>
- `<blockquote>`: This tag is used to create a blockquote, which is a section of quoted text.
Example:
<blockquote>This is a blockquote.</blockquote>
- `<code>`: This tag is used to display code snippets.
Example:
<code>function myFunction() {
console.log(“Hello, world!”);
}</code>
- `<a>`: This tag is used to create links.
Example:
<a href=”https://www.example.com”>Click here to go to example.com</a>
10. Horizontal line `<hr>`
To insert a horizontal line in HTML, you can use the `<hr>` tag. The `<hr>` tag creates a thematic break between content, typically displayed as a horizontal line.
Here’s an example of how to use the `<hr>` tag:
<p>This is some text.</p>
<hr>
<p>This is more text.</p>
This will create a horizontal line between the two paragraphs of text. By default, the line extends across the entire width of the container element.
You can also use various attributes with the `<hr>` tag to adjust its appearance. For example, you can use the `size` attribute to set the height of the line, like this:
<hr size=”2″>
This will create a slightly thicker line than the default. Other attributes include `width` to set the width of the line, `color` to set the color of the line, and `align` to specify its alignment.
Code blocks
To display code blocks in HTML, you can use the `<code>` and `<pre>` tags. The `<code>` tag is used to enclose a section of code, while the `<pre>` tag is used to define preformatted text, which preserves white space and line breaks.
Here’s an example of how to use these tags together to create a code block:
<pre>
<code>
function myFunction() {
console.log(“Hello, world!”);
}
</code>
</pre>
This will display the code in a fixed-width font with preserved spacing and line breaks, like this:
function myFunction() {
console.log(“Hello, world!”);
}
You can also add syntax highlighting to your code blocks by using a library such as Prism.js or highlight.js. These libraries add classes to your code tags that can be styled with CSS to highlight different parts of the code. Here’s an example of how to use Prism.js:
<head>
<link rel=”stylesheet” href=”prism.css”>
<script src=”prism.js”></script>
</head>
<body>
<pre>
<code class=”language-javascript”>
function myFunction() {
console.log(“Hello, world!”);
}
</code>
</pre>
</body>
This will highlight the JavaScript code with different colors for keywords, strings, and other elements, like this:
javascript
function myFunction() {
console.log(“Hello, world!”);
}
Note that you need to include both the CSS and JavaScript files for the library, and add the appropriate class to your code tag to specify the language of the code.
Other Text Tags
Here are some other text-related HTML tags that you can use to format your content:
- `<br>`: This tag inserts a line break, without creating a new paragraph. It’s useful for inserting a line break within a paragraph, or for formatting text that doesn’t have a clear structure.
Example:
<p>This is the first line.<br>
This is the second line.</p>
- `<sup>`: This tag is used to display text in superscript, which is smaller and positioned above the baseline.
Example:
<p>The speed of light is 3 x 10<sup>8</sup> meters per second.</p>
- `<sub>`: This tag is used to display text in subscript, which is smaller and positioned below the baseline.
Example:
<p>The chemical formula for water is H<sub>2</sub>O.</p>
- `<small>`: This tag is used to display text in a smaller font size, typically used for fine print or disclaimers.
Example:
<small>This product is not intended for children under 12 years old.</small>
- `<mark>`: This tag is used to highlight text with a yellow background, typically used to draw attention to a specific section of text.
Example:
<p>The answer to the question is <mark>42</mark>.</p>
- `<del>`: This tag is used to display deleted text with a strikethrough, typically used in a document revision history.
Example:
<p>We removed the sentence “The sky is green.” from the final version of the report.</p>
<del>The sky is green.</del>
- `<ins>`: This tag is used to display inserted text with an underline, typically used in a document revision history.
Example:
<p>We added the sentence “The sky is blue.” to the final version of the report.</p>
<ins>The sky is blue.</ins>
These tags, along with the ones mentioned earlier, provide a lot of flexibility in formatting text and making it more readable and accessible.