Scribd
Upload
8 views4 pages

HTML Cheatsheet

The document provides an overview of HTML elements, structure, and forms, detailing various tags such as <p>, <a>, <h1>-<h6>, <ul>, <ol>, and <form>. It explains the purpose of attributes, classes, and IDs, as well as how to format text and create lists. Additionally, it covers input types for forms, including text, number, checkbox, and radio buttons, along with validation attributes.

Uploaded by

Divya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views4 pages

HTML Cheatsheet

The document provides an overview of HTML elements, structure, and forms, detailing various tags such as <p>, <a>, <h1>-<h6>, <ul>, <ol>, and <form>. It explains the purpose of attributes, classes, and IDs, as well as how to format text and create lists. Additionally, it covers input types for forms, including text, number, checkbox, and radio buttons, along with validation attributes.

Uploaded by

Divya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML: Elements

Elements <p>Hello World!</p> Links

<p> </p> <!-- paragraph --> <a href=" “> </a>


<!-- <a> is an anchor element
<body> </body> + href = a pointer to another
<!-- defines an html document website that is linked in the
“body" --> html -->
OBS: there can be only one <body> in
an html file. *can be also used to:
<a href=“mailto: “> </a>
There are six levels of section <a href=“tel: “> </a>
headings <h1> to <h6>
<a href=“sms: “> </a>
<h1> </h1>
<!-- usually used only one time
<img src=" ">
in the file, in the <header> -->
<!-- image element + source
attribute that specifies the
<br>
file path of the image /
<!-- break tag = adds a line
self-closing tag -->
break / a self-closing tag -->

Text Formatting Elements Notes

Good to know, but not used anymore.

<b> </b> <!-- Bold -->


<i> </i> <!-- Italicize -->
<u> </u> <!-- Underline -->
<s> </s> <!-- Strikethrough -->
<strong> </strong>
<!-- used to convey the content
inside is important -->

Lists

<ul> </ul> <!-- Unordered list =


bullet points -->
<ol> </ol> <!-- Ordered list =
numbered list -->
<li> </li> <!-- List item element =
goes inside <ol> and <ul> -->

<ul>
<li>The Origins I: HTML</li>
<li>The Origins II: CSS</li>
</ul>
HTML Structure

HTML: Structure
<DOCTYPE html>
<!-- doc type declaration [must have] at the top of a .html file -->
<html> <!-- contain all the code processed on the page -->
<head>
<!-- all the info for the browser that isn’t visible on the page -->
<title> <!-- assign text to the tab in the browser --> </title>
</head>
<body>
<!-- all the content that will end up seeing on the page —>
<header>
<nav> <!-- feature links for navigation --> </nav>
</header>
<main>
<!-- the main topics or ideas shown on the page / there should only be one
single <main> element in every page —>
<section>
<!-- group related content and can have multiple sections
explicit display what each is about
-->
<article> <!-- singular piece of content --> </article>
</section>
</main>
<footer> <!-- other infos, like creator’s name --> </footer>
</body>
</html>

OBS:
<article> and <section> should begin with a heading element.
You CAN nest an <article> within another <article> = usually done if there is
a piece of standalone markup within a single piece of content.

Family Tree <div> Division element

• <head> and <body> are children Most common way of creating


of <html> sections for a page;
• <html> is the parent — Kind of like a generic
• <title> is the child of <head> container with no particular
• <i> is child of <p> and meaning + label with class and id
grandkid of <body> Example:
• Siblings share a direct parent <div class=“page-section”
element, like <li>: id=“about-me”>
<ol> <h2>About Me</h2>
<li> </li> <p> </p>
<li> </li> </div>
</ol>
Attribute Class & ID

HTML: Structure
Additional setting used to customize class
an element. <!-- can have multiples
-->
<element name=" “> <p class=“first-value second-value
<!-- name indicate the attribute third-value“>Hello World</p>
that are setting for the element
--> id
</element> <!--
can only have ONE with no space.
Example: every id value should be UNIQUE in
<ol type=“a"> the entire page.
<li>The Origins I: HTML</li> can be used to link to another
<li>The Origins II: CSS</li> part of the same page
</ol> -->
<!-- Result:
a. The Origins I: HTML Example:
b. The Origins II: CSS <a href=“#brasil“>
--> Link to Brazil
</a>
<img width=“250" alt=“ “ src=“ “> <h2 class=“city" id=“brazil”>
<!-- Brazil
width attribute = sets the width </h2>
of the image
alt attribute = makes the image
more accessible = read the text Style Element & Style Attribute
and describe the image
<style> element: used in the
-->
<head> to style the elements in
the <body>
<a href=“ “ target=“_blank”> </a>
- can use a period . (class) or
<!--
hashtag # (id) to select one or
target attribute = “_blank” opens
more specific elements that have
the URL on a separate tab on the
a matching class or id
browser
-->
Style attribute: stylize certain
aspects of that element
Figure Element Example:
Roses are <span style=“color:red;
<figure>
text-decoration:underline;”> Red
<!-- graphic, image, diagram = are
</span>
grouped together —>
<img width=“ “ src=“ “ alt=“ “/>
<figcaption> <!-- describe one or
multiple pieces of content -->
</figcaption>
</figure>
Form

HTML: Forms
Input
<form action="" method="">
<!-- <input> interactive control for

action: attribute that says where entering data + self-closing tag

the form data should go ater is type: used to determine the kind of

submitted input to use

method: attribute for how the form <form>

data is processed <input type=“text">

--> <!-- renders a plain textbox -->

</form> </form>

<form>
<input type=“number”> <input type="submit">
<!-- turns the <input> element
<input type=“number“ step=“ “> into a button for submitting the
<!-- step can change how the form data -->
numeric value acts --> </form>
<input type=“number“ min=“ “
max=“ "> <!-- set a value attribute to
<!-- max and min attribute can be change the text in the button -->
used --> <input type=“submit" value=“Submit
Form!”>
Checkbox & Radio
<input> types:
<input type=“checkbox">
<input type=“email">
<!-- a box that is ticket off to
<input type=“password”>
mark the input as "complete" -->
<input type=“radio" name=“option">
<!-- radio is the list options
name attribute puts the radios in Input Validations
the same group of options to choose
<input> types:
from -->
<input type=“email">
<input type=“password”>
<textarea>
<!-- can give a minlength and
<textarea id=“ “ rows=“ “ cols=“ “ maxlength attribute
placeholder=“explain what kind of required attribute = can be applied
data should be entered“> plain to one or more inputs
mini-text editor</textarea> -->

<form>
<label>
<input type="password"

Associate pieces of text with form minlength="4" maxlength=“10”

controls and inputs required>

<label for=“title"> </label><input


type=“text” id=“title">
for attribute MUST match the ID of
a given <input> element.

You might also like