HTML Basics
<!DOCTYPE html>
Enter fullscreen mode
Exit fullscreen mode
<html>
<head>
<title> Document Title</title>
</head>
<body>
<h1> Heading</h1>
<p> Paragraph</p>
</body>
</html>
Enter fullscreen mode
Exit fullscreen mode
Text Formatting
<h1> Heading 1</h1>
<h2> Heading 2</h2>
<h3> Heading 3</h3>
<!-- up to <h6> -->
Enter fullscreen mode
Exit fullscreen mode
<p> This is a paragraph.</p>
Enter fullscreen mode
Exit fullscreen mode
<b> Bold text</b>
<i> Italic text</i>
<strong> Strong importance</strong>
<em> Emphasized text</em>
Enter fullscreen mode
Exit fullscreen mode
Lists
<ul>
<li> Item 1</li>
<li> Item 2</li>
</ul>
Enter fullscreen mode
Exit fullscreen mode
<ol>
<li> First item</li>
<li> Second item</li>
</ol>
Enter fullscreen mode
Exit fullscreen mode
<dl>
<dt> Term 1</dt>
<dd> Description for Term 1</dd>
<dt> Term 2</dt>
<dd> Description for Term 2</dd>
</dl>
Enter fullscreen mode
Exit fullscreen mode
Tables
<table>
<thead>
<tr>
<th> Header 1</th>
<th> Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td> Data 1</td>
<td> Data 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td> Footer 1</td>
<td> Footer 2</td>
</tr>
</tfoot>
</table>
Enter fullscreen mode
Exit fullscreen mode
Forms
<form action= "/submit" method= "post" >
<label for= "name" > Name:</label>
<input type= "text" id= "name" name= "name" >
<label for= "email" > Email:</label>
<input type= "email" id= "email" name= "email" >
<label for= "password" > Password:</label>
<input type= "password" id= "password" name= "password" >
<input type= "submit" value= "Submit" >
</form>
Enter fullscreen mode
Exit fullscreen mode
<input type= "text" id= "input-id" name= "input-name" placeholder= "Placeholder text" >
Enter fullscreen mode
Exit fullscreen mode
<input type= "email" id= "email" name= "email" placeholder= "example@example.com" >
Enter fullscreen mode
Exit fullscreen mode
<input type= "password" id= "password" name= "password" >
Enter fullscreen mode
Exit fullscreen mode
<input type= "checkbox" id= "checkbox-id" name= "checkbox-name" value= "value" >
<label for= "checkbox-id" > Checkbox Label</label>
Enter fullscreen mode
Exit fullscreen mode
<input type= "radio" id= "radio-id1" name= "radio-group" value= "value1" >
<label for= "radio-id1" > Option 1</label>
<input type= "radio" id= "radio-id2" name= "radio-group" value= "value2" >
<label for= "radio-id2" > Option 2</label>
Enter fullscreen mode
Exit fullscreen mode
<label for= "car" > Choose a car:</label>
<select id= "car" name= "car" >
<option value= "volvo" > Volvo</option>
<option value= "saab" > Saab</option>
<option value= "mercedes" > Mercedes</option>
<option value= "audi" > Audi</option>
</select>
Enter fullscreen mode
Exit fullscreen mode
<label for= "message" > Message:</label>
<textarea id= "message" name= "message" rows= "4" cols= "50" ></textarea>
Enter fullscreen mode
Exit fullscreen mode
<button type= "button" > Click Me</button>
<button type= "submit" > Submit</button>
Enter fullscreen mode
Exit fullscreen mode
<input type= "file" id= "file" name= "file" >
Enter fullscreen mode
Exit fullscreen mode
Links and Media
<a href= "https://www.example.com" target= "_blank" title= "Link Title" > Visit Example</a>
<a href= "mailto:someone@example.com" > Send Email</a>
Enter fullscreen mode
Exit fullscreen mode
<img src= "image.jpg" alt= "Description" width= "600" height= "400" >
Enter fullscreen mode
Exit fullscreen mode
<audio controls >
<source src= "audio.mp3" type= "audio/mpeg" >
Your browser does not support the audio element.
</audio>
Enter fullscreen mode
Exit fullscreen mode
<video width= "600" controls >
<source src= "video.mp4" type= "video/mp4" >
Your browser does not support the video tag.
</video>
Enter fullscreen mode
Exit fullscreen mode
Semantic HTML
<header> Header content</header>
<nav> Navigation links</nav>
<main> Main content</main>
<section> Section content</section>
<article> Article content</article>
<aside> Aside content</aside>
<footer> Footer content</footer>
Enter fullscreen mode
Exit fullscreen mode
Attributes
<a href= "url" target= "_blank" title= "Link Title" > Link Text</a>
<img src= "image.jpg" alt= "Image description" width= "200" height= "100" >
<input type= "text" name= "username" placeholder= "Enter username" >
Enter fullscreen mode
Exit fullscreen mode
Meta Tags
<meta charset= "UTF-8" >
<meta name= "description" content= "Page description" >
<meta name= "keywords" content= "HTML, CSS, JavaScript" >
<meta name= "author" content= "Author Name" >
<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
Enter fullscreen mode
Exit fullscreen mode
HTML5 Features
<div data-info= "Some information" > Content</div>
Enter fullscreen mode
Exit fullscreen mode
<my-custom-element></my-custom-element>
Enter fullscreen mode
Exit fullscreen mode
Abdul Haseeb
