HTML

Last Updated: 9/19/2022

Html Text Elements

Headings

  • Headings are titles or subtitles that you want to display on a webpage.
  • There are six heading elements h1, h2, h3, h4, h5, h6
  • Each element represents a different level of content in the document
  • h1 represents the main heading,
  • h2 to h6 represents subheadings.
  • Headings are Important. Search engines use the headings to index the structure and content of your web pages.
  • Browsers automatically add some white space (a margin) before and after a heading.
<h1>Heading 1</h1>  
<h2>Heading 2</h2>  
<h3>Heading 3</h3>  
<h4>Heading 4</h4>  
<h5>Heading 5</h5>  
<h6>Heading 6</h6>

Paragraphs

  • A paragraph always starts on a new line, and is usually a block of text.
  • Browsers automatically add some white space (a margin) before and after a paragraph

<p>This is a paragraph</p>

Whitespaces

No matter how much whitespace you use inside HTML element content which can include one or more space character, but also line breaks, the HTML parser reduces each sequence of whitespace to a single space when rendering the code.

<p>This is a para with lot of white spaces and line breaks</p>

Preformatted Text

  • Defines preformatted text
  • The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.
<pre>
this
	is a
		preformatted text
</pre>

Line Breaks

  • <br> element defines a line break.
  • Use <br> if you want a line break (a new line) without starting a new paragraph

<br>

Horizontal Rules

  • <hr> defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
  • Used to separate content (or define a change) in an HTML page
<p>first para</p>
<hr>
<p>second para</p>

Strong

Defines text with strong importance. The content inside is typically displayed in bold.

<p>... the most important rule, the rule you can never forget, no matter how much he cries, no matter how much he begs: <strong>never feed him after midnight</strong>.</p>

Emphasis- em

  • Defines emphasized text. The content inside is typically displayed in italic.
  • A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

<p>Get out of bed <em>now</em>!</p>

Mark - mark

  • Defines text that should be marked or highlighted

<p>Do not forget to buy <mark>milk</mark> today.</p>

<sub>

  • Defines subscript text.

H<sub>2</<sub>O

<sup>

  • Defines superscript text
  • x<sup>y</sup>
Previous
Next