0dfg-bit

HTML

Learn the foundation of web development with HTML (HyperText Markup Language), the standard markup language for creating web pages.

HTML Basics

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page using elements represented by tags.

HTML elements tell the browser how to display the content. HTML tags label pieces of content such as "heading", "paragraph", "table", and so on.

Basics of HTML Tags

BASICS OF HTML

START AND END DOCUMENT

HEADING TAGS (H1 TO H6)

<p></p>

PARAGRAPH TAG

<b></b>

BOLD TEXT TAG

<i></i>

ITALIC TAG

UN-ORDER LIST TAG

ORDER LIST TAG

LIST ITEMS TAG

BASIC FORM TAG

TABLE TAG

BASIC LINK TAG

IMAGE TAG

src="url"

SOURCE PATH (URL / FILE NAME)

<br>

LINE BREAK TAG

<hr>

HORIZONTAL LINE TAG

Adapted for 0dfg-bit

HTML Document Structure

A basic HTML document has the following structure:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

The <!DOCTYPE html> declaration defines this document as HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph

HTML Elements

Headings

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

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

Paragraphs

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML paragraphs are defined with the <p> tag. Browsers automatically add some space before and after each paragraph.

Links

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

HTML links are defined with the <a> tag. The link's destination is specified in the href attribute.

Images

HTML images are defined with the <img> tag. The source file (src) and alternative text (alt) are provided as attributes.

HTML Input Types

HTML forms can include various types of input elements, each designed for specific types of data entry. Here's a comprehensive guide to the different input types available:

HTML Input Types

Defines a single-line text field

Defines a field for an email address

Defines a password field

Field for entering a telephone number

Field for entering a number

Text field for entering a search string

Field for entering a URL

File-select field and a "browse" button

A hidden field (not visible to users)

Defines a clickable button

Reset button for form values

Button which submits form values

Radio button (select one option)

Checkbox (select multiple options)

Slider control for numbers

Image as a submit button

Color picker

Month and year control

Date picker (year, month, day)

Control for entering a time

Week and year control

HTML Cheatsheet

Basic HTML

<!DOCTYPE>

Defines the document

<html>

Defines HTML documents

<head>

Contains metadata/information for the document

<title>

Defines a title for the document

<body>

Defines HTML documents body

Defines HTML headings

<p>

Defines a paragraph

<br>

Insert a single line break

<hr>

Defines a thematic change in the content

Defines a comment

Formatting

<abbr>

Defines an abbreviation or an acronym

<code>

Defines a piece of computer code

<em>

Defines emphasized text

<mark>

Defines marked/highlighted text

<pre>

Defines preformatted text

<small>

Defines smaller text

Represents the progress of a task

Defines a section that is quoted from another source

<b>

Defines bold text

<q>

Defines a short quotation

Forms and Input

<form>

Defines an HTML form for user input

<input>

Defines an input control

Defines a multiline input control (text area)

Defines a clickable button

Defines a drop-down list

Defines an option in a drop-down list

Defines a group of related options in a drop-down list

<label>

Defines a label for an <input> element

Groups related elements in a form

Defines a caption for a <fieldset> element

Images

<img>

Defines an image

<map>

Defines a client-side image map

<area>

Defines an area inside an image map

Defines a caption for a <figure> element

Specifies self-contained content

<svg>

Defines a container for SVG graphics

Defines a container for multiple image resources

Used to draw graphics, on the fly, via scripting (usually JavaScript)

Lists and Tables

Unordered Lists

Unordered lists start with the <ul> tag, and each list item starts with the <li> tag. List items are marked with bullets by default.

Ordered Lists

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Ordered lists start with the <ol> tag, and each list item starts with the <li> tag. List items are marked with numbers by default.

Tables

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

HTML tables are defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. A table cell is defined with the <td> tag.

HTML Forms

HTML forms are used to collect user input. The <form> element defines a form that contains form elements.

<form action="/submit-form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>

  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea><br>

  <input type="submit" value="Submit">
</form>

Common form elements include:

<input type="text"> - for text input
<input type="password"> - for password input
<input type="radio"> - for radio buttons
<input type="checkbox"> - for checkboxes
<input type="submit"> - for submit buttons
<select> and <option> - for dropdown lists
<textarea> - for multi-line text input

Semantic HTML

Semantic HTML uses tags that convey meaning about the structure of your web page, not just presentation. This improves accessibility, SEO, and code readability.

<header>
  <h1>Website Title</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content...</p>
  </article>

  <aside>
    <h3>Related Links</h3>
    <ul>
      <li><a href="#">Link 1</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>Copyright © 2023</p>
</footer>

Common semantic elements include:

<header> - for the header of a page or section
<nav> - for navigation links
<main> - for the main content of a page
<article> - for independent, self-contained content
<section> - for grouping related content
<aside> - for content related to the main content
<footer> - for the footer of a page or section

Learning Resources

Continue your HTML journey with these resources:

MDN Web Docs: developer.mozilla.org
W3Schools HTML Tutorial: w3schools.com
HTML.com: html.com
HTML Validator: validator.w3.org

Click Here to Download the HTML Images Pack

Explore More Programming Languages