HTML text formatting rules: Which tags to use

Before formatting, let’s review the main guidelines we follow when checking a website’s HTML layout as a whole.

•  Your HTML code has to be valid.

Just what is validity? This means compliance to the W3C (The World Wide Web Consortium) standard, which ensures that your site will be displayed correctly for any user using any browser on any desktop or portable device.

•   Your website has to be mobile-friendly.

We should prioritize image quality and the site’s usability for mobile devices. You can use this Google service to quickly check whether your page is optimized for mobile view.

•   Reduce the amount of code.

CSS styles, scripts, and feedback form codes should all be put into their own separate files. Don’t create too many classes or IDs.

•   Paired tags have to be closed.

Following this simple rule will greatly reduce the number of possible issues at all stages of your site’s development.

•   Don’t leave “garbage” in your code.

By “garbage,” we mean unnecessary styles in the code, inappropriately used tags or scripts, an incorrect order of placing block and inline tags, big pieces of code commented out, etc.

Now let’s move to HTML tags that should be used for text formatting. Below, we go over the most commonly used tags.

1. Headers
2. Text
3. Visual text layout
4. Tables
5. Images

<h1...h6> — these paired tags are used for headers only, and there shouldn’t be any other elements within them. You can’t use them in visual text layout or service elements, such as feedback forms, links, etc. When setting a style for <h1...h6> tags, you can use only classes or IDs.

A top-level header. Each page can have only one, and the contents of this tag for each page should be unique and represent the main point of a document.

A second-level header. This separates your text into large, logical blocks. You can have any number of them on a page.

Fourth, fifth, and sixth level subheaders. It is important to follow the order and logic when using them. For example, you can’t follow a <h1> tag with an <h5> and then <h3>.

Text is the most frequently used type of content, and any text itself is separated into paragraphs and lists.

The main HTML tag for working with text, which separates them into paragraphs. A frequent mistake many users make is replacing <p></p> with other tags, such as <div></div>, <span></span>, or some types of <h> tag.

A tag that creates a new line. It’s not paired, so it doesn’t need a closing tag.

<ul></ul> — creates a bullet list. By default, a bullet looks like a filled dot, but you can specify any other mark in place of it, including images.

<ol></ol> — creates a numbered list. By default, the list starts with 1, but you can specify any other starting number.

<li></li> — placed inside <ul></ul> or <ol></ol>, it creates a new line of a list. The number of <li></li> tags is not limited.

This tag is used for formatting certain parts of a text inside <p></p>, <li></li>, and other tags. For example, with it you can highlight some text with a different color or a font.

<b></b> — makes your text bold but doesn’t introduce any other meaning.

<strong></strong> — a semantic formatting tag that doesn’t just turn a text bold but also shows that this text has some information you should pay attention to.

This tag is used in text-to-speech voicing of a page, and it affects the intonation.

<i></i> turns regular text into cursive but doesn’t shift emphasis.

<em></em> — a semantic formatting tag that doesn’t just change a font into cursive, but also lends an expressive air to the text inside the tag. Similarly to <strong>, it affects the intonation for text-to-speech.

Makes a text smaller and shorter than the standard line height. Used for creating subscripts—for example, in formulas or chemical compounds, like H2O.

Also makes a text smaller, but puts it above the line height as a “superscript.” Usually used for showing exponents or measuring units, like m2.

Tables are created with the paired tag <table></table>.

<tbody></tbody> represents the body of a table and is not a required tag, but it is usually recommended to include it. On rare occasions, it’s used with <thead></thead> and <tfoot></tfoot> to denote the opening and closing parts of a table.

<tr></tr> is used for rows and <td></td> for columns. The latter are placed inside <tr></tr>, with the number of <td></td> showing the number of cells in a row.

Tag <th></th> is used to mark a column header. It is not required, but you should use it when convenient.

To make a page more informative and appealing for both users and search engines, its text content should be interspersed with photos, graphs, infographics, and other kinds of images. They are added by using the unpaired tag <img>.

This tag has a mandatory attribute ‘src’, and its value shows the path to the image source.

And a non-mandatory but equally important attribute ‘alt’. It is responsible for the alternative text shown to a user in place of an image in cases when an image can’t be loaded or when mousing over an image.

1. You should use curly quotes “_” instead of straight ones "_".

2. Short prepositions or articles shouldn’t be “hanging” at the end of a line when a word they refer to is moved to the next line. To avoid this, you should use a non-breaking space after them that will “tie” them to the next word.
3. You shouldn’t use a hyphen or an en dash in place of em dash. Each of these marks has its own role.

This is a text editor of a site’s admin panel. It looks like a typical text editor such as Microsoft Word.

You will need it when the person responsible for posting content on your site doesn’t know any HTML.

If you know the basics of HTML but still opted to use a visual editor, then after posting your text, be sure to open it in a HTML editor and delete unnecessary tags and styles that are often added alongside the main tags.

https://typograf.github.io/ — is an editor hosted on GitHub, a web service for storing and developing IT projects.

What it does for text formatting is mark paragraphs with <p></p> tags. It also corrects quotation marks and dashes, but doesn’t replace them with a symbol code. You can also use it to correct punctuation errors, duplicate words and symbols, as well as to check the usage of en dashes and em dashes.

And remember that clean code, a valid layout, unique content, and professionally written text that follows all rules of good style all boost your site’s SEO penetration.