HTML
Document Structure
All HTML documents must start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible
part of the HTML document is between <body> and </body>. 1
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Essential Elements
● An HTML element is defined by a start tag, some content, and an end tag. The HTML element is everything from the start tag to the end tag 2
● Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag! 2
● HTML elements can be nested (this means that elements can contain other elements) 2
Basic Form Structure
The <form> tag is used to create an HTML form for user input. 3
HTML
<form action="/action_page.php" method="post">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
Form Elements
Common form elements include:
●
<input> - Various input types (text, password, email, number, date, etc.)
●
<textarea> - Multi-line text input
●
<select> and <option> - Dropdown lists
●
<button> - Clickable buttons
●
<fieldset> and <legend> - Group related form elements
●
<label> - Labels for form elements
●
<output> - Display calculation results
Input Types
HTML
<input type="text"> <!-- Single-line text -->
<input type="password"> <!-- Password field -->
<input type="email"> <!-- Email address -->
<input type="number"> <!-- Numeric input -->
<input type="date"> <!-- Date picker -->
<input type="checkbox"> <!-- Checkbox -->
<input type="radio"> <!-- Radio button -->
<input type="submit"> <!-- Submit button -->
<input type="range"> <!-- Slider control -->
Basic Table Structure
An HTML table is a way of displaying data in rows and columns. It is a popular way of organizing and presenting information on websites.4
The <table> tag defines the table, the <tr> tag defines the table rows, and the <td> tag defines the table cells.4
HTML
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Table Elements
●
<table> - Creates the table
●
<tr> - Table row
●
<td> - Table data/cell
●
<th> - Table header cell
Unordered List Ordered List
HTML HTML
<ul> <ol>
<li>First item</li>
<li>Second item</li>
<li>Item 1</li>
<li>Third item</li>
<li>Item 2</li> </ol>
<li>Item 3</li>
</ul>
Text Formatting
● <h1> to <h6> - Headings (h1 is largest)
● <p> - Paragraph
● <br> - Line break
● <hr> - Horizontal rule
● <strong> - Bold/important text
● <em> - Emphasized/italic text
● <mark> - Highlighted text
● <small> - Smaller text
● <del> - Deleted text
● <ins> - Inserted text
● <sub> - Subscript
● <sup> - Superscript
Structural Elements
● <div> - Block-level container
● <span> - Inline container
● <header> - Page or section header
● <nav> - Navigation links
● <main> - Main content
● <section> - Document section
● <article> - Independent content
● <aside> - Sidebar content
● <footer> - Page or section footer
Links and Media
HTML
<!-- Links -->
<a href="[Link] text</a>
<!-- Images -->
<img src="[Link]" alt="Description" width="500" height="300">
<!-- Audio -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<!-- Video -->
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>