A step by step tutorial that shows how to do the structuring of text in HTML and formatting with CSS. This is according to the web standards of creating web pages.
The formatting of text in HTML and CSS aims at a better result for the presentation of your pages. First you have to understand that the structuring of the text is in HTML and formatting is done in CSS, except in some cases where some formatting can be done in HTML.
Make your WordPress site’s Load Blazing Fast Just by moving to Nestify. Migrate your WooCommerce Store or WordPress Website NOW.
Tags <h1>, <h2>, <h3>, <h2>, <h5>, <h6>
They are tags used to create titles, with <h1> being the largest title and <h6> being the smallest. By default, these tags come with bold formatting and font size larger than normal text.
Examples:
<h1> Example text with H1 </ h1>
<h2> Example text with H2 </ h2>
<h3> Example text with H3 </ h3>
<h2> Example text with H4 </ h2>
<h5> Example text with H5 </ h5>
<h6> Example text with H6 </ h6>
Tags <p> paragraphs, <span> text in line and line break
- The <p> tag is used to create text in paragraphs.
- The <span> tag is used to create an inline text. It is used when you want to differentiate part of the text from a paragraph.
- The <br> tag is used to create a line break in a paragraph.
Example
<p> This text is a paragraph </ p>
<p> This text will <span> highlight </ span> a word and it used the span </ p>
<p> This text will have a line break <br> This part of the text will already be in the line below </ p>
Format Tags: <b> <strong> <i> <small>
Although not recommended, HTML formatting is possible. However, the correct thing is to use CSS to do the formatting.
- <b> and <strong> do the same thing, that is, put the text in bold.
- <i> is used to italicize text
- <small> is used to place text in reduced font.
Examples:
<p> This <b> text </ b> has some bold <strong> words </ strong>
<p> This <i> text </ i> is italicized in two <i> words </ p>
<p> This text contains words with <small> reduced size </ small> </ p>
Structuring text with HTML
<! DOCTYPE html>
<html lang = “en”>
<head>
<title> Text Structuring and Formatting </ title>
</ head>
<body>
<h1> Web Development </ h1>
<h2> HTML – HyperText Markup Language </ h2>
<p>
It is a markup language to be interpreted by browsers.
Its main purpose is to structure & nbsp; pages through
a set of <span> tags </ span> that serve to define the form
in which the text and other elements of the page will be presented.
</ p>
<h2> CSS – Cascading Style Sheets </ h2>
<p>
It is a style language used to define the presentation of documents
written in a markup language, such as <span> HTML or XML </ span>.
Its main benefit is to provide a separation between the format and content of
a document.
</ p>
<h2> XML – eXtensible Markup Language </ h2>
<p>
It is a <span> W3C </ span> recommendation to generate markup languages for
special needs. Able to describe various types of data.
Its main purpose is the ease of information sharing
through the Internet.
</ p>
</ body>
</ html>
Analyzing the code:
- In line 7 we make a link with an external CSS files, in this example we are using CSS in a linked way, as seen previously.
- On line 11 I use the <h1> tag to set the main title of the document.
- In lines 13, 21 and 29 the <h2> tag is used to define document captions.
- In lines 14, 22 and 30 the <p> tag is used to define the text paragraphs.
- Note on lines 17, 24 and 31 the use of the <span> tag in the middle of the text. This technique is used when we want to give a special formatting for some words, so we use <span> that does not disqualify the paragraph and allows modifying only part of the text.
Formatting text with CSS
body {
font-family: Arial, Verdana, Tahoma, Sans-Serif;
color: # 333333;
font-size: 12px;
}
P{
line-height: 20px;
text-align: justify;
}
h1 {
font-size: 24px;
color: # 003366;
text-transform: uppercase;
}
h2 {
font-size: 14px;
padding: 5px;
background-color: # E3E3E3;
color: # 4C4C4C;
}
span {
font-weight: bold;
color: # FF0000;
background-color: # FFFF00;
}
Analyzing the properties used above:
- font-family: Sets the family of fonts that will be used to format the text. In the formatting of the body tag the main source is Arial, if it does not have Arial, it changes by verdana, if it does not have verdana, it changes by tahoma and if there is not also the tahoma will be replaced by any non-serif font.
- Browser uses the user’s micro-fonts, so it would be risky to set only one font for formatting, as we do not know what fonts the user has on his machine.
- font-size: Sets the font size. The measure we used was px (pixel), but other measures can be considered.
- color: Sets the color of the text. Possible ways of expressing color value:
- hexadecimal – (# ff00ff)
- color name – red, blue, green, etc
- RGB value – (100, 255, 204)
- line-height: Sets the height of the line. This property is important to leave the texts a little more spaced between the lines, making the reading more pleasant.
- text-transform: Possible values:
- uppercase
- lowercase
- capitalize (first capital letter and the rest lower case)
- none (text is shown as typed.
- text-align: Sets the text alignment within the paragraph. Possible values:
- left – left-aligned text
- center – centralized text
- right – right-aligned text
- justify – justified text
