Skip to content

Instantly share code, notes, and snippets.

@jethusang

jethusang/html-part2(headings).md

Created May 16, 2025 20:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jethusang/a4d4e50741a6e273d6aff7c207818e82 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jethusang/a4d4e50741a6e273d6aff7c207818e82 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
html-part2(headings).md

Writing HTML Headings (h1 to h6) in VS Code and Using Live Server

Step 1: Installing Visual Studio Code

  1. Download VS Code: Go to the [Visual Studio Code website](https://code.visualstudio.comyour operating system.
  2. Install VS Code: Run the installer and follow the setup instructions. Ensure you check the options to add VS Code to the context menu and the PATH during installation.

Step 2: Installing Live Server Extension

  1. Open VS Code: Launch Visual Studio Code.
  2. Install Live Server:
    • Go to the Extensions view by clicking the Extensions icon in the sidebar or pressing Ctrl+Shift+X.
    • Search for "Live Server" and click the "Install" button.

Step 3: Creating Your HTML File

  1. Create a New File:

    • Open a new folder in VS Code where you want to save your project.
    • Create a new file and name it index.html.

  2. Write Your HTML Code:

    • Open index.html and type the following code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Headings</title>
</head>
<body>
    <h1>This is an H1 Heading</h1>
    <h2>This is an H2 Heading</h2>
    <h3>This is an H3 Heading</h3>
    <h4>This is an H4 Heading</h4>
    <h5>This is an H5 Heading</h5>
    <h6>This is an H6 Heading</h6>
</body>
</html>

Step 4: Running Your HTML File with Live Server

  • Start Live Server: Right-click on index.html and select "Open with Live Server".
  • Your default browser will open and display the HTML headings.

Importance of HTML Headings (h1 to h6)

HTML headings are crucial for both usability and SEO. Here's why:

Hierarchy and Structure

  • h1: Represents the main heading of the page. There should only be one h1 per page.
  • h2 to h6: Used for subheadings, creating a clear hierarchy and structure. This helps users and search engines understand the content organization.

SEO Benefits

Search engines use headings to understand the content and its relevance. Proper use of headings can improve your page's SEO.

Accessibility

Screen readers use headings to navigate through the content, making it easier for visually impaired users to understand the page.

Readability

Headings break up the content into manageable sections, making it easier for users to skim and find the information they need.

Tips

  • Naming Files: Always ensure your HTML files have the .html extension.
  • Live Server: Use Live Server to see changes in real-time without needing to refresh the browser manually.

Conclusion

By following these steps, you can quickly set up your environment for web development and start creating HTML and CSS projects. Happy coding!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment