🟧

HTML Cheatsheet

Document skeleton — memorize

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- content -->
    <script src="code.js"></script>
</body>
</html>

Tags you must know

TagPurpose
<h1>…<h6>Headings (h1 biggest)
<a href="url" target="_blank">Link (_blank = new tab)
<img src="" alt="">Image (self-closing)
<ul>/<ol> + <li>Lists
<div> / <span>Block / inline container
<br> / <hr>Line break / horizontal rule
<strong> / <em>Bold / italic emphasis
<header><nav><main><section><article><footer>Semantic structure

Forms

<form action="submit.js" method="POST">
    <input type="text"     name="name"  placeholder="Your name" required>
    <input type="password" name="pwd">
    <input type="email"    name="email">
    <input type="date"     name="dob">
    <input type="radio"    name="gender" value="m"> Male
    <input type="checkbox" name="terms" required> Accept terms
    <textarea name="msg" rows="4"></textarea>
    <select name="city">
        <option value="ist">Istanbul</option>
    </select>
    <input type="submit" value="Send">
    <input type="reset">
</form>

Table

<table>
    <thead>
        <tr><th>Name</th><th>Grade</th></tr>
    </thead>
    <tbody>
        <tr><td>Ali</td><td>85</td></tr>
    </tbody>
</table>

Common attributes

id, class, style, href, src, alt, type, name, value, placeholder, required, target, action, method