HTML
HyperText Markup Language
defines the content of a site.
DOM
(Document Object Model)
The hierarchy and structure of HTML elements, often used for targeting elements in CSS
and JavaScript
tags
<p> paragraphs
<h1> cabeçalho (vai até o 6)
<article> article
<small> small meaning (for copyright for example)
non-breaking space
<div> to create sections (block-level element)
<span>( inline element)
<main> wraps around the main content of the page
<header> wraps headers in the content
<footer> wraps footers in the content
<article> wrapped around any instance of an article
<section> wraps around sections of content
<aside> marks content that is off to the side or not the main attraction
bold and italics
<b> visual-only bold
<strong> importance, seriousness, urgency
<i> visual-only italics
<em> emphasis italics
lists
<ol> ordered list
<li> list item (inside the ol and ul lists)
<ul> unordered list
<df> definition list
<dt> definition term
<dd> definition description
quotes
<q>
<blockquote>
<cite>
dates and times
<time>
attribute:
<time datetime=”YYYY-MM-DD”>
“HH-MM-SS.DD”
code
<pre> pre formatted
<code> code
<br> break row
simbols
< less than
> greater than
& &
© copyright ©
™ tradebrand ™
☆ star
superscripts, subscripts, and small text
<sub> subscripts
<sup> superscripts
Attributes
global attributes
can be applied to any HTML element
● CLASS
<p class=”intro”>
● ID
<p class=”intro” id=”article-intro”>
● LANG (informa o idioma)
<p lang=”pt-br”>
● DIR (direction the text flows)
<p dir=”ltr”>
● ARIA ROLES (attributes that provide accessible information about that specific
element)
<h1 aria-label=”hello word”>
<div class=”grid” aria-hidden=”true”>
links
<a href=”https://example.com”>
images
<img scr=”image.jpg alt=”black dog” width=”300” height=”400”>
responsive images
<picture>
srcset=” , “
<img src=” ” alt=” “ width=” ” height=” “>
480 px => 960 px => 1440px => 1920px
audio
<audio controls loop src=” “ type=” “>
you can let a message for the user in case of any type of audio load.
you can use source element
video
<video>
can use the source element
the best way to use a video is input it from youtube.
explain it to your customer
.forms
name, email, password, search, phone number, text area, date, color, file, check box, select
list
<form action=”success.html” method=” “>
<label for name=”name”> name </label>
<input name=”name” id =”name” type=”text”>
<label for=”email”> email </label.
<input name=”email” id=”email” type=”email”
placeholder=”m@example.com”>
<label for=”password”> password</label>
<input id=”password” name=”password” type=”password”>
<label for=”search”> search </label>
<input name=”search” id=”search” type=”search”
placeholder=”&#$193050;” >
<label for=”phone”> phone number</label>
<input name=”phone” id=”phone” type=”tel”>
<label for=”textarea”> text area</label>
<textarea name=”textarea” id=”textarea” col=”30”
rows=”15”><//textarea>
<label for=”date”> date</label>
<input name=”date” id=”date” type=”date”>
<label for=”color”>color</label>
<input name=”color” id=”color” type=”color”>
<label for=”file”>file</label>
<input id=”file” name=”file” type=”file” accept=”image/*” multiple>
<label for=”checkbox”>checkbox</label>
<input name=”simplecheckbox” id=”checkbox” value=”the
checkbox is checked” type=”checkbox” checked>
<fieldset>
<legend> radio buttons in a fieldset</legend>
<input id=”thisradio” name=”radiobutton” type=”radio”
value=”this”>
<button type=”submit”> sign up </button>
table
<td> table data (marking up the content of each table cell)
<th> table header (to mark content that’s in a header)
<tr> table rows
