Document Structure
<p>... </p>
Plain text is placed inside this tag.
<h1>... </h1> <h2>... </h2> <h3>... </h3> <h4>... </h4> <h5>... </h5> <h6>... </h6>
Six different variations of writing a heading. <h1> has the largest font size, while <h6> has the smallest.
<div> … </div>
A webpage’s content is usually divided into blocks, specified by the div tag.
<span> … </span>
This tag injects inline elements, like an image, icon, emoticon without ruining the formatting / styling of the page.
<span style="color:#f95149">Text</span>
Inline text with an inline style, that is changing the text color to red
Output: Text
<br/>
A line break for webpages. Is used when wanting to write a new line.
<hr/>
Similar to the above tag. But in addition to switching to the next line, this tag also draws a horizontal bar to indicate the end of the section.
Text formatting
<strong>Text</strong>
Makes text bold. Used to emphasize a point
Output: Text
<b>Text</b>
Alternative to the above tag, also creates bold text.
Output: Text
<em>Text</em>
Another emphasis tag, but this displays text in italics.
Output: Text
<i>Text</i>
Also used to display text in italics, but does not emphasize it like the above tag.
Output: Text
<blockquote>Text</blockquote>
Quotes often go into this tag. Is used in tandem with the <cite> tag
Output:
Text
Links
<a href="#link">Link text</a>
Anchor tag. Primarily used for including hyperlinks.
<a href="mailto:">Email me!</a>
Tag dedicated to sending emails.
<a href="tel:###-###">Call me!</a>
Anchor tag for mentioning contact numbers. As the numbers are clickable, this can be particularly beneficial for mobile users.
Images
<img src="image.png" width="50" height="50" alt="image">
The <img> tag defines an image in an HTML page. The <img> tag has two required attributes: src and alt.
src
Specifies the URL of an image
alt
Specifies an alternate text for an image
width
Specifies the width of an image
height
Specifies the width of an image
List
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
Unordered HTML List, starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default.
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
Ordered HTML list, starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default.
Document information
<style>...</style>
The style tag can be used as an alternative to an external style sheet, or complement it. Includes the webpage’s appearance information
<script>...</script>
Used to add code snippets, typically in JavaScript, to make webpage dynamic. It can also be used to just link to an external script.
Your Comments