Text-related tags

This article explains about text-related tags.

The explanation is divided into semantic and non-semantic tags.

YouTube Video

Creating CSS for preview

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

Basic text-related tags

<div> tag

1<div>This is a division of content.</div>

• The <div> tag is a block-level element used to create divisions within HTML.

• The <div> tag is a non-semantic tag.

  When focusing on semantic HTML, meaningful tags (such as <section>, <article>) can be used. This helps search engines and screen readers better understand the content of the page.

• By combining it with CSS and JavaScript, you can control the appearance and behavior of the page.

  The <div> tag is used to group content on a page as a block-level element. It is mainly used in combination with CSS and JavaScript to adjust page layout, style, and manipulate elements.

<p> tag

1<p>This is a paragraph of text.</p>

• The <p> tag is an element used to define a paragraph in HTML. The <p> represents a paragraph and is mainly used to group and display text. It helps make content easier to read by visually separating sections of text.
• You cannot place other block-level elements like another <p> tag or a <div> tag inside a <p> tag. This is prohibited by the HTML specification. If you do, the browser will automatically close the tag, and it will not display correctly.

<a> tag

1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

• The <a> tag is used to create links.

  The <a> tag is used to create links to other pages, external sites, or files. The href attribute is used to specify the destination of the link.

• It can be used for text or image links, and using target="_blank" will open the link in a new tab.

• The target attribute is used to specify how the linked destination will be displayed.

  • _self (default): Opens the link in the current window or tab.
  • _blank: Opens the link in a new window or tab.
  • _parent: Opens the link in the parent frame.
  • _top: Opens the link in the full window, ignoring any frames.

• The title attribute is used to display a tooltip on a link. When a user hovers over the link, the specified title is displayed.

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>

• The <a> tag is also used to jump to specific locations within the same page. To achieve this, you set an id attribute on the target element and use this id in the href attribute of the link.

<span> tag

1Here is some <span style="color: red;">highlighted text

• The <span> tag is an inline element.

  The <span> tag is an inline element, so it doesn't break the line when used between text, links, images, or other inline elements. It fits naturally into the flow of the page.

• You can apply specific styles partially.

  When you want to apply a style to only part of the document, you can use the <span> tag to assign a CSS class or ID and apply styles to a specific range.

• The <span> tag is a non-semantic element.

  Since the <span> tag has no specific meaning or structural role, it is used purely for styling or scripting purposes. When semantic emphasis is needed, it's more appropriate to use semantic tags like <strong> or <em>, which will be introduced later.

<br> tag

1Here is some text with a <br> line break.

• The <br> tag is an inline element.

  Since the <br> tag is an inline element, it doesn't take up the entire block, and it creates a line break in the text where it's placed. While the <p> tag adds margin above and below to separate paragraphs, the <br> tag creates a line break without adding any margin.

• It is a self-closing tag, so a closing tag (</br>) is not needed.

• It's best to avoid overusing it, and use <p> tags or CSS for paragraph breaks or layout adjustments.

  When organizing text into paragraphs, it's more appropriate to use the <p> tag. It's also recommended to use CSS for layout adjustments. For example, using the white-space property in CSS can display line breaks and spaces in text as they appear.

<hr> tag

1This is some text.<hr>This is another section of text.

• The <hr> tag is a block-level element.

  The <hr> tag is used to insert a horizontal line to visually separate sections of content. It can also be used to signify a thematic break, giving it meaning based on context.

• It is a self-closing tag, so a closing tag (</hr>) is not necessary.

• You can customize its color, length, and thickness using CSS.

Semantic text-related tags

From <h1> tag to <h6> tag

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

• The <h1> to <h6> tags are heading tags used in HTML.

  The <h1> tag represents the most important heading and is typically used as the main title of the entire page. It's common to use only one <h1> tag per HTML document.

  The <h2> tag is the next most important heading after <h1> and is used for section or chapter titles within the page.

  The <h3> tag represents subtitles or smaller sections under <h2>.

  The <h4>, <h5>, and <h6> tags represent lower-level headings, used for more detailed items or section titles.

• Heading tags indicate the importance of text and help create the logical structure of a page. Search engines also use heading tags to understand the content of the page.

<strong> tag

1<strong>Important text</strong> to emphasize significance.

• The <strong> tag is an HTML tag used to indicate the importance or emphasis of text and is typically displayed in bold.

• The <strong> tag is a semantic tag, and its primary purpose is to add meaning.

  It can indicate that the text is contextually important. For example, it can show the importance of the text to search engines, making it useful for SEO. It also conveys the importance of the text to users with screen readers. On the other hand, the <b> tag, which will be introduced later, is simply a tag to make text bold and does not provide semantic emphasis.

<em> tag

1<em>Emphasized text</em> for italics and emphasis.

• The <em> tag is an HTML tag used to indicate importance or emphasis in text and is usually displayed in italics.

• The <em> tag is a semantic tag, and its main purpose is to provide meaning.

  Like the <strong> tag, it can indicate that text is contextually important. The <strong> tag is usually displayed in bold, while the <em> tag is typically displayed in italics. Both are recognized by screen readers and search engines for semantic emphasis, but <strong> indicates stronger importance, while <em> conveys emotional emphasis. Additionally, the <i> tag, which will be introduced later, simply italicizes text and does not provide semantic emphasis.

<mark> tag

1<mark>Highlighted text</mark> for attention.

• The <mark> tag is used to indicate that specific text is contextually important. It is useful for highlighting search results or key points.
• By default, text enclosed in the <mark> tag is displayed with a yellow background, visually emphasizing its importance.

<del> tag

1<del>Deleted text</del> shows removed content.

• The <del> tag is used to indicate that text has been deleted or modified. This tag is useful for showing the history of changes or revisions to text.

• Text enclosed in the <del> tag is usually displayed with a strikethrough. This visually indicates the deleted content.

  Text enclosed in the <del> tag is also recognized as deleted by screen readers. This allows content that is not visually apparent to still be understood.

<ins> tag

1<ins>Inserted text</ins> shows added content.

• The <ins> tag is used to indicate newly added or modified text in a document. This tag is useful for showing the history of text additions or revisions.

• In browsers, text enclosed in the <ins> tag is typically displayed with an underline. This visually indicates added content.

  Text enclosed in the <ins> tag is also recognized as newly added by screen readers. This allows content that is not visually apparent to still be understood.

<abbr> tag

1<abbr title="World Health Organization">WHO</abbr>

• The <abbr> tag is an inline element used to indicate abbreviations or acronyms. Using this tag provides the full meaning of abbreviations and contributes to improving SEO and accessibility. It especially helps readers unfamiliar with the abbreviation and users of screen readers to better understand its content.

Text decoration-related tags

<b> tag

1<b>Bold text</b> without semantic emphasis.

• The <b> tag is an inline element used to bold text. Like the other tags we'll introduce, it is used for visual emphasis but not for semantic emphasis.

<i> tag

1<i>Italic text</i> for style.

• The <i> tag is an inline element used to italicize text.

<u> tag

1<u>Underlined text</u> for decoration.

• The <u> tag is an inline element used to underline text.

<small> tag

1<small>This is small text.</small>

• <small> tag is an inline element used to display text in a smaller size. It is commonly used to represent supplementary information or annotations that are secondary to the main content.

<s> tag

1<s>Strikethrough text</s>

• <s> tag is an inline element used to draw a strikethrough line on text.

<sub> tag

1H<sub>2</sub>O

• <sub> tag is an inline element used to display subscript text.

<sup> tag

1E = mc<sup>2</sup>

• <sup> tag is an inline element used to display superscript text.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video