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>

We use cookies!🍪

We value your privacy and use cookies to enhance your browsing experience, personalize content, and analyze site traffic. To learn more about how we use cookies and manage your preferences, review our Cookie Policy. By clicking 'Accept,' you consent to our use of cookies. Read more