Qarpeo LogoInstitute

Typography

HTML typography utilizes elements such as headings, paragraphs, and lists to control text presentation, improving structure, emphasis, and readability through various tags and attributes.

Semantic Elements

HTML includes semantic elements that convey content structure and meaning. For instance, the <h1> element is used for main headings, while <p> tags define paragraphs. These elements influence default browser styles, making headings appear more prominent than paragraphs, even without CSS.

Basic Text Formatting Elements

HTML offers several tags for basic text formatting:

<b> (Bold) and <i> (Italic)

These elements apply simple bold and italic formatting to text. However, CSS is preferred for more precise styling and accessibility improvements.

<sup> (Superscript) and <sub> (Subscript)

These tags adjust text positioning slightly above or below the baseline, which is useful for displaying mathematical formulas or citations.

<br> (Line Break)

The <br> tag inserts a line break in text without starting a new paragraph.

Additional HTML Tags

The <small> tag is used to create smaller text, typically for copyright notices or supplementary information.

This is normal text.

This text is smaller.

index.html
<p>This is normal text.</p>  
<p><small>This text is smaller.</small></p>

The <mark> tag highlights text, drawing attention to important content.

Don't forget to buy milk today.

index.html
<p>Don't forget to buy <mark>milk</mark> today.</p>

The <abbr> tag is used to define abbreviations or acronyms, such as "HTML" or "CSS."

WHO was established in 1948.
index.html
<abbr title="World Health Organization">WHO</abbr> was established in 1948.

The <blockquote> tag is used to cite a passage from another source.

Blockquote Example
"To be, or not to be, that is the question."
index.html
<h2>Blockquote Example</h2>  
<blockquote>"To be, or not to be, that is the question."</blockquote>

The <code> tag is used to display code in a monospace font.

TutorialsPoint

Learn HTML Tutorial easily.

index.html
<h2>TutorialsPoint</h2>  
<p>Learn <code>HTML Tutorial</code> easily.</p>

The <dl> tag defines a description list, which includes:

  • <dt> to define a term or name.
  • <dd> to provide the description for the term.
Coffee
Hot black beverage
Milk
Cold white beverage
index.html
<dl>  
  <dt>Coffee</dt>  
  <dd>Hot black beverage</dd>  
  <dt>Milk</dt>  
  <dd>Cold white beverage</dd>  
</dl>

The <kbd> tag represents keyboard input from the user, displayed in a monospace font.

Press + to copy (Windows).

Press + to copy (Mac OS).

index.html
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy (Windows).</p>  
<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy (Mac OS).</p>

The <pre> tag preserves the text's formatting exactly as written in the HTML, maintaining spaces and line breaks.

  
    Text inside a pre tag  
    is shown with preserved spaces  
    and line breaks.
index.html
<pre>  
  Text inside a pre tag  
  is shown with preserved spaces  
  and line breaks.  
</pre>

HTML Attributes

Attributes provide additional details for HTML elements.
They follow a name="value" format and are always placed within the opening tag.

The src Attribute

The <img> tag uses the src attribute to define the image location.

index.html
<img src="image.jpg" />

Image URLs can be defined in two ways:

  • Absolute URL: Points to an image on an external website.
  • Relative URL: Refers to an image stored on the same website. A relative path without a leading slash is relative to the current page (src="image.jpg"),while a path with a slash refers to the site root (src="/images/image.jpg").
It's best to use relative paths, as they remain valid even if the domain changes.

Width and Height Attributes

The <img> tag can include width and height attributes to set the image size in pixels.

index.html
<img src="image.jpg" width="80" height="80" />

Alt Attribute

The alt attribute in the <img> tag specifies alternative text if the image fails to load, helping users with slow connections, broken links, or screen readers.

This is a red paragraph.
index.html
<p>This is a red paragraph.</p>

Lang Attribute

The lang attribute in the <html> tag indicates the language of the webpage, aiding both browsers and search engines in interpreting the content.

  • For English:
index.html
<html lang="en">
  • For English US:
index.html
<html lang="en-US">

Title Attribute

The title attribute provides additional information about an element, often appearing as a tooltip when hovered over.

This is a paragraph.

index.html
<p title="I'm a tooltip">This is a paragraph.</p>

Single or Double Quotes

HTML attributes can be enclosed in either double (" ") or single (' ') quotes. If the attribute value contains double quotes, it's best to use single quotes and vice versa.

index.html
<p title='John "ShotGun" Nelson'></p>

Alternatively, using double quotes:

index.html
<p title="John 'ShotGun' Nelson"></p>

HTML Elements

An HTML element consists of a start tag, content, and an end tag:

<tagname> Content goes here... </tagname>

Examples:

Start tagElement contentEnd tag
<h1>My First Heading</h1>
<p>My first paragraph</p>
<br>nonenone

Nested HTML Elements

HTML elements can be nested, which means one element can contain another. This is how an HTML document is structured.

Example of a basic HTML document with nested elements:

My First Heading

My first paragraph.

index.html
<!DOCTYPE html>  
<html>  
<head>  
  <title>Web Page Title</title>  
</head>  
<body>  
  <h3>My First Heading</h3>  
  <p>My first paragraph.</p>  
</body>  
</html>

