Chuck's Academy

Basic HTML

Text Elements in HTML

Headings (<h1> to <h6>)

HTML provides six levels of headings, from <h1> (the most important) to <h6> (the least important). Headings help structure content and make the information hierarchy clearer for users and search engines.

html
"This example shows the six levels of headings in HTML, where the size and importance decrease from h1 to h6."

Paragraphs (<p>)

The <p> tag is used to create paragraphs of text. Each paragraph will be separated by a space on the page.

html
"Paragraphs in HTML are created with the p tag. In this example, we have two paragraphs that will be visually separated by a space."

Emphasis and Importance (<em>, <strong>)

HTML has tags to add emphasis and highlight the importance of certain words or phrases. The <em> tag provides emphasis, while <strong> indicates importance or urgency.

html
"In this example, the text within the em tag will appear italicized, while the text within the strong tag will appear bold."

Line Breaks (<br>)

The <br> tag is used to insert a line break without starting a new paragraph. It's useful for address lists or poetry where continuous text formatting is required.

html
"Here are three lines of continuous text in the same paragraph, separated by line breaks using the br tag."

Horizontal Rules (<hr>)

The <hr> tag creates a horizontal line to divide content sections. It doesn't have a closing tag and can be used to separate topics or sections.

html
"The horizontal line, or hr, creates a visual division between sections. In this case, it divides two paragraphs of text."

Quotes (<blockquote>, <q>)

For quoting external content or highlighting quotes, HTML uses <blockquote> for long quotes and <q> for brief inline quotes.

html
"Here, we use blockquote for a long quote that is prominently displayed. In the second paragraph, we use the q tag for a brief inline quote."

Code Formatting (<code>, <pre>, <kbd>, <samp>, <var>)

HTML also offers tags to display code and technical text. The <code> tag is for inline code snippets, <pre> preserves text formatting, <kbd> represents user input, <samp> shows output, and <var> indicates a variable.

html
"This code block shows the use of various tags. The pre and code allow source code to be displayed with the original formatting. The kbd indicates keys, samp shows the output, and var denotes a variable in the text."

Chapter Closure

Now that you know the basic elements for formatting text content in HTML, you can structure and highlight information effectively on your web pages. In the next chapter, we'll learn about lists and how to group content in various ways.


Ask me anything