In this article, we will learn about text markup, titles, code formatting, links, and citation elements in HTML.
Before the explanation, you need to know that HTML text markup is used to mark the semantic of the text, and it's not for visual formatting (presentation). However, some formatting elements can change the visual format of texts.
HTML tags are for markup (mainly semantically) and not for presentation.
Text Formatting Elements
If you need to indicate text, a word, or character differently, you have some elements:
p
Element for Paragraphs
All paragraphs (not all texts) must be inside a paragraph element.
Below, you can see a code snippet:
<p>
The p tag is used to create paragraphs. It formats content as a paragraph. It does not break lines by default.
</p>
<p>A second paragraph will be on a new line.</p>
The result of this code is:
small
Element for Smaller Text
Firstly, I don't recommend using the small
element because it doesn't have semantic meaning, and all presentation should be done with CSS.
The small
element allows a text inside its opening and closing tags to be smaller than the rest of the text.
Below, you can see a code snippet:
<p>
It is possible to indicate that a word will be <small>smaller</small> than the others.
</p>
The result of this code is:
strong
Element for Important Content
If you have important words or texts, it can be good to use the strong
element. Notice that strong
is usually bold, but it's not relevant; think only about semantic.
What about the b
Element?
The b
element is for contents that deserve attention, but it's not more important than the rest of the text, and it's not necessary to change the voice or mood in screen readers. A common use example is keywords in a text.
Below, you can see a code snippet:
<p>
If I want to indicate that something is <strong>important</strong>, I can use the strong tag.
<br />But there's also a tag for <b>bold</b>, which is the b tag. What's the difference?
</p>
The result of the code snippet is:
em
Element for Emphasis
If you need more emphasis in a particular content, use the em
element. This content is not more important than the rest of the text because for importance, we use strong
. Notice that em
is usually italic, but it's not relevant; think only about semantic.
And i
Element?
The i
element is for alternate voice or mood for screen readers or specified terms, such as taxonomic designation, a technical term, or an idiomatic phrase from another language. It's important to notice that terms in different languages from the main text usually must be in italic, but italic must be indicated in CSS. In HTML, terms or texts in different languages must be annotated with lang
attribute.
Below, you can see a code snippet:
<p>
If I want to indicate that something is <em>emphasis</em>, I can use the em tag.
<br />But there's also a tag for <i>italic</i>, which is the i tag. What's the difference?
</p>
The result of the code snippet is:
mark
Element for Highlighting Content
The mark
element is used to highlight terms in a text without semantic meaning.
Below, you can see a code snippet:
<p>If you want to <mark>highlight</mark> a text, use mark.</p>
The result of the code snippet is:
Title Headers / Headings
For titles in your text, use h1
, h2
, h3
, h4
, h5
, and h6
. Remember that titles are hierarchies, like below figures. Then h2
only exists if there's an h1
before, h3
only exists if there's an h2
before, and so on. I recommend that there should be just one h1
per page/document (or per section or article).
-
h1
for the primary title of the page or section; -
h2
for a subtitle; -
h3
for a sub-subtitle; -
h4
for a sub-sub-subtitle; -
h5
for a sub-sub-sub-subtitle; -
h6
for a sub-sub-sub-sub-subtitle;
Some headings in tree view:
Some headings in another tree view:
Notice, each heading appears in a size, but it's not important in HTML; think about semantic and order for each heading. Size can be changed in CSS.
Below, you can see a code snippet:
<h1>Level 1 Title</h1>
<h2>Level 2 Title - h1 sub-title</h2>
<h3>Level 3 Title - h2 sub-title</h3>
<h4>Level 4 Title - h3 sub-title</h4>
<h5>Level 5 Title - h4 sub-title</h5>
<h6>Level 6 Title - h5 sub-title</h6>
The result of the code snippet is:
Code Format
If you need to show codes or text without formatting, you might use pre
and code
elements.
pre
is for a block of preformatted text, so spaces are preserved, and the font can be monospaced. Another element is code
for programming codes. Notice that code doesn't offer code highlighting; for this, use JavaScript + CSS code, like Highlight.js.
Generally, inline computer codes are marked with code
element, and computer block codes are marked with pre
and code
elements.
Below, you can see a code snippet:
<p>The function <code>printf</code> prints a message on the user's screen</p>
<pre>
<code>
int main(){
printf("Message");
return 0;
}
</code>
</pre>
The result of the code snippet is:
Link to Another Page
A very useful element in HTML is the a
tag for links to other pages or elements on the web (such as images, texts, files, etc.). A link can be a text, a button, an icon, an image, a section, or any other element.
Below, you can see a code snippet:
<p>
<a href="https://google.com.br">Google</a>
</p>
The result of the code snippet is:
Citation Elements
We can use cite
and blockquote
for citation. cite
indicates the authors, and blockquote
creates quotes.
Below, you can see a code snippet:
<blockquote>
"The last tag opened should be the first to be closed."
</blockquote>
<cite>Arthur Assuncao, 2023</cite>
The result of the code snippet is:
What Lies Ahead
In upcoming articles, you will delve into Block elements and Semantic web. Stay tuned!
References
WHATWG. HTML Living Standard. Available at: https://html.spec.whatwg.org/multipage/#toc-dom. Accessed on September 14, 2023.
Top comments (0)