Learning coding means GreatToCode Be more than a Coder ! Greattocode , Join GreatToCode Community,1000+ Students Trusted On Us .If You want to learn coding, Then GreatToCode Help You.No matter what It Takes !

CODE YOUR WAY TO A MORE FULFILLING And HIGHER PAYING CAREER IN TECH, START CODING FOR FREE Camp With GreatToCode - Join the Thousands learning to code with GreatToCode
Interactive online coding classes for at-home learning with GreatToCode . Try ₹Free Per Month Coding Classes With The Top Teachers . HTML Tutorial

HTML Tutorial

 A file path describes the location of a file in a web site's folder structure.

File Path Examples

PathDescription
<img src="picture.jpg">The "picture.jpg" file is located in the same folder as the current page
<img src="images/picture.jpg">The "picture.jpg" file is located in the images folder in the current folder
<img src="/images/picture.jpg">The "picture.jpg" file is located in the images folder at the root of the current web
<img src="../picture.jpg">The "picture.jpg" file is located in the folder one level up from the current folder

HTML File Paths

A file path describes the location of a file in a web site's folder structure.

File paths are used when linking to external files, like:

  • Web pages
  • Images
  • Style sheets
  • JavaScripts

Absolute File Paths

An absolute file path is the full URL to a file:

Example

<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

Try it Yourself »

Relative File Paths

A relative file path points to a file relative to the current page.

In the following example, the file path points to a file in the images folder located at the root of the current web:

Example

<img src="/images/picture.jpg" alt="Mountain">

Try it Yourself »

In the following example, the file path points to a file in the images folder located in the current folder:

Example

<img src="images/picture.jpg" alt="Mountain">

Try it Yourself »

In the following example, the file path points to a file in the images folder located in the folder one level up from the current folder:

Example

<img src="../images/picture.jpg" alt="Mountain">

Try it Yourself »

Best Practice

It is best practice to use relative file paths (if possible).

When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.


Easy Learning with HTML "Try it Yourself"

With our "Try it Yourself" editor, you can edit the HTML code and view the result:

Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Try it Yourself »

Click on the "Try it Yourself" button to see how it works.

HTML Examples

In this HTML tutorial, you will find more than 200 examples. With our online "Try it Yourself" editor, you can edit and test each example yourself!

Go to HTML Examples!

HTML is the standard markup language for creating Web pages.

What is HTML?

  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

A Simple HTML Document

Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
Try it Yourself »

Example Explained

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the HTML page
  • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
  • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tagElement contentEnd tag
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<br>nonenone

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

View in Browser

HTML Page Structure

Below is a visualization of an HTML page structure:

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Note: The content inside the <body> section (the white area above) will be displayed in a browser. The content inside the <title> element will be shown in the browser's title bar or in the page's tab.

HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

YearVersion
1989Tim Berners-Lee invented www
1991Tim Berners-Lee invented HTML
1993Dave Raggett drafted HTML+
1995HTML Working Group defined HTML 2.0
1997W3C Recommendation: HTML 3.2
1999W3C Recommendation: HTML 4.01
2000W3C Recommendation: XHTML 1.0
2008WHATWG HTML5 First Public Draft
2012WHATWG HTML5 Living Standard
2014W3C Recommendation: HTML5
2016W3C Candidate Recommendation: HTML 5.1
2017W3C Recommendation: HTML5.1 2nd Edition
2017W3C Recommendation: HTML5.2

This tutorial follows the latest HTML5 standard.


Learn HTML Using Notepad or TextEdit

Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).

We believe in that using a simple text editor is a good way to learn HTML.

Follow the steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad (PC)

Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)

Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"

Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text".

Then open a new document to place the code.

Step 2: Write Some HTML

Write or copy the following HTML code into Notepad:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Notepad

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

View in Browser

Tip: You can use either .htm or .html as file extension. There is no difference, it is up to you.

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

The result will look much like this:

View in Browser

W3Schools Online Editor - "Try it Yourself"

With our free online editor, you can edit the HTML code and view the result in your browser.

It is the perfect tool when you want to test code fast. It also has color coding and the ability to save and share code with others:

Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Try it Yourself »

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
Try it Yourself »

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading: 

Example

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Try it Yourself »
HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Try it Yourself »

HTML Links

HTML links are defined with the <a> tag:

Example

