The Anatomy of a Tag:
An opening tag starts with a "less than" sign, the tag name, and a "greater than" sign (ex: <strong>).
A closing tag is identical to the opening tag, but it includes a forward slash before the name (ex: </strong>).
Always remember to close your tags to prevent your styling from leaking into the rest of the page!.
1. Basic Text Styling
Bold: <b>bold</b>
Italic: <i>italic</i>
Underline: <u>underline</u>
2. Paragraphs and Alignment
Standard Paragraph: <p>This is a paragraph of text.</p>. This creates a new line with a bit of margin before and after the text.
Center Alignment: <p style="text-align: center;">Text aligned to the center.</p>
Right Alignment: <p style="text-align: right;">Text aligned to the right.</p>
Left Alignment: <p style="text-align: left;">Text aligned to the left.</p>
Note: The style attribute is added directly within the opening tag to provide specific instructions.
3. Lists
Bulleted (Unordered) List: Ideal for amenities or room features. Use <ul> to start the list, and <li> for each bulleted item.
HTML
<ul>
<li>Free Wi-Fi</li>
<li>Pool Access</li>
</ul>
Numbered (Ordered) List: Perfect for check-in procedures or specific step-by-step sequences. Use <ol> to start the list, and <li> for each numbered item.
HTML
<ol>
<li>Check-in online</li>
<li>Arrive at 3 PM</li>
</ol>
4. Linking to Other Sites and Quick Links
Standard Link: Opens in the same window. <a href="https://hotelthink.com">Hotel Think</a>
New Tab Link: Keeps your website open in the background. <a href="https://www.localattraction.com" target="_blank" rel="noopener noreferrer" >Local Attraction</a>
Click-to-Call Link: <a href="tel:+18777364195">Call</a>
Click-to-Email Link: Opens the guest's default email provider. <a href="mailto:support@thinkreservations.com">Email</a>
5. Spacing, Separation, and Fine-Tuning
Line Break: Use <br> to force text to the next line without leaving a gap.
Horizontal Rule: Use <hr> to create a visible horizontal dividing line on the page.
Important Note: Both <br> and <hr> are "self-closing" tags, meaning they do not require a separate closing tag.
Small Text: <small>Fine Print</small>
Highlighting: <mark>Special Offer</mark>
HTML Best Practices
Every tag needs a closing tag.
Close tags in the reverse order that you opened them. For example: <p><b>Text</b></p>.
Only use the code you actually need; clean code is much easier to maintain!