Explanation of Example

The <html> element is the root element of an HTML document, containing all other elements. It starts with <html> and ends with </html>.

Inside the <html> element, there is a <body> element which holds the visible content of the page.

My First Heading

My first paragraph.

index.html
<!DOCTYPE html>  
<html>  
<head>  
  <title>Web Page Title</title>  
</head>  
<body>  
  <h1>My First Heading</h1>  
  <p>My first paragraph.</p>  
</body>  
</html>
  • Within the <body> element, there are two other elements: <h1> and <p>.
My First Heading

My first paragraph.

index.html
<h1>My First Heading</h1>  
<p>My first paragraph.</p>

Always Close HTML Tags

While some HTML elements might still render correctly without a closing tag, it's a best practice to always close HTML tags.

This is a paragraph

This is a paragraph

index.html
<p>This is a paragraph</p>  
<p>This is a paragraph</p>
Always close HTML tags to avoid unexpected errors or formatting problems.

Empty HTML Elements

HTML elements that do not have any content are referred to as empty elements.

The <br> tag, used to insert a line break, is an example of an empty element and does not require a closing tag:

This is a
paragraph with a line break.

index.html
<p>  
  This is a <br />  
  paragraph with a line break.  
</p>

HTML Headings

HTML headings are represented by the tags <h1> through <h6>.

  • <h1> represents the most important heading.
  • <h6> represents the least important heading.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
index.html
<h1>Heading 1</h1>  
<h2>Heading 2</h2>  
<h3>Heading 3</h3>  
<h4>Heading 4</h4>  
<h5>Heading 5</h5>  
<h6>Heading 6</h6>
Browsers automatically apply spacing before and after headings.

Importance of Headings

Headings play a crucial role in organizing content for both users and search engines.

  • Search engines use headings to interpret the content of a webpage.
  • Users typically skim headings to quickly navigate through a page.

The <h1> tag should be used for the main title, with <h2> reserved for subsections, and smaller headings like <h3>, <h4>, etc., for deeper sections.

Headings should structure your content, not be used for styling purposes.

Adjusting the Size of Headings

HTML headings have predefined sizes, but you can modify their size using the style attribute along with the font-size property in CSS.

Heading 1
index.html
<h1 style="font-size:60px;">Heading 1</h1>

You can also apply font-size and font-weight properties in CSS to transform a paragraph into a heading.

Hierarchical Structure of Heading Tags

To maintain proper content organization, headings should follow a logical structure:

  • <h1>: The main heading, typically the title of the page.
  • <h2>: Subsections under <h1>, adding additional structure.
  • <h3> through <h6>: Used for further nested content within <h2>, ensuring a clear hierarchy.
  • Avoid skipping heading levels (e.g., jumping from <h1> to <h3>).
  • Each page should ideally contain only one <h1> tag for clarity.
  • Use CSS for styling instead of misusing heading tags.

HTML Quotation Tags

Quotation tags are used to format quoted text correctly:

  • <q>: Defines short inline quotations.
  • <blockquote>: Represents longer quoted sections.
  • <cite>: Used for citing sources.
  • <address>: Displays contact information.
  • <bdo>: Controls text direction.
  • <abbr>: Marks abbreviations and acronyms.

<q> for Short Quotations

The <q> tag is for short inline quotes, and browsers automatically place quotation marks around the quoted text.

WWF's goal is to: Build a future where people live in harmony with nature.

index.html
<p>WWF's goal is to:  
  <q>Build a future where people live in harmony with nature.</q>  
</p>

<abbr> for Abbreviations

The <abbr> tag defines abbreviations or acronyms like "HTML," "CSS," "ASAP," and so on. You can use the title attribute to provide additional information when users hover over the abbreviation.

Use the title attribute to explain abbreviations when users hover over them.

WHO was founded in 1948.

index.html
<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

HTML <address> for Contact Information

The <address> tag specifies the contact details for the author or owner of a document or article. Text inside this tag is typically displayed in italics, and browsers automatically insert line breaks before and after it.

Written by John Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA
index.html
<address>  
  Written by John Doe.<br />  
  Visit us at:<br />  
  Example.com<br />  
  Box 564, Disneyland<br />  
  USA  
</address>

HTML <cite> for Work Titles

The <cite> tag defines the title of a creative work, such as books, poems, songs, movies, paintings, and sculptures.

A person's name is not considered the title of a work.

The <cite> element is generally displayed in italics.

The Scream by Edvard Munch. Painted in 1893.

index.html
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML <bdo> for Bi-Directional Override

The BDO (Bi-Directional Override) tag is used to override the text direction.

This text will be written from right to left
index.html
<bdo dir="rtl">This text will be written from right to left</bdo>

Conclusion

HTML provides several semantic elements to effectively structure and format content. Tags like <h1>, <p>, and <b> define the meaning and layout of content, while attributes like src, alt, and title enhance usability. Elements like <abbr>, <cite>, and <address> improve accessibility and readability.

Comments

HTML comments are notes written as <!-- comment --> that remain hidden in the browser, allowing developers to annotate and clarify their code.

Symbols

HTML symbols, also known as character entities, such as &lt; for <, represent reserved characters. They begin with & and end with ;, preventing confusion in the browser.