1. Text Styling
Let's keep learning HTML...
Paragraphs (p)
The <p> tag is used to create paragraphs
of text. Paragraphs help to break up text into logical blocks, improving
readability and understanding of the information.
Example:
<p>This is the first paragraph of text. It contains some information.</p>
<p>This is the second paragraph of text. It is separated from the first paragraph.</p>
Bold Text (b)
The <b> tag is used to make text bold.
This highlights the importance of specific words or phrases.
<p>This is <b>important</b> text.</p>
Italic Text (i)
The <i> tag is used to italicize text
(slanted font, italic). It is often used for
indicating terms, book titles, foreign words, etc.
Example:
<p>This is <i>a term</i>, which is italicized.</p>
2. Headings (h1 - h6)
HTML Headings are used to structure content and
create a hierarchy of headings on the page. There are six levels
of headings, where <h1> is the most important, and
<h6> is the least important.
-
<h1>— The most important and largest heading. Typically used for the main page title. -
<h2>— Used for subheadings that come after<h1>. -
<h3>— Heading level below<h2>. -
<h4>— Heading level below<h3>. -
<h5>— Heading level below<h4>. -
<h6>— The least important and smallest heading.
Example:
<h1>Main Page Heading</h1>
<h2>Level 2 Subheading</h2>
<h3>Level 3 Subheading,</h3>
3. Additional Tags in the Document Head
There are tags you may come across in HTML examples in the future, let me quickly explain them:
1. The <title> Tag
The <title> tag sets the
page title displayed on the browser tab. It's the first thing a user sees when opening the page. It is almost always
present on all pages. By default, it's added by HTML editors, but
it doesn't hold much value for study projects.
2. The <meta charset="UTF-8"> Tag
The <meta> tag inside
<head> sets the character encoding for the document.
UTF-8 is the most common encoding, which supports most languages in the world. We'll explain encodings
a bit later.
3. The
<meta name="viewport" content="width=device-width,
initial-scale=1.0"> Tag
This tag is also inside
<head>. It ensures
correct page display on mobile devices. It sets the viewport width equal to the device screen width
and the initial page scale.
4. The <link rel="stylesheet" href="styles.css"> Tag
The <link/> tag connects
an external CSS file to style your page.
The rel="stylesheet" attribute specifies that it's a stylesheet, and
href="styles.css" defines the path to the styles file.
5. The <script src="script.js" defer></script> Tag
The <script> tag connects
an external JavaScript file to add interactivity to the
page. The src attribute specifies the path to the script file, and
defer tells the browser to execute the script after the HTML document
has loaded.
GO TO FULL VERSION