Basic HTML Structure
Defines the HTML version used in the document
<!DOCTYPE html>
Specifies that the webpage is written in HTML. It appears on the very first and last line of the webpage. It’s mainly used to show that the page uses HTML5
<html> ... </html>
Used to specify metadata about the webpage
<head> ... </head>
Contains the title/name of the webpage. You can see this in your web browser’s title bar for every web page
<title> ... </title>
Everything the user sees on a webpage is written inside this tag. It’s a container for all the contents of the webpage.
<body> ... </body>
Example:
<!DOCTYPE html>
<head>
<title>Document Title</title>
</head>
<body>
</body>
</html>
Document Structure
Six different variations of writing a heading <h1> has the largest size, while <h6> has the smallest
<h1> ... </h1>
<h2> ... </h2>
<h3> ... </h3>
<h4> ... </h4>
<h5> ... </h5>
<h6> ... </h6>
write a new line
<br>
Draw a horizontal bar or horizontal line
<hr>
Writing a Paragraph
<p> ... </p>
Example:
<h1> Easy Course CSWD1103 </h1>
<p> Learning Web Development is easy </p>
<hr>
<br>
<h2> Always Practice </h2>
<p> Practice makes perfect </p>
Makes text bold
<strong> ... </strong>
Alternative to the <strong> tag. Generates bold text
<b> ... </b>
Displays text in italics.
<em> ... </em>
or
<i> ... </i>
superscript tag <sup> smaller font that appears slightly above the text
hello <sup> 1 </sup>
example:
hello 1
subscript tag <sub> smaller font that appears slightly below the text
hello <sub> 2 </sub>
example:
hello 2
Highlighting Text
<mark> ... </mark>
example:
Highlighted Text
Quotation
<q> ... </q>
HTML Comment
Comments are not displayed in the browsers.
<!-- This is a comment -->
Special Characters
Euro € €
Dollar $ $
Copyright © ©
Registered ® ®
Trademark ™ ™
Phone ☎ ☎
Non-breaking space
Tag to display images <img>
example:
<img src="image.jpg" alt="alternative text" width="100px" height="100px">