Html element for text

HTML tags for text

HTML is full of lots of different tags for text. These tags let us display text in our HTML documents in the ways we want it to be displayed. Although a basic feature of HTML, there is a lot to learn about these tags. Most tags for text are inline but there are exceptions. When an element is inline, that means by default they have this line of CSS applied to them:

What is an inline element in HTML?

Inline tags for text behave differently than block elements. They do not break the flow of content, and only take up as much space as is necessary. Block elements, on the other hand, tend to take up the full width of a page.

Therefore, HTML tags for text are all inline, since they are used in writing text, and they flow with other inline elements on the page.

Are there any block tags for text?

Some tags we use for text are block elements. This mostly refers to headers and paragraphs, which usually take up an entire line or section on a page. As such, a new paragraph appears below the last paragraph, instead of next to it, as you would expect.

Now that we’ve covered the basics, Let’s look at some of the main inline tags we use for text in HTML, some of which you may not have heard of before.

The header tags

In HTML, we can denote headers using numbered header tags. These are all block elements. The is the biggest tag on the page, while the is the smallest and least important. In modern search engines and when following best practice, the tag usually denotes the title of the page you are on — so you typically only have one .

Here is an example of all the header tags, from most important and biggest, to least important and smallest:

h1>Heading 1h1> h2>Heading 2h2> h3>Heading 3h3> h4>Heading 4h4> h5>Heading 5h5> h6>Heading 6h6> 

The p tag

This tag is a block tag for text, used to denote a paragraph. A paragraph in HTML usually has some margin, to separate it from other paragraph tags. An example is shown below:

The list tags: ul , ol and li

If we want to make a list in HTML like the example below, we use list tags:

There are two types of list — ol , or ordered lists, and ul , or unordered lists. Essentially, ordered lists have numbers, and unordered lists have standard bullet points.

Within ol and ul lists, you have li elements, which refer to list items. All 3 are block elements. Two examples are shown below:

ul>  li>Hi thereli>  li>I am a listli> ul> ol>  li>Hi thereli>  li>I am a listli> ol> 

The blockquote tag

The blockquote tag is, as the name suggests, a block element. It let’s us create quotes. This is often combined with figcaption for the caption, cite for who is cited, and figure , to encapsulate everything, to create a fully fledged quote. Here is an example of all that in action:

figure>  blockquote>  I am HTML figcaption>HTML, from cite>HTML in actioncite>figcaption> blockquote>figure> 

The result looks like this:

The em tag

The em tag is used to make text emphasised or italic. Here is an example of how that looks. In code, we write it like this:

em>An emphasised piece of textem> 

The strong tag

The strong tag is used to make text bold. Here is an example of how that looks. It looks like this in code:

strong>An emphasised piece of textstrong> 

The br tag

This element makes a line break anywhere you like. It looks like this in code:

The i tag

This element makes text underlined It looks like this in code:

The code tag

The strong tag is used to make text bold. Here is an example of how that looks. It looks like this in code:

strong>An emphasised piece of textstrong> 

The code tag

This element highlights a piece of code on the page. It is styled like below:

The pre tag

This element denotes text that shouldn’t have any line breaks. If you keep typing, this element will stop the text from breaking at any point, instead overflowing. An example is shown in the code element below. The text keeps going, even though it reaches the end of the container:

pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fermentum mi nec ipsum feugiat, sagittis vulputate diam pretium. Praesent aliquam viverra tempor. Curabitur consectetur bibendum ultricies. Pellentesque vel efficitur sapien. Vivamus non turpis accumsan, semper quam sed, viverra diam. Mauris arcu elit, tempus eget elementum id, laoreet finibus erat. In nec diam commodo, accumsan turpis at, blandit risus. Sed eget ligula purus. Maecenas non commodo eros. Curabitur viverra felis vitae nisl hendrerit, at vestibulum erat luctus. Pellentesque consequat ipsum mi, ut aliquam enim viverra in.pre> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fermentum mi nec ipsum feugiat, sagittis vulputate diam pretium. Praesent aliquam viverra tempor. Curabitur consectetur bibendum ultricies. Pellentesque vel efficitur sapien. Vivamus non turpis accumsan, semper quam sed, viverra diam. Mauris arcu elit, tempus eget elementum id, laoreet finibus erat. In nec diam commodo, accumsan turpis at, blandit risus. Sed eget ligula purus. Maecenas non commodo eros. Curabitur viverra felis vitae nisl hendrerit, at vestibulum erat luctus. Pellentesque consequat ipsum mi, ut aliquam enim viverra in.

The button tag

This element lets us create a button. An example is shown below, along with the code:

button>I am a buttonbutton> 

The s tag

This tag represents a striked through piece of text, like this. It can be written in code like this:

Источник

HTML tags for text

Inside it, we can add any inline element we like, like span or a .

We cannot add block elements.

We cannot nest p elements one into another.

