HTML Basics

by | Aug 9, 2024 | Technology

HTML (HyperText Markup Language) is the standard language used to create and design web pages. It provides the structure for web content, allowing you to organize text, images, links, and other multimedia elements on a webpage. Here are the basics of HTML:

1. HTML Document Structure

A basic HTML document has the following structure:

html

<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
  • <!DOCTYPE html>: Declares the document type and version of HTML being used (HTML5 in this case).
  • <html>: The root element that contains all the HTML content.
  • <head>: Contains meta-information about the document, such as the title, links to CSS files, and meta tags.
  • <title>: Defines the title of the webpage, which appears in the browser tab.
  • <body>: Contains the content of the webpage, such as text, images, links, etc.

2. HTML Elements and Tags

HTML is made up of elements that are defined by tags. Tags are the building blocks of HTML and are usually written in pairs: an opening tag <tag> and a closing tag </tag>. Some common HTML elements include:

  • Headings: Used to define headings on a webpage.
    html

    <h1>This is a Heading 1</h1>
    <h2>This is a Heading 2</h2>
  • Paragraphs: Used to define blocks of text.
    html

    <p>This is a paragraph of text.</p>
  • Links: Used to create hyperlinks to other pages or resources.
    html

    <a href="https://www.example.com">Visit Example</a>
  • Images: Used to display images on a webpage.
    html

    <img src="image.jpg" alt="Description of the image">
  • Lists: Used to create ordered or unordered lists.
    html

    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    </ul>

3. Attributes

Attributes provide additional information about HTML elements. They are always included in the opening tag and typically come in name/value pairs, like name="value". For example:

  • href attribute: Specifies the URL of a link.
    html

    <a href="https://www.example.com">Example Link</a>
  • src attribute: Specifies the source of an image.
    html

    <img src="image.jpg" alt="A beautiful view">
  • alt attribute: Provides alternative text for an image, useful for screen readers and when the image cannot be displayed.

4. Comments

Comments in HTML are used to add notes or explanations within the code, and they are not displayed on the webpage. Comments are enclosed within <!-- -->.

html

<!-- This is a comment -->

5. Nesting Elements

HTML elements can be nested within each other. For example, you can place a <strong> element inside a <p> element to make text bold.

html

<p>This is a <strong>bold</strong> word.</p>

6. Block-Level vs. Inline Elements

  • Block-Level Elements: These elements take up the full width available, starting on a new line (e.g., <div>, <h1>, <p>).
  • Inline Elements: These elements only take up as much width as necessary, staying within the flow of the content (e.g., <a>, <img>, <span>).

7. Doctype Declaration

The <!DOCTYPE html> declaration is important as it tells the browser what version of HTML is being used, ensuring that the page renders correctly.

8. Basic HTML Page Example

Here’s a simple example of a basic HTML page:

html

<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first paragraph.</p>
<img src="image.jpg" alt="A beautiful image">
<a href="https://www.example.com">Click here to visit Example</a>
</body>
</html>

9. Learning Resources

By understanding these basics, you can start building and structuring web pages using HTML. As you become more familiar with HTML, you can explore more advanced topics like forms, tables, and multimedia integration.

×
Sign in
Sign up

Sign In

Sign Up