HTML

HTML - Programmer Sheet

Basic Tags

html
<!DOCTYPE html >
<html lang="en">
 <head>...</head>
 <body>...</body>
</html>
Heading
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
Paragraph 
<p>
This is the first paragraph of text.
This is the first paragraph of text.
</p>
Div element 
<div> 

  <h1>A section of grouped elements</h1> 

  <p>Here’s some text for the section</p> 

</div>
Image 
<img src="sourch_image.png" alt=" logo">
Video 
<video src="test-video.mp4" controls>
  Video not supported 

</video>
Anchor Element
<a href="http://www.winexsoft.com">Visit this site</a>
Target Attribute
Open link to new tab 

<a href="https://www.winexsoft.com" target="_blank">
Line Break 
<br>
Basic Horizontal Line
<hr>
Div Example
<div class="shadowbox"> 

  <p>Here's a very interesting.</p> 

</div>
Span

The <span> HTML element is a generic inline container for phrasing content.

<p><span>Some text</span></p>
Comments
<!-- Comments can be multiple lines long. -->
File Path
<a href="https://developer.mozilla.org/en-US/docs/Web">The URL for this anchor element is an absolute file path.</a> 
 

<a href="./about.html">The URL for this anchor element is a relative file path.</a>
Semantic HTML
<!--Non Semantic HTML--> 

<div id="footer"> 

  <p>this is a footer</p> 

</div> 


<!--Semantic HTML--> 

<footer> 

  <p>this is a footer</p> 

</footer>
Embedding media
<!--Video Tag--> 

<video src="4kvideo.mp4">video not 
supported</video> 



<!--Audio Tag--> 

<audio src="koreanhiphop.mp3">

</audio> <



!--Embed tag--> 

<embed src="babyyoda.gif"/>
figure and figcaption
<figure> 

  <img src="qwerty.jpg">

  <figcaption>The image shows the layout of a qwerty keyboard.</figcaption> 

</figure>
section and article
<section>

<h2>Top Sports league in America</h2> 

<!--writes independent content relating to that theme--> 

<article> 

  <p>One of the top sports league is the nba.</p> 

</article> 

</section>

Tables

Basic Table
<table> 

<thead> 

  <tr> 

    <th>John</th> 

    <th>Doe</th> 

  </tr> 

</thead> 

<tbody>

 <tr> 

    <td>Jane</td> 

    <td>Doe</td> 

   </tr> 

</tbody>

</table>
Table caption
<table> 

<caption>Example Caption</caption> 

  <tr> 

.........

  </tr> 

</table>
Table Head
<thead> 

   <tr> 

  .....................

    </tr> 

</thead>
Table Body
<tbody>

   <tr> 

  .....................

    </tr> 

</tbody>
Table Data Element

The table data element, <td>, can be nested inside a table row element <tr>

<tr> 

  <td>cell one data</td>

  <td>cell two data</td> 

</tr>
Table Row Element

The table row element, </tr>, is used to add rows to a table before adding table data and table headings. 

<tr> 

  <td>cell one data</td>

  <td>cell two data</td> 

</tr>
Rowspan
<th rowspan="2">row 2 (this row will span 2 rows):</th>
Colspan
<td colspan="2">col 1 (will span 2 columns)</td>
Table Foot
<tfoot> 

  <tr> 

    <th scope="row">Totals</th> 

    <td>21,000</td>

  </tr> 

</tfoot>

List

Unordered List
<ul> 

  <li>Milk</li> 

  <li>Cheese</li>

<ul>
Ordered List
<ol> 

  <li>Milk</li> 

  <li>Cheese</li>

<ol>

Elements

Emphasis Element
<p>This <em>word</em> will be emphasized in italics.</p>
Unique ID
<h1 id="name_01">Hello World</h1>
Strong Element
<p>This is <strong>important</strong> text!</p>
Unique ID
<h1 id="A1">Hello World</h1>
Different Part of the Page
<a href="#id-of-element-to-link-to">Take me to a different part of the page</a> 

<div> 

  <p id="id-of-element-to-link-to">A different part of the page!</p> 

</div>

Forms

Basic form
<form> 

  <label>Name:  </label>

  <input name="name" type="text"> 

  <button>Save</button>

</form>
The Label
<label for="password">Enter your password</label>
The Input
<input type="text" name="name" required minlength="4" maxlength="8" size="10">
Checkbox Type Input 
<input type="checkbox" name="breakfast" value="bacon">
Radio Button Type
<input type="radio" name="delivery_option" value="pickup" />
Input Number Type
<input type="number" name="balance" />
Input Text Type
<input type="text" name="balance" />
Input Password Type
<input type="password" name="balance" />
required Attribute
<input type="text" name="balance" required />
min Attribute
<input type="number" min="5">
max Attribute
<input type="number" max="20">
minlength Attribute
<input type="text" name="tweet" minlength="140">;
maxlength Attribute
<input type="text" name="tweet" maxlength="140">;
Input Range
<input type="range" name="movie-rating" min="0" max="10" step="0.1">
datalist Element
<input list="ide"> 

<datalist id="ide">  

  <option value="Visual Studio Code" />  

  <option value="Atom" />  

  <option value="Sublime Text" /> 

</datalist>
pattern Attribute
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
Message / textarea
<textarea name="textarea" ></textarea>
Select
<select name="choice"> 

  <option value="first">First Value</option> 

  <option value="second" >Second Value</option> 

  <option value="third">Third Value</option> 

</select>
Fieldset

The <fieldset> HTML element is used to group several controls as well as labels (<label >) within a web form.
Example:

<form> 

  <fieldset> 

  <input> 

  ............... 

  </fieldset> 

</form>
Legend

The <legend> HTML element represents a caption for the content of its parent <fieldset>.
Example:

<form> 

  <fieldset> 

  <legend>Choose your favorite </legend> 

  <input> 

  ............... 

  </fieldset> 

</form>