HTML&CSS TAGS

HTML Heading Tags

Levels of HTML Heading Tags
HTML offers six levels of heading tags, each serving a different purpose in structuring your content

<h1>– Main Heading (Largest)

<h1>defines the main heading of a page, highlighting its primary topic and improving clarity for users and SEO

*It represents primary focus on the page.
*It usually used for the main title.
*Makes it clear to both users and search engines what the main topic is.

<h2>-Subheadings:

<h2>defines subheadings to organize major sections.

*Ideal for dividing the content into major sections.

*If the content has further subsections, use <h3>to create a logical flow.

<h3>to<h6>-Smaller headings:

<h3> to <h6> are used for smaller headings, creating a clear hierarchy and structure for subsections within the content.

*These heading levels are used for finer subdivisions, gradually decreasing in size and importance.

*<h3> is used for subsections under <h2>, while <h4> to <h6> are used for additional, less important subdivisions.

*<h6>defines the least important heading.

Anchor Tags-`:The <a> tag defines a hyperlink, which is used to link from one page to another

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

Example:

html
<a href="mailto:[e-mail]">Send email</a>


HTML Block Elements:

A block-level element always starts on a new line and stretches out to the left and right as far as it can. It occupies the whole horizontal space of its parent element & the height is equal to the content's height.

html
<address>
<blockquote>
<dd>
<Div>
<dl>
<dt>
<canvas>
<form>
<Heading>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<pre>
<section>
<tfoot>
<ul>
<table>
<p>
<Video>
<aside>
<article>
<figcaption>
<fieldset>
<figure>
<footer>
<header>


Inline Elements:

An inline element is the opposite of the block-level element. It does not start on a new line and takes up only the necessary width. It only occupies the space bounded by the tags defining the HTML element, instead of breaking the flow of the content.

html
<br>
<button>
<time>
<tt>
<var>
<a>
<abbr>
<acronym>
<b>
<cite>
<code>
<dfn>
<em>
<i>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<bdo>
<big>
<img>
<input>
<kbd>
<label>
<map>
<Object>


Padding:The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

Example:

css
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}


Margin:The CSS margin properties are used to create space around elements, outside of any defined borders.

Example:

css
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}