Mastering Text Basics on Websites - A Guide for New Developers
Published: Dec 23, 2023
As a new web developer, getting a solid grasp of how to structure and style text on webpages is an essential skill. Properly formatting text makes the content on your sites easier to read and understand for users. It also helps organize information in a clear way.
In this post, we’ll cover some key text fundamentals that every aspiring web dev should know. We’ll look at headings, lists, formatting, and special characters. Learn these basics well and you’ll be on your way to creating polished sites!
Headings - The Signposts of Your Content
Headings act like signposts that orient users and provide an outline for your content.
They establish a hierarchy that breaks up text into logical sections. Pages become skimmable and readers can quickly find what they’re looking for.
For example, the headings in this post make it easy to jump to different topics.
In HTML, you can have six levels of headings, <h1> to <h6>, to segment your content.
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2> Use <h1> for your main page heading, and lower levels for subsections. Don’t skip levels just to make text bigger.
With CSS you can customize their appearance:
h1, h2 {
font-size: 32px;
font-weight: bold;
}
Headings help structure your content in a meaningful way for users.
Lists - Organizing Information Visually
Lists neatly present information in scannable vertical stacks. They come in two main flavors:
Ordered Lists
Ordered lists are numbered sequences, like step-by-step instructions:
- Mix cake ingredients
- Pour batter into pan
- Bake at 350°F
You create them in HTML with the <ol> tag:
<ol>
<li>Sign up for web hosting</li>
<li>Install WordPress</li>
<li>Choose a theme</li>
<li>Customize your site</li>
</ol>Unordered Lists
Unordered lists use bullets to mark non-sequential items, like shopping lists:
- Milk
- Eggs
- Bread
These are defined with the <ul> tag:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Lists can be nested inside each other to convey hierarchy…
Formatting - Making Text Stand Out
Bold and italic text help emphasize important points or phrases.
In HTML, use the <strong> and <em> tags instead of <b> and <i>:
<strong>This text is bold.</strong>
<em>This text is italicized.</em> Formatting text appropriately aids readability and draws attention to key messages.
Special Characters - Enhancing Text
Special characters like © ® TM ¶ § ☺ let you add non-standard symbols to your pages.
To include them, use HTML entity codes like © for © and ™ for TM.
&copy; - copyright symbol
&trade; - trademark
You can also put special characters directly into CSS:
p::before {
content: '♥ ';
}Special characters provide useful shorthand like © and fun icons like ☺️. But use them in moderation.
Accessibility Considerations
When structuring and formatting text on webpages, it’s important to consider accessibility. We want to ensure content is perceivable, operable, understandable, and robust for all users.
Some key guidelines include:
Writing Semantic HTML
Use HTML elements for their intended meaning, not just presentation. For example, use headings to communicate document structure rather than to make text bigger. Screen readers rely on proper tag usage.
<h1>Heading Level 1</h1>
<p>Paragraph text...</p> Add Alternative Text
Images should have descriptive alt text through the alt attribute. Assistive technologies like screen readers use this.
<img src='graphic.png' alt='Flowchart showing web dev process'>
Contrast and Readability
Ensure sufficient color contrast between text and backgrounds. Avoid walls of italicized or justified text which are hard to decipher. Break content into manageable chunks.
Focus Indicators
Use CSS to style visible keyboard focus indicators on interactive elements to help sighted keyboard users.
There are many other considerations like captions, ARIA roles, semantic CSS selectors, and more we could dive into as well. But following basic semantic structure, alt text, contrast, focus, and good document flow goes a long way!
Commonly Asked Questions
How to display HTML code as plain text in a browser?
You can use HTML entities to display HTML code as plain text on a webpage. These special characters begin with ’&’ and end with ’;’, which display reserved characters or special characters as plain text.
For example, to display closing script tags without actually closing a script on the page:
&lt;/script&gt;The < entity will display a literal < character instead of being interpreted as the start of a tag. And > will display a literal > rather than the end of a tag.
So this code snippet will simply show </script> as text on the page rather than causing errors by prematurely closing an actual script element. The HTML entities prevent the browser from parsing the characters as real markup.
Is HTML considered text or plain text?
HTML includes formatting, images, and other rich content, whereas plain text does not have any formatting or images. So HTML is not considered plain text.
How can text be edited in HTML?
Text in HTML can be edited directly in the HTML source code in the browser. When you double-click on text on a webpage, it allows you to edit just that content. Making changes this way and pressing enter will update the text on the page immediately.
However, these changes only happen locally on your machine, in the browser. To make the changes persist for all users, you need to update the actual HTML source code that serves the webpage. Typically this HTML file lives on a web server. So text edits made directly in the browser are temporary and only visible to you.
Updating the raw HTML document on the server and reloading the page is how the changes can be persisted and seen by all visitors. So while quick text edits are possible right in the browser, to make them ‘stick’ long-term requires modifying the source HTML file that generates the page.
What distinguishes HTML from CSS?
HTML is used to structure the actual content of a web page, like text, images, videos etc. CSS is used to control the style and layout - fonts, colors, positioning etc.
What is a hyperlink in HTML?
The <a> anchor tag defines a hyperlink in HTML, allowing users to click and navigate from one page to another. The key href attribute specifies the destination of the link.
How can text be displayed verbatim in HTML?
The <pre> HTML tag represents preformatted text that is displayed exactly as written in the source code, respecting whitespace and line breaks. It uses a fixed-width font by default.
What constitutes basic text formatting in HTML?
Basic text formatting includes making text bold with <b>, italicized with <i>, underlined using <u>, different font sizes and colors, subscript and superscript, and more. This allows styling text easily.
What are some key HTML text fundamentals?
Key HTML text fundamentals include headings using tags like <h1> through <h6>, paragraphs with <p>, emphasized text with <em>, strong importance with <strong>, lists using <ul>, <ol> and <li>, displaying preformatted text as-is with <pre>, and hyperlinks using anchor <a> tags.
Keep Practicing!
With these fundamentals under your belt, you’re ready to start honing your text skills on real web projects. Keep experimenting and learning - happy coding!
Help Improve This Page
Spot an error or have a suggestion? This page is a Markdown file, making it easy to contribute:
- Click the "Edit on GitHub" button below
- Look for the pencil icon in the GitHub interface
- Make your changes and submit a pull request
Can't edit directly? Share your feedback or report issues in the comments below. We appreciate your input!