HTML and CSS Reference
In-Depth Information
the best of them.</p>
Comments within HTML & CSS
The previous code includes exclamation points within the HTML, and that's all
right. Those are not elements, those are comments.
HTML and CSS give us the ability to leave comments within our code, and any
content wrapped within a comment will not be displayed on the web page. Com-
ments help keep our files organized, allow us to set reminders, and provide a way
for us to more effectively manage our code. Comments become especially useful
when there are multiple people working on the same files.
HTML comments start with <!-- and end with --> . CSS comments start with
/* and end with */ .
Using Text-Based Elements
Many different forms of media and content exist online; however, text is predominant. Ac-
cordingly, there are a number of different elements for displaying text on a web page. For
now we'll focus on the more popular elements, including headings, paragraphs, bold text
to show importance, and italics for emphasis. Later, within Lesson 6 , Working with Typo-
graphy , ” we'll take a closer look at how to style text.
Headings
Headings are block-level elements, and they come in six different rankings, <h1> through
<h6> . Headings help to quickly break up content and establish hierarchy, and they are key
identifiers for users reading a page. They also help search engines to index and determine
the content on a page.
Headings should be used in an order that is relevant to the content of a page. The primary
heading of a page or section should be marked up with an <h1> element, and subsequent
headings should use <h2> , <h3> , <h4> , <h5> , and <h6> elements as necessary.
Each heading level should be used where it is semantically valued, and should not be used
to make text bold or big—there are other, better ways to do that.
Here is an example of HTML for all the different heading levels and the resulting display
on a web page (see Figure 2.1 ) .
Click here to view code image
1. <h1>Heading Level 1</h1>
2. <h2>Heading Level 2</h2>
Search WWH ::




Custom Search