Scribd
Upload
4 views

Section

cheatsheet html

Uploaded by

goddesstexxx
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views

Section

cheatsheet html

Uploaded by

goddesstexxx
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

DIV Section

<div>This element goes on its own line.</div>


Span Section
<span>This element goes on the same line as other elements.</span>
Paragraph
<p>This is a paragraph.</p>
Line-break
<br>
Images
<img src="my-image.jpg" alt="desc">
Links
Same Tab
<a href="https://yesterweb.org/">Yesterweb.org</a>
New Tab
<a href="https://yesterweb.org/" target="_blank">Yesterweb.org</a>
Headings
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
Lists
Ordered (Numbers)
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
Unordered (Bullets)
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
Comments
<!-- This is a comment! -->
Anchor Links
<a href="#links">Click to jump to section</a>
<div id="links">Welcome to the new section!</div>
Horizontal Rule
This displays a horizontal line across the screen.

<hr>
Summary/Details
This allows you to expand more text upon clicking the summary.

<details>
<summary>Click to read more...</summary>
<p>Here is the rest of the text!</p>
</details>
Marquee
Text that scrolls across the screen

<marquee>This text is scrolling!</marquee>


Button
<button>Click here</button>
Mark
<mark>This text will be highlighted.</mark>
Page Structure
Boilerplate HTML Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My title here!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>My content here!</p>
</body>
</html>
Open Graph Tags
Site Preview
These display previews when you share your website on certain sites. They go in
your <head> tag.

<meta property="og:title" content="Your Website">


<meta property="og:type" content="website">
<meta property="og:url" content="https://yourwebsite.com/">
<meta property="og:image" content="https://yourwebsite.com/images/og-
preview.jpg">
<meta property="og:description" content="A brief page description">
<meta property="twitter:card" content="summary_large_image">
Tables
Sample Table
<table>
<caption>Table Caption</caption>
<thead>
<th>Col Name</th>
<th>Col Name</th>
<th>Col Name</th>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
Noscript
No scripts message
This tag should be used on pages with JavaScript

<noscript>This page requires JavaScript.</noscript>


Semantic HTML
Semantic HTML Template
This makes websites more accessible with screen readers.

<body>
<header>
<h1>Welcome to my website!</h1>
<nav>
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Title of my page</h2>
<p>Writing here!</p>
</article>
<aside>
<h3>This is my sidebar!</h3>
<section>
<p>First section...</p>
<p>Second section...</p>
</section>
</aside>
<footer>
<p>Footer text here...</p>
</footer>
</main>
</body>
Images with Captions
Figure
<figure>
<img src="image.jpg" alt="desc">
<figcaption>Image caption here</figcaption>
</figure>
Embedded Media
iFrame
<iframe src="page.html" width="200" height="200"></iframe>
Audio Player
<audio controls>
<source src="https://yourwebsite.mp3" type="audio/mpeg">
</audio>
Video Player
<video width="300" height="150" controls>
<source src="https://yourwebsite.com/video.mp4" type="video/mp4">
</video>
Lorem Ipsum
Lorem Ipsum
<p>Lorem ipsum dolor sit amet adipiscing bibendum sem orci tempus aliquet gravida,
orci amet iaculis aptent blandit quam accumsan donec in facilisis, cursus ante
curabitur aliquet condimentum tincidunt facilisis non cubilia lorem et pretium
aliquam phasellus ipsum metus quisque auctor tristique donec nibh, praesent congue
ultricies aenean ornare ligula sagittis proin sed vestibulum purus tempus aenean
neque aliquam curae vivamus purus egestas ligula tincidunt nullam.</p>
<p>Dolor id fringilla ut lacinia sem ut pretium ante, luctus hendrerit porttitor
etiam malesuada eleifend vel suscipit fusce molestie posuere venenatis pellentesque
fusce eros, etiam amet est netus nostra suspendisse condimentum, nulla felis
inceptos id quam velit integer orci pretium placerat maecenas ante congue purus
enim sociosqu odio erat eleifend vestibulum euismod, quam convallis posuere
habitasse odio vitae quisque faucibus vulputate primis integer tellus fusce.</p>
<p>Suscipit conubia volutpat potenti eu nostra eleifend hac neque tellus nisl,
curae nunc porta turpis aptent donec litora velit elit sagittis, dolor non dapibus
luctus gravida donec ultrices leo scelerisque risus eleifend vehicula morbi orci
ultrices lacinia platea consectetur, dictum curabitur habitant turpis dapibus
volutpat metus mollis habitasse, eget venenatis arcu congue potenti imperdiet
varius.</p>
<p>Placerat ultrices lacus elementum eu purus, proin ullamcorper class sagittis
molestie, aliquam tempor nec maecenas varius sem neque metus nostra ut tortor et
auctor augue feugiat, taciti justo sapien lobortis vivamus taciti malesuada
accumsan egestas.</p>
<p>Leo sed dolor quam feugiat ut suscipit praesent fusce bibendum magna mattis,
mi laoreet eu orci integer pretium sapien litora sit quisque velit torquent ut
aenean per conubia velit, dictum gravida viverra nibh curabitur, donec platea
lobortis leo tincidunt.</p>
<p>Interdum congue class ipsum suspendisse eu libero malesuada lobortis
facilisis, leo platea tempor ad sit nisi dapibus aliquam nibh, integer pellentesque
commodo tellus ipsum ut facilisis aliquam bibendum hac bibendum quis nulla sodales
augue himenaeos ipsum felis donec dapibus etiam congue.</p>

You might also like