In this chapter we will go through the <blockquote>
,<q>
, <abbr>
, <address>
, <cite>
, and <bdo>
HTML elements.
See the Pen
HTML Quotation and Citation Elements by Iampsp.com (@iampsp)
on CodePen.
In this chapter we will go through the <blockquote>
,<q>
, <abbr>
, <address>
, <cite>
, and <bdo>
HTML elements.
See the Pen
HTML Quotation and Citation Elements by Iampsp.com (@iampsp)
on CodePen.
HTML contains several elements for defining text with a special meaning.
See the Pen
HTML Text Formatting by Iampsp.com (@iampsp)
on CodePen.
The HTML style
attribute is used to add styles to an element, such as color, font, size, and more.
See the Pen
HTML Styles by Iampsp.com (@iampsp)
on CodePen.
A paragraph always starts on a new line, and is usually a block of text.
The HTML <p>
element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.
<p>This is a paragraph.</p> <p>This is another paragraph.</p>
HTML headings are titles or subtitles that you want to display on a webpage.
HTML headings are defined with the <h1>
to <h6>
tags.
<h1>
defines the most important heading. <h6>
defines the least important heading. Continue reading HTML Headings
HTML attributes provide additional information about HTML elements.
The HTML element is everything from the start tag to the end tag:
Examples of some HTML elements:
Start tag | Element content | End tag |
---|---|---|
<h1> | My First Heading | </h1> |
<p> | My first paragraph. | </p> |
<br> | none | none |
HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>
, <body>
, <h1>
and <p>
):
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
The <html>
element is the root element and it defines the whole HTML document.
It has a start tag <html>
and an end tag </html>
.
Then, inside the <html>
element there is a <body>
element:
<body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body>
The <body>
element defines the document’s body.
It has a start tag <body>
and an end tag </body>
.
Then, inside the <body>
element there are two other elements: <h1>
and
:
<p>
<h1>My First Heading</h1> <p>My first paragraph.</p>
The <h1>
element defines a heading.
It has a start tag <h1>
and an end tag </h1>
:
<h1>My First Heading</h1>
The <p>
element defines a paragraph.
It has a start tag <p>
and an end tag </p>
:
<p>My first paragraph.</p>
Some HTML elements will display correctly, even if you forget the end tag:
<html> <body> <p>This is a paragraph <p>This is a paragraph </body> </html>
However, never rely on this! Unexpected results and errors may occur if you forget the end tag!
HTML elements with no content are called empty elements.
The <br>
tag defines a line break, and is an empty element without a closing tag:
<p>This is a <br> paragraph with a line break.</p>
HTML tags are not case sensitive: <P>
means the same as <p>
.
The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>