Skip to main content

HTML Basics - Text tags


Between the closing head tag and the closing html tag we only have the body tag and only one of them. Inside of this tag we place all the tags to make up the content on the page.

Block elements vs inline elements#

Block elements do not allow other elements next to them, inline elements do. This behaviar can be changed using CSS display property.

The <p> tag#

This tag creates a paragraph of text. Type: Block element.

<p>This is a paragraph</p>
<p>This is another paragrapp</p>

The <span> tag#

This tag can be used to create a section inside a paragraph, that you can target with CSS.
Type: Inline element.

<p>This is a paragraph <span>This test will be styled with css</span></p>

The `````` tag#

This tag creates a line break. Can be used to create a line break in a paragraph.
Type: Inline element.

<p>This is a paragraph more text in a new line</p>

This is a paragraph more text in a new line

The <h1> - <h6> tags#

From big to small and most important to least important, we have h1, h2,h3,h4,h5,h6. You should always only have one h1 element on a page. headings are important to SEO.

Type: Block element.

<h1>Biggest</h1>
<h2>Smaller than h1</h2>
<h3>Smaller that h2</h3>
<h4>Smaller that h3</h4>
<h5>Smaller that h4</h5>
<h6>Smallest</h6>

The <strong> tag#

This tag marks text as strong, to show it's important. Type: Inline element.

<p>This is a paragraph <strong>of text</strong></p>

This is a paragraph of text

The <em> tag#

This tag is used to mark the text as emphasized. It's not a visual hint but a semantic hint.
Type: Inline element.

<p>This is a paragraph of <em>text</em></p>

This is a paragraph of text

The <blockquote> tag#

The <blockquote> tag specifies a section that is quoted from another source. Browsers usually indent <blockquote> elements.
Type: Block element.

<blockquote>This is a blockquote</blockquote>
This is a blockquote

The `` tag#

This tag creates a horizontal line, this can be used to create separation between content.
Type: Block element.

<p>We are separated by a hr tag</p>
<hr />
<p>We are separated by a hr tag</p>

We are separated by a hr tag

We are separated by a hr tag

The <code> tag#

This tag is very useful to show code blocks.
Type: Block element.

<pre>
<code>
console.log("This tag can be used to display code like this");
console.log("And like this");
</code>
</pre>

You have to wrap the code block with a <pre> tag otherwise whitespace will be igored and all the text will be displayed in one line.
By default the browser will apply styling to the pre tag similar to this.

pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0px;
}

Lists#

There 3 types of lists,

  1. unordered list
  2. ordered list
  3. definition list ( rarely used )

The <ul> tag#

This tag creates a undordered list and each item in the list are presented with a <li> tag.
Type: Block element.

<ul>
<li>item1</li>
<li>item2</li>
</ul>
  • item1
  • item2

The <ol> tag#

This tag creates a ordered list and each item in the list are presented with a <li> tag.
Type: Block element.

<ol>
<li>item1</li>
<li>item2</li>
</ol>
  1. item1
  2. item2

Other text tags for presentational purposes.#

The <mark> tag#

<mark>mark</mark>
mark

The <ins> tag#

<ins>ins</ins>
ins

The <del> tag#

<del>del</del>
del

The <sup> tag#

<p>2 x 4<sup>8</sup></p>

2 x 48

The <sub> tag#

<p>$16<sub>p/p</sub></p>

$16p/p

The <small> tag#

<p>This is normal text<small>This is small text</small></p>

This is normal text and this is small text

The <i> tag#

<i>This is text in a i tag</i>
This is text in a i tag

The <b> tag#

<b>This is text in a b tag</b>
This is text in a b tag

Links#

Links are created using the <a> tag and it's destination can be set with the href attribute. The link name can be added between the opening and closing tag.

<a href="https://jeansnyman.com">Home</a>
// it can also be a relative url
<a href="/blog/">Blog</a>
//To open a link in a new tab
<a href="/blog/" target="_blank">Blog</a>
//The link text can also be replaced with anything else like an image.
<a href="https://jeansnyman.com">
<img src="some_image.jpg" alt="image" />
</a>
Last updated on