HTML Tutorials

HTML - Setting up your first HTML Document

Setting Up Your First HTML Document

1. What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It structures content on the web and defines the elements such as paragraphs, headings, links, images, etc.

1.1. Basic Structure of HTML

Every HTML document starts with a declaration and contains a head and a body. Here's a simple breakdown of the HTML document structure:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Page Title</title>
        </head>
        <body>
            <h1>Heading</h1>
            <p>Paragraph</p>
        </body>
    </html>

2. Step-by-Step Guide to Set Up HTML Document

2.1. Open a Text Editor

You need to use a text editor like Notepad, Sublime Text, Visual Studio Code, or any other code editor. Create a new file and save it with the `.html` extension, for example, `index.html`.

2.2. Write the HTML Skeleton

Start by writing the basic structure of an HTML document. Here’s the minimum structure:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Your Title Here</title>
        </head>
        <body>
            <!-- Content goes here -->
        </body>
    </html>

2.3. Add Content Inside the Body

The `` section contains all the visible content of your web page. You can add headings, paragraphs, images, lists, and more here. For example, adding a heading and a paragraph:

    <body>
        <h1>Welcome to My Website</h1>
        <p>This is my first web page written in HTML!</p>
    </body>

2.4. Save and Preview the Document

Once you've written the HTML content, save the file and open it in a web browser. You can see how your page looks by simply double-clicking on the HTML file, which will open it in the default browser.

3. Common HTML Tags

Here are some common HTML tags that you will use frequently:

  • <p> - Paragraph tag, used to define text paragraphs.
  • <a> - Anchor tag, used to create hyperlinks.
  • <img> - Image tag, used to display images on the page.
  • <ul> - Unordered list tag.
  • <ol> - Ordered list tag.

3.1. Example of a Link

You can create a link using the <a> tag like this:

    <a href="https://www.example.com">Visit Example</a>

3.2. Example of an Image

To display an image, use the <img> tag like this:

    <img src="image.jpg" alt="Description of Image">

Congratulations! You've just learned how to set up a basic HTML document. HTML is the foundation of web development, and as you practice, you'll get better at structuring and styling your pages.

logo

HTML

Beginner 5 Hours

Setting Up Your First HTML Document

1. What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It structures content on the web and defines the elements such as paragraphs, headings, links, images, etc.

1.1. Basic Structure of HTML

Every HTML document starts with a declaration and contains a head and a body. Here's a simple breakdown of the HTML document structure:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Page Title</title>
        </head>
        <body>
            <h1>Heading</h1>
            <p>Paragraph</p>
        </body>
    </html>

2. Step-by-Step Guide to Set Up HTML Document

2.1. Open a Text Editor

You need to use a text editor like Notepad, Sublime Text, Visual Studio Code, or any other code editor. Create a new file and save it with the `.html` extension, for example, `index.html`.

2.2. Write the HTML Skeleton

Start by writing the basic structure of an HTML document. Here’s the minimum structure:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Your Title Here</title>
        </head>
        <body>
            <!-- Content goes here -->
        </body>
    </html>

2.3. Add Content Inside the Body

The `` section contains all the visible content of your web page. You can add headings, paragraphs, images, lists, and more here. For example, adding a heading and a paragraph:

    <body>
        <h1>Welcome to My Website</h1>
        <p>This is my first web page written in HTML!</p>
    </body>

2.4. Save and Preview the Document

Once you've written the HTML content, save the file and open it in a web browser. You can see how your page looks by simply double-clicking on the HTML file, which will open it in the default browser.

3. Common HTML Tags

Here are some common HTML tags that you will use frequently:

  • <p> - Paragraph tag, used to define text paragraphs.
  • <a> - Anchor tag, used to create hyperlinks.
  • <img> - Image tag, used to display images on the page.
  • <ul> - Unordered list tag.
  • <ol> - Ordered list tag.

3.1. Example of a Link

You can create a link using the <a> tag like this:

    <a href="https://www.example.com">Visit Example</a>

3.2. Example of an Image

To display an image, use the <img> tag like this:

    <img src="image.jpg" alt="Description of Image">

Congratulations! You've just learned how to set up a basic HTML document. HTML is the foundation of web development, and as you practice, you'll get better at structuring and styling your pages.

Related Tutorials

Frequently Asked Questions for HTML

  • HTML stands for HyperText Markup Language.
  • It is used to create the structure of web pages and web applications.
  • HTML defines elements such as headings, paragraphs, links, images, and other content.

  • Block-level elements (like <div>, <p>, <h1>) start on a new line and take full width.
  • Inline elements (like <span>, <a>, <strong>) stay within the flow of the text.
  • Understanding this helps with layout and styling.

  • A basic HTML page includes a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body>.
  • The <head> section contains metadata like the title and links to stylesheets.
  • The <body> section contains all the visible content of the webpage.

  • The <meta> tag provides metadata such as page description, keywords, and author.
  • It helps browsers and search engines understand the content of the page.
  • One common use is specifying the character encoding: <meta charset="UTF-8">.

  • Forms collect user input using the <form> tag.
  • Inside a form, use <input>, <textarea>, <select>, and <button>.
  • The action attribute specifies where to send the form data.

  • The <label> tag defines a label for an input element.
  • It improves accessibility and allows users to click the label to focus the input.
    Example: <label for="email">Email:</label><input id="email">.

Comments in HTML are written between <!-- and -->.

Example:
<!-- This is a comment -->.
Comments are not displayed on the webpage and are used for documentation.

HTML entities are used to display reserved or special characters.

For example, &lt; displays < and &amp; displays &.
Use them to avoid confusion with actual HTML syntax.