Learn HTML

basic tag

heading tag

The h1 element represents a heading. HTML defines a hierarchy of heading elements, with h1 being the highest ranked.

The other heading elements are h2, h3, through to h6.

Headings of the same rank breaks up content so that each topic is in its own section.

		      	<!DOCTYPE HTML>
				<html>
				<body>
				    <h1>Heading 1</h1>
				    <h2>Heading 2</h2>
				    <h3>Heading 3</h3>
				    <h4>Heading 4</h4>
				    <h5>Heading 5</h5>
				    <h6>Heading 6</h6>  
				</body>
				</html>

Group Headings with hgroup

The hgroup element allows you to treat multiple header elements as a single item without affecting the outline of your HTML document.

		      	<!DOCTYPE HTML>
				<html>
				<body>
				  <hgroup>
				    <h1>H1</h1>
				    <h2>H2</h2>
				  </hgroup>
				</body>
				</html>

HTML Line

The hr element represented a horizontal rule. a line across the page.

		      	<!DOCTYPE HTML>
				<html>
				<body>
				  <p> first </p>
				    <hr>
				  <p> second </p>
				</body>
				</html>

div Structure

The div element doesn't have a specific meaning. div element creates structure.

The div element is the block equivalent of the span element. Block element starts new line while inline element stays in the same line.

		      	<!DOCTYPE HTML>
				<html>
				<style>
				.favorites {
				  background: grey;
				  color: white;
				  border: thin solid black;
				  padding: 0.2em;
				}
				</style>
				</head>
				<body>
				  <div class="favorites">
				    <p>This is a test.</p>
				    <p>This is another test.</p>
				  </div>
				</body>
				</html>

span Element

The span element has no meaning in its own right

You would use it to apply one of the global attributes to a region of content.

		      	<!DOCTYPE HTML>
				<html>
				<style>
				.myClass {
				  border: thin solid black;
				  padding: 1px;
				}
				</style>
				</head>
				<body>
				  I like <span class="myClass">HTML</span> and
				  <span class="myClass">CSS</span>
				</body>
				</html>

Paragraphs

The p element represents a paragraph.

Paragraphs are blocks of text containing one or more related sentences.

		      	<!DOCTYPE HTML>
				<html>
				<body>
				  <p> HTML is good. </p>
				</body>
				</html>

pre - Preformatted Content

In pre element whitespace is not collapsed and formatting is preserved. This can be useful when the original formatting of a section of content is significant.

The pre element can be particularly useful when you use it with the code element.

		      	<!DOCTYPE HTML>
				<html>
				<body>
				  <pre>
				    <code>
				            var  fruits = ["XML",  "HTML", "CSS", "Java"];
				            for (var i = 0; i < fruits.length; i++)   {
				                document.writeln("I like  "  + fruits[i]);
				            }
				        </code>
				  </pre>
				</body>
				</html>

quote

The blockquote element denotes a block content quoted from another source.

This element is similar to the q element, but is generally applied to larger amounts of quoted content.

		      	<!DOCTYPE HTML>
				<html>
				<body>
				  <blockquote>
				  Cascading Style Sheets (CSS) is a style sheet language used for
				  describing the look and formatting of a document written in a markup language.
				  </blockquote>
				</body>
				</html>

The q element denotes content quoted from another source.

The style convention for the q element is to surround the quoted text with quotation marks.

		      	<!DOCTYPE HTML>
				<html>
				<body>
				  <q>
				  <dfn title="Cascading Style Sheets">CSS</dfn> is a style sheet language used for
				  describing the look and formatting of a document written in a markup language.
				  </q>
				</body>
				</html>

Students Empire