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.