<a href="https://www.w3schools.com">This is a link</a>
Try it Yourself »

The link's destination is specified in the href attribute. 

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

Example

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Try it Yourself »

How to View HTML Source?

Have you ever seen a Web page and wondered "Hey! How did they do that?"

View HTML Source Code:

Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.

HTML Elements

The HTML element is everything from the start tag to the end tag:

<tagname>Content goes here...</tagname>

Examples of some HTML elements:

<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tagElement contentEnd tag
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<br>nonenone

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

Nested HTML Elements

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>):

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
Try it Yourself »

Example Explained

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>:

Never Skip the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

Example

<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>
Try it Yourself »

However, never rely on this! Unexpected results and errors may occur if you forget the end tag!

Empty HTML Elements

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:

Example

<p>This is a <br> paragraph with a line break.</p>
Try it Yourself »

HTML is Not Case Sensitive

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.

    HTML Attributes


    • All HTML elements can have attributes
    • Attributes provide additional information about elements
    • Attributes are always specified in the start tag
    • Attributes usually come in name/value pairs like: name="value"

    The href Attribute

    The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

    Example

    <a href="https://www.w3schools.com">Visit W3Schools</a>
    Try it Yourself »

    You will learn more about links in our HTML Links chapter.

    The src Attribute

    The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

    Example

    <img src="img_girl.jpg">
    Try it Yourself »

    There are two ways to specify the URL in the src attribute:

    1. Absolute URL - Links to an external image that is hosted on another website. Example: src="https://www.w3schools.com/images/img_girl.jpg".

    Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.

    2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example: src="/images/img_girl.jpg".

    Tip: It is almost always best to use relative URLs. They will not break if you change domain.

    The width and height Attributes

    The <img> tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels):

    Example

    <img src="img_girl.jpg" width="500" height="600">
    Try it Yourself »

    The alt Attribute

    The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.

    Example

    <img src="img_girl.jpg" alt="Girl with a jacket">
    Try it Yourself »

    Example

    See what happens if we try to display an image that does not exist:

    <img src="img_typo.jpg" alt="Girl with a jacket">
    Try it Yourself »

    You will learn more about images in our HTML Images chapter.

    The style Attribute

    The style attribute is used to add styles to an element, such as color, font, size, and more.

    Example

    <p style="color:red;">This is a red paragraph.</p>
    Try it Yourself »

    You will learn more about styles in our HTML Styles chapter.

    The lang Attribute

    You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

    The following example specifies English as the language:

    <!DOCTYPE html>
    <html lang="en">
    <body>
    ...
    </body>
    </html>

    Country codes can also be added to the language code in the lang attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country.

    The following example specifies English as the language and United States as the country:

    <!DOCTYPE html>
    <html lang="en-US">
    <body>
    ...
    </body>
    </html>

    You can see all the language codes in our HTML Language Code Reference.

    The title Attribute

    The title attribute defines some extra information about an element.

    The value of the title attribute will be displayed as a tooltip when you mouse over the element:

    Example

    <p title="I'm a tooltip">This is a paragraph.</p>
    Try it Yourself »

    We Suggest: Always Use Lowercase Attributes

    The HTML standard does not require lowercase attribute names.

    The title attribute (and all other attributes) can be written with uppercase or lowercase like title or TITLE.

    However, W3C recommends lowercase attributes in HTML, and demands lowercase attributes for stricter document types like XHTML.

    At great to code  we always use lowercase attribute names.

    We Suggest: Always Quote Attribute Values

    The HTML standard does not require quotes around attribute values.

    However, W3C recommends quotes in HTML, and demands quotes for stricter document types like XHTML.

    Good:

    <a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

    Bad:

    <a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

    Sometimes you have to use quotes. This example will not display the title attribute correctly, because it contains a space:

    Example

    <p title=About W3Schools>
    Try it Yourself »

     At W3Schools we always use quotes around attribute values.

    Single or Double Quotes?

    Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

    In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

    <p title='John "ShotGun" Nelson'>

    Or vice versa:

    <p title="John 'ShotGun' Nelson">
    Try it Yourself »

    Chapter Summary

    • All HTML elements can have attributes
    • The href attribute of <a> specifies the URL of the page the link goes to
    • The src attribute of <img> specifies the path to the image to be displayed
    • The width and height attributes of <img> provide size information for images
    • The alt attribute of <img> provides an alternate text for an image
    • The style attribute is used to add styles to an element, such as color, font, size, and more
    • The lang attribute of the <html> tag declares the language of the Web page
    • The title attribute defines some extra information about an element

    HTML headings are titles or subtitles that you want to display on a webpage.

    Example

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6

    Try it Yourself »

    HTML Headings

    HTML headings are defined with the <h1> to <h6> tags.

    <h1> defines the most important heading. <h6> defines the least important heading.

    Example

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    Try it Yourself »

    Note: Browsers automatically add some white space (a margin) before and after a heading.

    Headings Are Important

    Search engines use the headings to index the structure and content of your web pages.

    Users often skim a page 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.

    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 style attribute, using the CSS font-size property:

    Example

    <h1 style="font-size:60px;">Heading 1</h1>
    Try it Yourself »

    HTML Paragraphs

    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.

    Example

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    Try it Yourself »

    HTML Display

    You cannot be sure how HTML will be displayed.

    Large or small screens, and resized windows will create different results.

    With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.

    The browser will automatically remove any extra spaces and lines when the page is displayed:

    Example

    <p>
    This paragraph
    contains a lot of lines
    in the source code,
    but the browser
    ignores it.
    </p>

    <p>
    This paragraph
    contains         a lot of spaces
    in the source         code,
    but the        browser
    ignores it.
    </p>
    Try it Yourself »

    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:

    Example

    <h1>This is heading 1</h1>
    <p>This is some text.</p>
    <hr>
    <h2>This is heading 2</h2>
    <p>This is some other text.</p>
    <hr>
    Try it Yourself »

    The <hr> tag is an empty tag, which means that it has no end tag.

    HTML Line Breaks

    The HTML <br> element defines a line break.

    Use <br> if you want a line break (a new line) without starting a new paragraph:

    Example

    <p>This is<br>a paragraph<br>with line breaks.</p>
    Try it Yourself »

    The <br> tag is an empty tag, which means that it has no end tag.

    The Poem Problem

    This poem will display on a single line:

    Example

    <p>
      My Bonnie lies over the ocean.

      My Bonnie lies over the sea.

      My Bonnie lies over the ocean.

      Oh, bring back my Bonnie to me.
    </p>
    Try it Yourself »

    Solution - The HTML <pre> Element

    The HTML <pre> element defines preformatted text.

    The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

    Example

    <pre>
      My Bonnie lies over the ocean.

      My Bonnie lies over the sea.

      My Bonnie lies over the ocean.

      Oh, bring back my Bonnie to me.
    </pre>
    Try it Yourself »

    HTML Exercises

    Test Yourself With Exercises

    Exercise:

    Use the correct HTML tag to add a paragraph with the text "Hello World!".

    <html>
    <body>

    </body>
    </html>

    Start the Exercise

    The HTML style

    The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

    Example

    I am Red

    I am Blue

    I am Big

    Try it Yourself »

    The HTML Style Attribute

    Setting the style of an HTML element, can be done with the style attribute.

    The HTML style attribute has the following syntax:

    <tagname style="property:value;">

    The property is a CSS property. The value is a CSS value.

    You will learn more about CSS later in this tutorial.

    Background Color

    The CSS background-color property defines the background color for an HTML element.

    Example

    Set the background color for a page to powderblue:

    <body style="background-color:powderblue;">

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

    </body>
    Try it Yourself »

    Example

    Set background color for two different elements:

    <body>

    <h1 style="background-color:powderblue;">This is a heading</h1>
    <p style="background-color:tomato;">This is a paragraph.</p>

    </body>
    Try it Yourself »

    Text Color

    The CSS color property defines the text color for an HTML element:

    Example

    <h1 style="color:blue;">This is a heading</h1>
    <p style="color:red;">This is a paragraph.</p>
    Try it Yourself »

    Fonts

    The CSS font-family property defines the font to be used for an HTML element:

    Example

    <h1 style="font-family:verdana;">This is a heading</h1>
    <p style="font-family:courier;">This is a paragraph.</p>
    Try it Yourself »

    Text Size

    The CSS font-size property defines the text size for an HTML element:

    Example

    <h1 style="font-size:300%;">This is a heading</h1>
    <p style="font-size:160%;">This is a paragraph.</p>
    Try it Yourself »

    Text Alignment

    The CSS text-align property defines the horizontal text alignment for an HTML element:

    Example

    <h1 style="text-align:center;">Centered Heading</h1>
    <p style="text-align:center;">Centered paragraph.</p>
    Try it Yourself »

    HTML contains several elements for defining text with a special meaning.

    Example

    This text is bold

    This text is italic

    This is subscript and superscript

    Try it Yourself »

    HTML Formatting Elements

    Formatting elements were designed to display special types of text:

    • <b> - Bold text
    • <strong> - Important text
    • <i> - Italic text
    • <em> - Emphasized text
    • <mark> - Marked text
    • <small> - Smaller text
    • <del> - Deleted text
    • <ins> - Inserted text
    • <sub> - Subscript text
    • <sup> - Superscript text

    HTML <b> and <strong> Elements

    The HTML <b> element defines bold text, without any extra importance.

    Example

    <b>This text is bold</b>
    Try it Yourself »

    The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold.

    Example

    <strong>This text is important!</strong>
    Try it Yourself »

    HTML <i> and <em> Elements

    The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

    Tip: The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.

    Example

    <i>This text is italic</i>
    Try it Yourself »

    The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.

    Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

    Example

    <em>This text is emphasized</em>
    Try it Yourself »

    HTML <small> Element

    The HTML <small> element defines smaller text:

    Example

    <small>This is some smaller text.</small>
    Try it Yourself »

    HTML <mark> Element

    The HTML <mark> element defines text that should be marked or highlighted:

    Example

    <p>Do not forget to buy <mark>milk</mark> today.</p>
    Try it Yourself »

    HTML <del> Element

    The HTML <del> element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text:

    Example

    <p>My favorite color is <del>blue</del> red.</p>
    Try it Yourself »

    HTML <ins> Element

    The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted text:

    Example

    <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
    Try it Yourself »

    HTML <sub> Element

    The HTML <sub> element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:

    Example

    <p>This is <sub>subscripted</sub> text.</p>
    Try it Yourself »

    HTML <sup> Element

    The HTML <sup> element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1]:

    Example

    <p>This is <sup>superscripted</sup> text.</p>
    Try it Yourself »

    HTML Block and Inline Elements

    Every HTML element has a default display value, depending on what type of element it is.

    There are two display values: block and inline.

    Block-level Elements

    A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

    A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

    Two commonly used block elements are: <p> and <div>.

    The <p> element defines a paragraph in an HTML document.

    The <div> element defines a division or a section in an HTML document.

    The <p> element is a block-level element.

    The <div> element is a block-level element.

    Example

    <p>Hello World</p>
    <div>Hello World</div>
    Try it Yourself »

    Here are the block-level elements in HTML:

    <address>
    <article>
    <aside>
    <blockquote>
    <canvas>
    <dd>
    <div>
    <dl>
    <dt>
    <fieldset>
    <figcaption>
    <figure>
    <footer>
    <form>
    <h1>-<h6>
    <header>
    <hr>
    <li>
    <main>
    <nav>
    <noscript>
    <ol>
    <p>
    <pre>
    <section>
    <table>
    <tfoot>
    <ul>
    <video>

    Inline Elements

    An inline element does not start on a new line.

    An inline element only takes up as much width as necessary.

    This is a <span> element inside a paragraph.

    Example

    <span>Hello World</span>
    Try it Yourself »

    Here are the inline elements in HTML:

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

    Note: An inline element cannot contain a block-level element!

    The <div> Element

    The <div> element is often used as a container for other HTML elements.

    The <div> element has no required attributes, but style, class and id are common.

    When used together with CSS, the <div> element can be used to style blocks of content:

    Example

    <div style="background-color:black;color:white;padding:20px;">
      <h2>London</h2>
      <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>
    Try it Yourself »

    The <span> Element

    The <span> element is an inline container used to mark up a part of a text, or a part of a document.

    The <span> element has no required attributes, but style, class and id are common.

    When used together with CSS, the <span> element can be used to style parts of the text:

    Example

    <p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>
    Try it Yourself »

    Chapter Summary

    • There are two display values: block and inline
    • A block-level element always starts on a new line and takes up the full width available
    • An inline element does not start on a new line and it only takes up as much width as necessary
    • The <div> element is a block-level and is often used as a container for other HTML elements
    • The <span> element is an inline container used to mark up a part of a text, or a part of a document

    HTML Tags

    TagDescription
    <div>Defines a section in a document (block-level)
    <span>Defines a section in a document (inline)

    For a complete list of all available HTML tags, visit our HTML Tag Reference.


    HTML class Attribute

    The HTML class attribute is used to specify a class for an HTML element.

    Multiple HTML elements can share the same class.

    Using The class Attribute

    The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

    In the following example we have three <div> elements with a class attribute with the value of "city". All of the three <div> elements will be styled equally according to the .city style definition in the head section:

    Example

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .city {
      background-color: tomato;
      color: white;
      border: 2px solid black;
      margin: 20px;
      padding: 20px;
    }
    </style>
    </head>
    <body>

    <div class="city">
      <h2>London</h2>
      <p>London is the capital of England.</p>
    </div>

    <div class="city">
      <h2>Paris</h2>
      <p>Paris is the capital of France.</p>
    </div>

    <div class="city">
      <h2>Tokyo</h2>
      <p>Tokyo is the capital of Japan.</p>
    </div>

    </body>
    </html>
    Try it Yourself »

    In the following example we have two <span> elements with a class attribute with the value of "note". Both <span> elements will be styled equally according to the .note style definition in the head section:

    Example

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .note {
      font-size: 120%;
      color: red;
    }
    </style>
    </head>
    <body>

    <h1>My <span class="note">Important</span> Heading</h1>
    <p>This is some <span class="note">important</span> text.</p>

    </body>
    </html>
    Try it Yourself »

    Tip: The class attribute can be used on any HTML element.

    Note: The class name is case sensitive!

    The Syntax For Class

    To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:

    Example

    Create a class named "city":

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .city {
      background-color: tomato;
      color: white;
      padding: 10px;
    }
    </style>
    </head>
    <body>

    <h2 class="city">London</h2>
    <p>London is the capital of England.</p>

    <h2 class="city">Paris</h2>
    <p>Paris is the capital of France.</p>

    <h2 class="city">Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>

    </body>
    </html>
    Try it Yourself »

    Multiple Classes

    HTML elements can belong to more than one class.

    To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified.

    In the following example, the first <h2> element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes: 

    Example

    <h2 class="city main">London</h2>
    <h2 class="city">Paris</h2>
    <h2 class="city">Tokyo</h2>
    Try it Yourself »

    Different Elements Can Share Same Class

    Different HTML elements can point to the same class name.

    In the following example, both <h2> and <p> point to the "city" class and will share the same style:

    Example

    <h2 class="city">Paris</h2>
    <p class="city">Paris is the capital of France</p>
    Try it Yourself »

    Use of The class Attribute in JavaScript

    The class name can also be used by JavaScript to perform certain tasks for specific elements.

    JavaScript can access elements with a specific class name with the getElementsByClassName() method:

    Example

    Click on a button to hide all elements with the class name "city":

    <script>
    function myFunction() {
      var x = document.getElementsByClassName("city");
      for (var i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
    }
    </script>
    Try it Yourself »

    Don't worry if you don't understand the code in the example above.

    You will learn more about JavaScript in our HTML JavaScript chapter, or you can study our JavaScript Tutorial.

    Chapter Summary

    • The HTML class attribute specifies one or more class names for an element
    • Classes are used by CSS and JavaScript to select and access specific elements
    • The class attribute can be used on any HTML element
    • The class name is case sensitive
    • Different HTML elements can point to the same class name
    • JavaScript can access elements with a specific class name with the getElementsByClassName() method

    HTML Exercises

    Test Yourself With Exercises

    Exercise:

    Create a class selector named "special".

    Add a color property with the value "blue" inside the "special" class.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
     
      ;

    </style>
    </head>
    <body>

    <p class="special">My paragraph</p>

    </body>
    </html>

    Start the Exercise

    The HTML id attribute is used to specify a unique id for an HTML element.

    You cannot have more than one element with the same id in an HTML document.

    Using The id Attribute

    The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.

    The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.

    The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.

    In the following example we have an <h1> element that points to the id name "myHeader". This <h1> element will be styled according to the #myHeader style definition in the head section:

    Example

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #myHeader {
      background-color: lightblue;
      color: black;
      padding: 40px;
      text-align: center;
    }
    </style>
    </head>
    <body>

    <h1 id="myHeader">My Header</h1>

    </body>
    </html>
    Try it Yourself »

    Note: The id name is case sensitive!

    Note: The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.).

    Difference Between Class and ID

    A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

    Example

    <style>
    /* Style the element with the id "myHeader" */
    #myHeader {
      background-color: lightblue;
      color: black;
      padding: 40px;
      text-align: center;
    }

    /* Style all elements with the class name "city" */
    .city {
      background-color: tomato;
      color: white;
      padding: 10px;
    }
    </style>

    <!-- An element with a unique id -->
    <h1 id="myHeader">My Cities</h1>

    <!-- Multiple elements with same class -->
    <h2 class="city">London</h2>
    <p>London is the capital of England.</p>

    <h2 class="city">Paris</h2>
    <p>Paris is the capital of France.</p>

    <h2 class="city">Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    Try it Yourself »

    HTML Bookmarks with ID and Links

    HTML bookmarks are used to allow readers to jump to specific parts of a webpage.

    Bookmarks can be useful if your page is very long.

    To use a bookmark, you must first create it, and then add a link to it.

    Then, when the link is clicked, the page will scroll to the location with the bookmark.

    Example

    First, create a bookmark with the id attribute:

    <h2 id="C4">Chapter 4</h2>

    Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

    Example

    <a href="#C4">Jump to Chapter 4</a>
    Try it Yourself »

    Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

    <a href="html_demo.html#C4">Jump to Chapter 4</a>

    Using The id Attribute in JavaScript

    The id attribute can also be used by JavaScript to perform some tasks for that specific element.

    JavaScript can access an element with a specific id with the getElementById() method:

    Example

    Use the id attribute to manipulate text with JavaScript:

    <script>
    function displayResult() {
      document.getElementById("myHeader").innerHTML = "Have a nice day!";
    }
    </script>
    Try it Yourself »

    Tip: Study JavaScript in the HTML JavaScript chapter, or in our JavaScript Tutorial.

    Chapter Summary

    • The id attribute is used to specify a unique id for an HTML element
    • The value of the id attribute must be unique within the HTML document
    • The id attribute is used by CSS and JavaScript to style/select a specific element
    • The value of the id attribute is case sensitive
    • The id attribute is also used to create HTML bookmarks
    • JavaScript can access an element with a specific id with the getElementById() method

    HTML Exercises

    Test Yourself With Exercises

    Exercise:

    Add the correct HTML attribute to make the H1 element red.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #myheader {color:red;}
    </style>
    </head>
    <body>

    <h1 >My Home Page</h1>

    </body>
    </html>

    Start the Exercise



    HTML Iframe Syntax

    The HTML <iframe> tag specifies an inline frame.

    An inline frame is used to embed another document within the current HTML document.

    Syntax

    <iframe src="url" title="description"></iframe>

    Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is.

    Iframe - Set Height and Width

    Use the height and width attributes to specify the size of the iframe.

    The height and width are specified in pixels by default:

    Example

    <iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
    Try it Yourself »

    Or you can add the style attribute and use the CSS height and width properties:

    Example

    <iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>
    Try it Yourself »

    Iframe - Remove the Border

    By default, an iframe has a border around it.

    To remove the border, add the style attribute and use the CSS border property:

    Example

    <iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>
    Try it Yourself »

    With CSS, you can also change the size, style and color of the iframe's border:

    Example

    <iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>
    Try it Yourself »

    Iframe - Target for a Link

    An iframe can be used as the target frame for a link.

    The target attribute of the link must refer to the name attribute of the iframe:

    Example

    <iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

    <p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
    Try it Yourself »

    Chapter Summary

    • The HTML <iframe> tag specifies an inline frame
    • The src attribute defines the URL of the page to embed
    • Always include a title attribute (for screen readers)
    • The height and width attributes specify the size of the iframe
    • Use border:none; to remove the border around the iframe

    HTML Exercises

    Test Yourself With Exercises

    Exercise:

    Create an iframe with a URL address that goes to https://www.w3schools.com.

    <iframe ="https://www.w3schools.com"></iframe>

    Start the Exercise

    HTML iframe Tag

    TagDescription
    <iframe>Defines an inline frame

    For a complete list of all available HTML tags, visit our HTML Tag Reference.

    JavaScript makes HTML pages more dynamic and interactive.

    Example

    My First JavaScript

    Wed Mar 29 2023 15:04:05 GMT+0530 (India Standard Time)

    Try it Yourself »

    The HTML <script> Tag

    The HTML <script> tag is used to define a client-side script (JavaScript).

    The <script> element either contains script statements, or it points to an external script file through the src attribute.

    Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

    To select an HTML element, JavaScript most often uses the document.getElementById() method.

    This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":

    Example

    <script>
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script>
    Try it Yourself »

    Tip: You can learn much more about JavaScript in our JavaScript Tutorial.

    A Taste of JavaScript

    Here are some examples of what JavaScript can do:

    Example

    JavaScript can change content:

    document.getElementById("demo").innerHTML = "Hello JavaScript!";
    Try it Yourself »

    Example

    JavaScript can change styles:

    document.getElementById("demo").style.fontSize = "25px";
    document.getElementById("demo").style.color = "red";
    document.getElementById("demo").style.backgroundColor = "yellow";
    Try it Yourself »

    Example

    JavaScript can change attributes:

    document.getElementById("image").src = "picture.gif";
    Try it Yourself »

    The HTML <noscript> Tag

    The HTML <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support scripts:

    Example

    <script>
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script>
    <noscript>Sorry, your browser does not support JavaScript!</noscript>
    Try it Yourself »

    HTML Exercises

    Test Yourself With Exercises

    Exercise:

    Use JavaScript to change the HTML content of the <p> element to "Hello World!".

    <body>

    <p id="demo">Hi.</p>

    <script>
    document.("demo").innerHTML = "Hello World!";
    </script>

    </body>

    Start the Exercise

    HTML Script Tags

    TagDescription
    <script>Defines a client-side script
    <noscript>Defines an alternate content for users that do not support client-side scripts

    For a complete list of all available HTML tags, visit our HTML Tag Reference.



    A file path describes the location of a file in a web site's folder structure.

    File Path Examples

    PathDescription
    <img src="picture.jpg">The "picture.jpg" file is located in the same folder as the current page
    <img src="images/picture.jpg">The "picture.jpg" file is located in the images folder in the current folder
    <img src="/images/picture.jpg">The "picture.jpg" file is located in the images folder at the root of the current web
    <img src="../picture.jpg">The "picture.jpg" file is located in the folder one level up from the current folder

    HTML File Paths

    A file path describes the location of a file in a web site's folder structure.

    File paths are used when linking to external files, like:

    • Web pages
    • Images
    • Style sheets
    • JavaScripts

    Absolute File Paths

    An absolute file path is the full URL to a file:

    Example

    <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

    Try it Yourself »

    The <img> tag is explained in the chapter: HTML Images.

    Relative File Paths

    A relative file path points to a file relative to the current page.

    In the following example, the file path points to a file in the images folder located at the root of the current web:

    Example

    <img src="/images/picture.jpg" alt="Mountain">

    Try it Yourself »

    In the following example, the file path points to a file in the images folder located in the current folder:

    Example

    <img src="images/picture.jpg" alt="Mountain">

    Try it Yourself »

    In the following example, the file path points to a file in the images folder located in the folder one level up from the current folder:

    Example

    <img src="../images/picture.jpg" alt="Mountain">

    Try it Yourself »

    Best Practice

    It is best practice to use relative file paths (if possible).

    When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.



    Post a Comment

    1 Comments

    Lt3 Academy said…
    Thank you so much for these tutorials. I have been searching for these for so long. Finally got them from you.
    11 November 2023 at 22:53
    Post a Comment
    •Give The opportunity to your child with GreatToCode Kid's • Online Coding Classes for Your Kid • Introduce Your kid To the world's of coding
    •Fuel You Career with our 100+ Hiring Partners, Advance Your Career in Tech with GreatToCode. •Join The Largest Tech and coding Community and Fast Forward Your career with GreatToCode. •10000+ Learner's+ 90 % placement Guarantee. • Learning Coding is Better with the GreatToCode community .
    •Greattocode Kid's •GreatToCode Career •GreatToCode Interview •GreatToCode Professional •GreatToCode for schools •GreatToCode For colleges •GreatToCods For Businesses.
    Are you ready to join the millions of people learning to code? GreatToCode Pass is your one-stop-shop to get access to 1000+ courses, top-notch support, and successful job placement. What are you waiting for? Sign up now and get your future in motion with GreatToCode Pass.