HTML File Paths
File paths describe the location of a file in a website folder structure.
Relative paths do not start with a slash, while absolute paths start from the root directory.
Relative Path Example
Click to view code example
<img src="images/pic.jpg" alt="Sample image">
Absolute Path Example
Click to view code example
<img src="/images/pic.jpg" alt="Sample image">
Relative vs Absolute Paths
| Path Type | Example | Description |
|---|---|---|
| Relative | images/pic.jpg | Relative to current file location |
| Absolute | /images/pic.jpg | From root directory |
HTML Boilerplate Structure
Every HTML page should start with a basic structure called boilerplate:
Click to view code example
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>Hello World</h1> </body> </html>
Complete Boilerplate HTML Structure
Click to view code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a sample paragraph.</p>
</body>
</html>
Boilerplate Components Explained:
- <!DOCTYPE html>: Declares the document type and version of HTML
- <html>: Root element of the HTML document
- <head>: Contains meta information about the document
- <title>: Sets the title shown in browser tab
- <body>: Contains the visible content of the page
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 tag | Content | End tag |
|---|---|---|
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> | none | none |
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!
More HTML Element Examples:
Click to view code example
<div>This is a div element</div> <span>This is a span element</span> <a href="https://example.com">This is a link</a>
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>):
<!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.
The <body> element defines the document's body.
The <h1> element defines a heading.
The <p> element defines a paragraph.
Complex Nested Example:
<div>
<h2>Main Section</h2>
<p>This paragraph is inside a div.</p>
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>Nested item</li>
</ul>
</li>
</ul>
</div>
Nesting Rules:
- Elements can be nested inside other elements
- Always close nested elements in the reverse order they were opened
- Proper indentation makes nested code easier to read
- Some elements cannot contain certain other elements
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:
<p>This is a <br> paragraph with a line break.</p>
Common Empty Elements:
| Element | Purpose | Example |
|---|---|---|
| <br> | Line break | Text<br>More text |
| <hr> | Horizontal rule | <hr> |
| <img> | Image | <img src="image.jpg"> |
| <input> | Form input | <input type="text"> |
| <meta> | Metadata | <meta charset="UTF-8"> |
Empty Element Examples:
<img src="logo.png" alt="Company Logo"> <input type="text" placeholder="Enter text"> <meta name="description" content="Page description">
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.
At W3Schools we always use lowercase tag names.
Case Examples:
<HTML> <HEAD> <TITLE>Page Title</TITLE> </HEAD> <BODY> <H1>Heading</H1> <P>Paragraph</P> </BODY> </HTML>
Best Practices:
- Use lowercase for all HTML tags
- Use lowercase for attributes
- Use lowercase for attribute values when possible
- Be consistent throughout your document
Recommended Format:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>page title</title> </head> <body> <h1>heading</h1> <p>paragraph</p> </body> </html>
Common HTML Elements
HTML provides many different elements for structuring web content. Here are some of the most commonly used elements:
Structural Elements:
<header>Header Section</header> <main>Main Content</main> <footer>Footer Section</footer>
Text Elements:
<h1>Main Heading</h1> <h2>Sub Heading</h2> <p>Paragraph of text</p> <strong>Bold text</strong> <em>Italic text</em>
List Elements:
<ul> <li>Unordered list item</li> <li>Another item</li> </ul> <ol> <li>Ordered list item</li> <li>Another item</li> </ol>
Interactive Elements:
<a href="https://example.com">Link</a> <button>Click me</button> <input type="text" placeholder="Enter text">
Container Elements:
<div>Generic container</div> <span>Inline container</span> <section>Section of content</section>