# HTML

### **Elements**

HTML documents consist of elements. There are several HTML elements like heading, lists, and links**.** HTML elements are defined by a start tag, some content, and an end tag just like so:

```markup
<tagname>some content</tagname>
```

### **Attributes**

HTML attributes provide additional information about HTML elements. All HTML elements can have attributes. Attributes provide additional information about elements. They are always specified in the start tag and usually come in name/value pairs like: name="value"

Example:\
The \<a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

```markup
<a href="https://www.hackathonsforschools.com/">Hackathons for Schools</a>
```

### **Headings**

HTML headings are defined with the \<h1> to \<h6> tags.\
\<h1> defines the most important heading and \<h6> defines the least important heading.

Example:

```markup
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```

### **Paragraphs**

The HTML \<p> element defines a paragraph. A paragraph always starts on a new line, and is usually a block of text.

Example:

```markup
<p>Hello, I’m Abdullah</p>
```

### **Images**

The HTML \<img> tag is used to embed an image in a web page. The \<img> tag has two required attributes:

* src - Specifies the path to the image
* alt - Specifies an alternate text for the image

&#x20;Example:

```markup
<img src="image_url" alt="alternate_text">
```

### **Links**

The HTML \<a> tag defines a hyperlink. It has the following syntax:

```markup
<a href="destination_url">link text</a>
```

The most important attribute of the \<a> element is the href attribute, which indicates the link's destination. The link text is the part that will be visible to the reader - when they click on this text, they will be taken to the link.

### **Lists**

There are two types of lists: unordered lists and ordered lists.

An unordered list starts with the \<ul> tag. Each list item starts with the \<li> tag. This will create a list with bullet points.

Example:

```markup
<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>
```

An ordered list starts with the \<ol> tag. Each list item starts with the \<li> tag. This will create a numbered list

Example:

```markup
<ol>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>
```

### **Forms**

A HTML form is used to collect user input. The user input can then be sent to a server for processing. The HTML \<form> element is used to create an HTML form for user input.

Example:

```markup
<form>
.

form elements

.
</form>
```

#### **Form Elements**

Form elements are different types of input elements like: text fields, check boxes, radio buttons, submit buttons, and more. The \<input> element is the most important form element. An \<input> element can be displayed in many ways, depending on the type attribute.

For Example:&#x20;

**\<input type="text">** Displays a single-line text input field\
\&#xNAN;**\<input type="radio">** Displays a radio button (for selecting one of many choices)\
\&#xNAN;**\<input type="submit">** Displays a submit button (for submitting the form)

&#x20;Example of a full form:

```markup
 <form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
  <input type=”submit”>
</form>
```

### **Block and Inline Elements**

A block-level element always starts on a new line and takes up the full width available. The most famous block element in HTML is \<div>. We usually use div elements to wrap sections of a document.

An inline element does not start on a new line and it only takes up as much width as necessary. The most famous inline element in HTML is \<span> which is very similar to the div element but we use to wrap a small portions of text, images, etc.

To learn about more HTML, visit <https://www.w3schools.com/html/default.asp>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hackathonsforschools.gitbook.io/student-summer-sprint-1/technical-workshops/introduction-to-web-development/html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.