HTML Headings:-
Search engines use the headings to index the structure and content of your web pages.
Users skim your pages by its headings. It is important to use headings to show the document structure.
<h1> headings should be used for main headings, followed by <h2> headings, then the less important<h3>, and so on.
Headings are defined with the
<h1> to <h5> tags.<h1> defines the most important heading. <h5> defines the least important heading.
Example Code:
<html><head>
<title>HTML Headings</title>
</head>
<body>
<h1>My first Heading<h1>
<h2> My second Heading<h2>
<h3>My third Heading</h3>
<h4> My fourth Heading</h4>
<h5>My fifth Heading </5>
<center><h1> Thanks for watching<h1></center>
</body>
</html>
OUTPUT:
Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Bigger Headings:-
Each HTML heading has a default size. However, you can specify the size for any heading with the
styleattribute, using the CSS font-size property:
Example Code:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:50px;">First Heading</h1>
<p>You can change the size of a heading with the style attribute, using the font-size property.</p>
<h2 style="font-size:50px;">Second Heading</h2>
<p>You can change the size of a heading with the style attribute, using the font-size property.</p>
</body>
</html>
OUTPUT:
HTML Horizontal Rules:
The
<hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The
<hr> element is used to separate content (or define a change) in an HTML page:
<!DOCTYPE html>
<html>
<body>
<h1>First Heading</h1>
<p>The hr tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.</p>
<p>The hr tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.</p>
<hr>
<h2>Second Heading</h2>
<p>The hr element is used to separate content (or define a change) in an HTML page:</p>
<hr>
<h2>Third Heading</h2>
<p>The hr element is used to separate content (or define a change) in an HTML page.</p>
</body>
</html>
OUTPUT:
EXAMPLE CODE:
<!DOCTYPE html>
<html>
<body>
<h1>HTML Heading</h1>
<p>Users skim your pages by its headings. It is important to
use headings to show the document structure.</p>
<h1>Bigger Heading</h1>
<p>Each HTML heading has a default size. However, you
can specify the size for any heading with the styleattribute,
using the CSS font-size property:</p>
<h1>Horizontal Heading</h1>
<p>The hr element is used to separate content in an HTML
page.</p>
<hr>
</body>
</html>
OUTPUT:
The HTML <head> Element:
The HTML
<head> element has nothing to do with HTML headings.
The
<head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed.
The
<head> element is placed between the <html> tag and the <body> tag:
Example Code:
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
<p>The HTML head element contains meta data.</p>
<p>Meta data is data about the HTML document.</p>
</body>
</html>
OUTPUT:
The HTML head element contains meta data.
Meta data is data about the HTML document.Note: Metadata typically define the document title, character set, styles, links, scripts, and other meta information.
No comments:
Post a Comment