Scribd
Upload
6 views

Beginner's Guide on HTML Basics to Get You Started With Web Development

Uploaded by

csriya51
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Beginner's Guide on HTML Basics to Get You Started With Web Development

Uploaded by

csriya51
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

beginner's guide on HTML basics to get you

started with web development!

HTML Basics Tutorial

HTML, or **Hypertext Markup Language**, is the foundation of web development. It’s used
to create the structure of web pages, defining headings, paragraphs, links, images, and
more. In this tutorial, we’ll go over the essential HTML elements to help you get started.

## 1. Basic Structure of an HTML Document

Every HTML file starts with a standard structure. Here’s what it looks like:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
```

### Explanation:
- `<!DOCTYPE html>`: Declares the document as HTML5.
- `<html>`: The root element of an HTML page.
- `<head>`: Contains meta-information about the page (like its title and character set).
- `<title>`: The title of the page, which appears in the browser tab.
- `<body>`: Where the visible content of the webpage goes.

## 2. Basic HTML Elements

### 2.1 Headings

Headings are used to define different sections of your page. There are six levels of
headings, from `<h1>` (largest) to `<h6>` (smallest).

```html
<h1>This is an H1 Heading</h1>
<h2>This is an H2 Heading</h2>
```
### 2.2 Paragraphs

To add text, use the `<p>` tag for paragraphs.

```html
<p>This is a paragraph of text on the page.</p>
```

### 2.3 Links

Links are created with the `<a>` tag and are defined by the `href` attribute.

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

### 2.4 Images

To add images, use the `<img>` tag. The `src` attribute specifies the image source, and the
`alt` attribute provides alternative text for accessibility.

```html
<img src="image.jpg" alt="A descriptive text for the image">
```

### 2.5 Lists

HTML offers two types of lists: ordered (numbered) and unordered (bullet points).

**Unordered List**:
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
```

**Ordered List**:
```html
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
```

### 2.6 Div and Span


The `<div>` and `<span>` tags are used to group elements for styling purposes.

- `<div>`: A block-level element, often used to create sections.


- `<span>`: An inline element, useful for styling small parts of text.

Example:

```html
<div class="container">
<p>This is inside a div.</p>
</div>

<span>This is inline text.</span>


```

## 3. Attributes

Attributes provide additional information about HTML elements. Common attributes include:
- `class`: Used to apply CSS styles.
- `id`: Unique identifier for an element.
- `style`: Inline CSS styling.

Example:

```html
<p class="intro" id="first-paragraph" style="color: blue;">Styled text example</p>
```

## 4. Comments

Comments help you add notes in your code without displaying them on the webpage. Use
`<!-- -->` to add comments.

```html
<!-- This is a comment -->
<p>This is visible text.</p>
```

## 5. Putting It All Together

Here’s a simple HTML page example using the elements we've covered:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample HTML Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph giving an introduction.</p>

<h2>About Me</h2>
<p>Here is some information about me.</p>

<h2>My Hobbies</h2>
<ul>
<li>Reading</li>
<li>Traveling</li>
<li>Coding</li>
</ul>

<h2>Contact Me</h2>
<p>You can reach me at <a
href="mailto:[email protected]">[email protected]</a>.</p>
</body>
</html>
```

## Conclusion

This covers the basics of HTML. With these elements, you can create simple web pages
with text, images, links, and lists. Once you’re comfortable with these fundamentals, try
exploring CSS to style your HTML pages!

You might also like