Basic HTML
Elements
Presenter: Assadullah Mohammadi
HTML Heading
• In HTML, headings are defined with the <h1> to <h6> tags.
• They are used to represent titles and subtitles, showing the structure and
importance of content:
• <h1> → The most important heading (largest, usually the page title).
• <h2> → Subheading under <h1> (main sections).
• <h3> → Subheading under <h2> (subsections).
• <h4> → Subheading under <h3>.
• <h5> → Less important heading.
• <h6> → The least important heading (smallest).
Example
Heading Example Default Font
Importance
Tag Output (Text) Size (px)
<h1> This is Heading 1 32px (largest) Main page title
<h2> This is Heading 2 24px Section title
Completion
<h3> This is Heading 3 18.72px Subsection
table
<h4> This is Heading 4 16px Sub-subsection
<h5> This is Heading 5 13.28px Less important
10.72px
<h6> This is Heading 6 Least important
(smallest)
• In HTML, the <p> tag is used to define a
paragraph of text. Browsers automatically
add some space (margin) before and after
each paragraph to separate it from other
elements.
Paragraph
Syntax
<p>This is a paragraph of text in HTML.</p>
Example
Paragraphs are block-level elements
(they start on a new line).
You should not nest paragraphs inside
Important each other.
Notes
Use <br> if you want a line break inside
the same paragraph (not a new
paragraph).
• Line Breaks (<br>)
• The <br> tag inserts a line break
(moves text to the next line).
• It is an empty tag (no closing tag).
Line breaks and
Syntax
horizontal lines
<p>This is the first line.<br>This is
the second line.<br>This is the third
line.</p>
Horizontal Lines (<hr>)
The <hr> tag
It is also an empty Often used to
inserts a horizontal
tag (no closing separate sections
rule (line) across
tag). of content.
the page.
Example
In HTML, comments are used to leave notes
or explanations in the code. These comments
Comment are ignored by the browser and not displayed
on the webpage, but they can be seen in the
source code.
Important Notes about Comments
They are useful for You can temporarily Comments don’t
documenting code disable code by appear on the
(explaining what a wrapping it in webpage, only in
section does). comments. the HTML source.
HTML, text formatting
• In HTML, text formatting tags are used to style or emphasize text.
• Some are visual-only (change the appearance), while others have
semantic meaning (help browsers, screen readers, and SEO
understand the importance of text).
Common Text
Formatting Tags
Common
Text
Formatting
Tags
Example in
HTML
Key Point
Use semantic tags (<strong>,
Use visual tags (<b>, <i>, <u>)
<em>, <del>, <ins>) when
only for styling when no special
meaning matters (SEO &
meaning is needed.
accessibility).
What is SEO?
SEO (Search Engine The goal is to increase
Optimization) is the process of organic (non-paid) traffic
improving a website so that it by making content more
ranks higher in search engine visible and easier to
results (like Google, Bing, understand for both users
Yahoo, Yandex).
and search engines.