By default browsers style a paragraph with a margin on top and at the bottom. 16px in Chrome, but the exact value might vary between browsers.

This causes two consecutive paragraphs to be spaced, replicating what we think of a “paragraph” in printed text.

The span tag

This is an inline tag that can be used to create a section in a paragraph that can be targeted using CSS:

p>A part of the text span>and here another partspan>p>

The br tag

This tag represents a line break. It’s an inline element, and does not need a closing tag.

We use it to create a new line inside a p tag, without creating a new paragraph.

And compared to creating a new paragraph, it does not add additional spacing.

The heading tags

HTML provides us 6 heading tags. From most important to least important, we have h1 , h2 , h3 , h4 , h5 , h6 .

Typically a page will have one h1 element, which is the page title. Then you might have one or more h2 elements depending on the page content.

Headings, especially the heading organization, are also essential for SEO, and search engines use them in various ways.

The browser by default will render the h1 tag bigger, and will make the elements size smaller as the number near h increases:

All headings are block elements. They cannot contain other elements, just text.

The strong tag

This tag is used to mark the text inside it as strong. This is pretty important, it’s not a visual hint, but a semantic hint. Depending on the medium used, its interpretation will vary.

Browsers by default make the text in this tag bold.

The em tag

This tag is used to mark the text inside it as emphasized. Like with strong , it’s not a visual hint but a semantic hint.

Browsers by default make the text in this italic.

Quotes

The blockquote HTML tag is useful to insert citations in the text.

Browsers by default apply a margin to the blockquote element. Chrome applies a 40px left and right margin, and a 10px top and bottom margin.

The q HTML tag is used for inline quotes.

Horizontal line

Not really based on text, but the hr tag is often used inside a page. It means horizontal rule , and it adds an horizontal line in the page.

Useful to separate sections in the page.

Code blocks

The code tag is especially useful to show code, because browsers give it a monospaced font.

That’s typically the only thing that browsers do. This is the CSS applied by Chrome:

code  font-family: monospace; >

This tag is typically wrapped in a pre tag, because the code element ignores whitespace and line breaks. Like the p tag.

Chrome gives pre this default styling:

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

which prevents white space collapsing and makes it a block element.

Lists

Unordered lists are created using the ul tag. Each item in the list is created with the li tag:

ul>  li>Firstli>  li>Secondli> ul>

Ordered lists are similar, just made with the ol tag:

ol>  li>Firstli>  li>Secondli> ol>

The difference between the two is that ordered lists have a number before each item:

Definition lists are a bit different. You have a term, and its definition:

dl>  dt>Flaviodt>  dd>The namedd>  dt>Copesdt>  dd>The surnamedd> dl>

This is how browsers typically render them:

I must say you rarely see them in the wild, for sure not much as ul and ol , but sometimes they might be useful.

Other text tags

There is a number of tags with presentational purposes:

• the mark tag
• the ins tag
• the del tag
• the sup tag
• the sub tag
• the small tag
• the i tag
• the b tag

This is an example of the visual rendering of them which is applied by default by browsers:

You might wonder, how is b different than strong ? And how i is different than em ?

The difference lies in the semantic meaning. While b and i are a direct hint at the browser to make a piece of text bold or italic, strong and em give the text a special meaning, and it’s up to the browser to give the styling. Which happens to be exactly the same as b and i , by default. Although you can change that using CSS.

There are a number of other, less used tags related to text. I just mentioned the ones that I see used the most.

Источник

HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

Example

This is _subscript and superscript

HTML Formatting Elements

Formatting elements were designed to display special types of text:

• — Bold text
• — Important text
• — Italic text
• — Emphasized text
• — Marked text
• — Smaller text
• — Deleted text
• — Inserted text
• — Subscript text
• — Superscript text

HTML and Elements

The HTML element defines bold text, without any extra importance.

Example

The HTML element defines text with strong importance. The content inside is typically displayed in bold.

Example

HTML and Elements

The HTML element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

Tip: The tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.

Example

The HTML element defines emphasized text. The content inside is typically displayed in italic.

Tip: A screen reader will pronounce the words in with an emphasis, using verbal stress.

Example

HTML Element

The HTML element defines smaller text:

Example

HTML Element

The HTML element defines text that should be marked or highlighted:

Example

Do not forget to buy milk today.

HTML Element

The HTML element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text:

Example

My favorite color is blue red.

HTML Element

The HTML element defines a text that has been inserted into a document. Browsers will usually underline inserted text:

Example

HTML Element

The HTML _{element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:}

Example

HTML Element

The HTML element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW [1] :

Example

This is ^{superscripted} text.

HTML Exercises

HTML Text Formatting Elements

Tag	Description
	Defines bold text
	Defines emphasized text
	Defines a part of text in an alternate voice or mood
	Defines smaller text
	Defines important text
	Defines subscripted text
	Defines superscripted text
	Defines inserted text
	Defines deleted text
	Defines marked/highlighted text

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник