HTML Code Examples
Linking Example
<head> <link rel="stylesheet" type="text/css" href="theme.css"/> </head>
Metadata Example
<head> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="John Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
List Example
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
Comments
<!-- This is a comment. It doesn't do anything! --> Command + / turns text into comments in sublime.
Inserting Images
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of HTML Images</title> </head> <body> <div> <img src="/examples/images/kites.jpg" alt="Flying Kites"> <img src="/examples/images/sky.jpg" alt="Cloudy Sky"> <img src="/examples/images/balloons.jpg" alt="Hot Air Balloons"> </div> </body> </html> All image tags need src and alt
Creating links to other HTML Docs or resources
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of HTML Links</title> </head> <body> <p><a href="https://www.tutorialrepublic.com/">Tutorial Republic</a></p> Start of anchor tag URL Text displayed Closing of anchor tag <p><a href="/examples/images/kites.jpg"><img src="/examples/images/kites-thumb.jpg" alt="kites"></a></p> Start of anchor tag Image file name Image file source and path Alt tage Closing of anchor tag <p><a href="https://www.google.com/" target="_blank">Google Search</a></p> </body> </html>
Paragraph tag example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of HTML Paragraphs</title> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
Headings Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of HTML headings tag</title> </head> <body> <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> </body> </html>
Paragraph Line Breaks
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of Inserting Line Breaks in HTML</title> </head> <body> <p>This is a paragraph <br> with line break.</p> <p>This is <br>another paragraph <br> with line breaks.</p> </body> </html> This is a paragraph with line break. This is another paragraph with line breaks.
Pre Formatted Text (<pre></pre) tag
<!DOCTYPE html> <html lang="en"> <head> <title>Example of HTML pre tag</title> </head> <body> <pre> The pre element preserves spaces, line-breaks, tabs... </pre> </body> </html> The pre element preserves spaces, line-breaks, tabs...
Simple Example
<!DOCTYPE html> <html lang="en"> <head> <title>Simple HTML document</title> </head> <body> <h1>Hello World!</h1> </body> </html>
<title> Example
<title>Title that shows up in search engines</title> This goes within the head
Document tags example
These elements/tags are entered into every document. <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
