> For the complete documentation index, see [llms.txt](https://hackathonsforschools.gitbook.io/student-summer-sprint-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hackathonsforschools.gitbook.io/student-summer-sprint-1/technical-workshops/introduction-to-web-development/html.md).

# 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\
**\<input type="radio">** Displays a radio button (for selecting one of many choices)\
**\<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>