LOG IN

Forgot Your Password?


Incorrect login or password

SIGN UP



Existing user?

Forgot Password


Existing user?

Textual HTML

This chapter covers all the most common elements that are used for typographical styling and semantic meaning within the text of a typical HTML document. Elements covered include headlines, paragraphs, lists, and links — and several others.

Headlines

HTML provides six levels of headline elements, <h1> through <h6>.

<h1>The most important title on a page</h1>  <h2>Title of a major section</h2>  <h3>Sub-section heading.</h3>  <!-- etc. -->

When to use <h1> and <h2>

The <h1> tag is considered by Search Engines to be the most important headline on a page, and look to it for a clue as to what the page is about. It should therefore match the content of the <title> tag inside the <head> if at all possible, and their should be only one <h1> element on any page.

On your home page and blog index page, it is best to put your site title in the <h1> tag, and the titles of articles in a blog index inside <h2> tags.

However, on a single-article page, the title of the post or article itself should be inside the <h1> tag, with the title of the website in an <h2> or even <h3> tag.

Similarly on a category-based or tag-based archive page, it is usually best to put the category or tag name inside an <h1> tag.

Hierarchical organization

It is (mildly) good for SEO, and very good for readers, to break articles into logical sections and use appropriate heading tags within the content of an article. Heading tags should be used in a hierarchical fashion — if an <h4> follows an <h3> tag, it should be the header for a subordinate section.

Subtitles

A title with a subtitle should not used two different header tags:

<!-- Do NOT do this: -->   <h1>The Main Title of this Article:</h1>  <h2>The Subtitle of that same article</h2>  <!-- Really. Please don't. -->

Instead, put the entire title and subtitle into a single headline tag and use another tag to define the relationship:

<h1>The Main Title of this Article:<br/> <small>The Subtitle of that same article</small></h1>  <!-- OR -->  <h1>The Main Title of this Article: <span class="subtitle">The Subtitle of that same article</span></h1> <!-- This option requires some additional CSS to display in a sensible manner. -->

Headlines on Widgets

Sidebar sections, or widgets, need titles, but these are not generally relevant from a content (SEO) standpoint. Most well-informed designers use <h4> tags for this purpose, reserving <h1>, <h2>, and <h3> for keyword-relevant content.

<aside> <!-- sidebar -->   <h4>Recent Posts</h4>  <ul>   <li><a href="#">Post title</a></li>   <li><a href="#">Post title</a></li>   <li><a href="#">Post title</a></li>  </ul>   <h4>Archive</h4>   <ul>      <li><a href="#">June 2015</a></li>      <li><a href="#">May 2015</a></li>      <li><a href="#">April 2015</a></li>   </ul>  </aside>

However, if you regularly have so many sub-sections in your page content that you need to use <h4> headlines in your main text, there’s nothing really bad about using <h5> or even <h6> in your sidebar titles.

Headlines as link targets

In a particularly long document, it might be a good idea to make it possible to link not just to the page as a whole, but to a specific section.

In the past, only anchor tags ( <a> ) could be used as the target of a link, but that is no longer the case — any element can become the target of a page-location specific link.

The natural candidate for such links are headline tags, because they are used to identify the beginning of sections.

All that is needed to make this work is to add a unique id attribute to the header element. Links to that section are simply the page URL, appended with the hash sign ( # ) and the ID.

 <!--  Imagine the following is a headline on the page http://example.com/page -->  <h3 id="some-headline">Some headline halfway through the page</h3>  <!-- Then a link to that section of the page would look like: -->  <a href="http://example.com/page#some-headline">Click here to go there.</a> <!-- If this doesn't make sense, read the section below about hyperlinks. -->   <!-- Links on the page itself, such as for a table of contents, do not need the full URL, and can simply begin with the # sign. -->  <a href="#some-headline">Click here to scroll there.</a>  <!-- A great example of this usage in an on-page table of contents is Wikipedia. Every article uses this type of in-document linking. -->

Paragraphs

The paragraph tag — <p> — should surround every paragraph of text in your main content.

Multiple line breaks in your source code (without the <br> line-break tag) will not display as line breaks on-page. In order to get proper display spacing between paragraphs of text, you should use the <p> tag.

<article>  <h2>The importance of paragraph tags</h2>  <p>Every paragraph of your content should be within an paragraph element. The paragraph element is defined by the p-tag</p>  <p>Using the paragraph tag properly ensures that your line spacing between paragraphs will display properly. It also helps with assistive technologies like text-to-voice readers (it helps with proper pausing).</p> </article>

Some people prefer to put the opening and closing tags on individual lines. This may help with reading source code, but it makes no difference to how a page ultimately looks to a user.

<article>  <h2>Putting p-tags on individual lines</h2>  <p>   Some people like to put the opening and closing paragraph tags on individual lines.  </p>  <p>   There is no real benefit or drawback to doing it this way.  </p> </article>

Many CMSes, like WordPress, insert <p> tags into your post content automatically, so you don’t have to worry about it if you are using one of these systems.

Lists

There are three types of lists available in HTML:

  • <ul> — Unordered list. — Bulleted lists (like this one), called “unordered” because they are not numbered.
  • <ol> — Ordered list. — Numbered lists, which can use regular numerals (1, 2, 3), roman numerals (I, II, II or i, ii, iii), or letters (A, B, C or a, b, c).
  • <dl> — Definition list. — A list with individual terms and then descriptions for each term. (This list could have been a definition list, but it isn’t.)

Unordered List — <ul>

The unordered list is a way to present a list of bullet-pointed items. The list itself is wrapped in the <ul> tag, and each item in the list is wrapped in the <li> (list item) tag.

<ul>  <li>Apples.</li>  <li>Oranges.</li>  <li>Typewriters.</li> </ul>
  • Apples.
  • Oranges.
  • Typewriters.

In the past, you could specify what kind of bullet you wanted (disc, square, circle) in the type attribute. But as of HTML5, this is not supported. If you want to change the bullets, you’ll have to use CSS.

<ul type="square"> <!-- DON'T DO THIS -->  <li>It's bad.</li>  <li>It's wrong.</li>  <li>It's unsupported.</li> </ul>

Ordered List

Ordered lists are lists which are numbered or lettered. The outside element is <ol>, and the <li> tag is used again for each item.

<ol>  <li>Collect underpants.</li>  <li>???</li>  <li>Profit.</li> </ol>
  1. Collect underpants.
  2. ???
  3. Profit.

The <ol> element supports several attributes which change how the the list is numbered.

The type attribute can be used to change the default Arabic numerals (1, 2, 3) to letters or Roman numerals (capitals or lower-case).

<ol type="i">  <li>Lowercase Roman numeral 1.</li>  <li>Lowercase Roman numeral 2.</li>  <li>Lowercase Roman numeral 3.</li> </ol>
  1. Lowercase Roman numeral 1.
  2. Lowercase Roman numeral 2.
  3. Lowercase Roman numeral 3.

Options for type are:

  • 1 — Arabic numerals (1, 2, 3) — This is the default.
  • A — Capital letters (A, B, C)
  • a — Lower-case letters (a, b, c)
  • I — Capital Roman numerals (I, II, III)
  • i — Lower-case Roman numerals (i, ii, iii)

The start attribute can be used to begin the list numbering on a number other than 1. This can be used for numbers or for other types.

<ol start="10">  <li>Chocolate</li>  <li>Vanilla</li>  <li>Motor Oil</li> </ol>  <ol type="I" start="8">  <li>Telesphorus</li>  <li>Hyginus</li>  <li>Pius</li>  <li>Anicetus</li> </ol>
  1. Chocolate
  2. Vanilla
  3. Motor Oil
  1. Telesphorus
  2. Hyginus
  3. Pius
  4. Anicetus

Finally the reversed attribute can be used to number the list items in reverse order. This can be combined with either of the other attributes (or both).

<h3> Out of the starting gate!</h3> <ol start="-3">  <li>Wait for it.</li>  <li>Wait for it.</li>  <li>Wait for it.</li>  <li>GO!</li> </ol>  <h3>Top Ten Reasons</h3> <ol start="10" reversed>  <li>Because.</li>  <li>And so therefore.</li>  <li>QED</li>  <li>etc.</li> </ol>

Out of the starting gate!

  1. Wait for it.
  2. Wait for it.
  3. Wait for it.
  4. GO!

Top Ten Reasons

  1. Because.
  2. And so therefore.
  3. QED
  4. etc.

Things to notice about these two examples:

  1. The start attribute can be negative.
  2. Even if the list is reversed, the start value is the first number for the list.
  3. The reversed attribute doesn’t need to specify a value. This is because it has only two possible values: true (present) or false (absent).
  4. A top-ten (or similar countdown) list doesn’t need to specify a start attribute if it ends with 1, which will always be the last number in a reversed list unless otherwise specified. The example above didn’t actually contain ten items, so it was necessary to specify.
  5. The default behavior is to increase the number for each succeeding list item. Therefore, if you want to “countdown” from a negative number, you should not include the reverse attribute.

Description / Definition Lists

Description lists (or “Definition” lists, as they are more comonly called) are a bit different than ordered and unordered lists. They are used to provide a list of terms with descriptions, such as in a glossary.

The whole list is wrapped in the <dl> tag. Each term in the list is marked with a <dt> tag (“definition term”), and each term is followed by one or more <dd> elements (“definition description”).

<h3>Types of Lists</h3> <dl>  <dt>Ordered List</dt>  <dd>A numbered list of items.</dd>  <dt>Unordered List</dt>  <dd>A list of bulleted items.</dd>  <dt>Definition List</dt>  <dd>A list of terms with associated definitions.</dd>  <dd>Each term can have one or more definition descriptions.</dd> </dl>

Types of Lists

Ordered List
A numbered list of items.
Unordered List
A list of bulleted items.
Definition List
A list of terms with associated definitions.
Each term can have one or more definition descriptions.

The obvious use for a description list is a glossary or dictionary, but that isn’t the only standard use.

List of names : with contact information in the description. List of audio track titles : with detailed track information in the description. List of product offerings : with information about the products in the description. List of stats : with the stat name as the term and the stat value in the description

Anytime you have a list of items which each require more detail, the description list is a good idea.

Definition lists are even more powerful than you might already realize because the <dd> tag — the description — can hold any other elements: paragraphs, images, other lists. This means that a description list can be a very content-rich markup scheme whenever you have individual items which each need additional details of any kind.

There is also one off-the-wall use for description lists, which is somewhat controversial. It was included as an example in the HTML4 specification, but removed for HTML5: script-like dialogue.

<dl>  <dt>Reader</dt>  <dd>What is your favorite HTML entity?</dd>  <dt>Author</dt>  <dd>Funny you should ask! It's the description list.</dd>  <dt>Reader</dt>  <dd>Really? What's so great about it?</dd>  <dt>Author</dt>  <dd>It's so oddly flexible.</dd> </dl>  <!--  The HTML5 specification removed this type of usage as an example, and provides a different suggestion for how to mark up dialogue.   However, some people (including this author) still think it is the best solution for this type of thing.   Since the spec's suggestion for dialogue  1. Is just a suggestion, and  2. Contains no meaningful semantic information, it really makes no difference which style you follow. -->  <a href="http://www.w3.org/html/wg/drafts/html/master/semantics.html#conversations">The official specification's suggestion for marking up dialogue can be found <strong>here</strong>.</a>
Reader
What is your favorite HTML entity?
Author
Funny you should ask! It’s the description list.
Reader
Really? What’s so great about it?
Author
It’s so oddly flexible.
The official specification’s suggestion for marking up dialogue can be found here.

Definition lists are underused, but they are actually a really great way to present all sorts of content.

Nesting lists

All three styles of list can be nested to form an outline-style hierarchical list.

<ul>  <li>Item One</li>  <li>Item Two   <ul>    <li>Sub-item A.</li>    <li>Sub-item B.     <ul>      <li>Sub-sub-item i.</li>      <li>Sub-sub-item ij.</li>      <li>Sub-sub-item iij.</li>     </ul>    </li>    <li>Sub-item C.</li>   </ul>  </li>  <li>Item Three</li> </ul>
  • Item One
  • Item Two
    • Sub-item A
    • Sub-item B
      • Sub-sub-item i
      • Sub-sub-item ij
      • Sub-sub-item iij
    • Sub-item C
  • Item Three

Notice that the bullets automatically change with each nesting. This is the default rendering style for most browsers.

Unfortunately the same thing does not happen with ordered lists. If you want the school-notes outline style with different types of numbering at each level, you have to do it yourself.

<h3>This is going to look bad</h3> <ol>  <li>Item One</li>  <li>Item Two   <ol>    <li>Sub-item A.</li>    <li>Sub-item B.     <ol>      <li>Sub-sub-item i.</li>      <li>Sub-sub-item ij.</li>      <li>Sub-sub-item iij.</li>     </ol>    </li>    <li>Sub-item C.</li>   </ol>  </li>  <li>Item Three</li> </ol>  <h3>Here's how you have to do it</h3>  <ol type="I">  <li>Item One</li>  <li>Item Two   <ol type="A">    <li>Sub-item A.</li>    <li>Sub-item B.     <ol type="1">      <li>Sub-sub-item i.</li>      <li>Sub-sub-item ij.       <ol type="a">        <li>Way down in the hierarchy.</li>        <li>Does anyone need this many list levels?         <ol type="i">          <li>This is getting ridiculous.</li>         </ol>        </li>       </ol>      </li>      <li>Sub-sub-item iij.</li>     </ol>    </li>    <li>Sub-item C.</li>   </ol>  </li>  <li>Item Three</li> </ol>   <!-- If this is the sort of thing you need to do a lot, it would be better to specify numbering type in the CSS. This is covered in the CSS chapter. -->

This is going to look bad

  1. Item One
  2. Item Two
    1. Sub-item A.
    2. Sub-item B.
      1. Sub-sub-item i.
      2. Sub-sub-item ij.
      3. Sub-sub-item iij.
    3. Sub-item C.
  3. Item Three

Here’s how you have to do it

  1. Item One
  2. Item Two
    1. Sub-item A.
    2. Sub-item B.
      1. Sub-sub-item i.
      2. Sub-sub-item ij.
        1. Way down in the hierarchy.
        2. Does anyone need this many list levels?
          1. This is getting ridiculous.
      3. Sub-sub-item iij.
    3. Sub-item C.
  3. Item Three

Nested lists can mix list types.

<dl>  <dt>This is an ordered list:</dt>  <dd>   <ol>    <li>Cakes.</li>    <li>Pies.</li>    <li>The cake is a lie.</li>   </ol>  </dd>  <dt>This is an unordered list, listing types of lists:</dt>  <dd>   <ul>    <li>Ordered lists</li>    <li>Unordered lists</li>    <li>Description lists</li>   </ul>  </dd>  <dt>This is an unordered list nested inside of an ordered list, which is inside of this description list:</dt>  <dd>   <ol>    <li>The first item.</li>    <li>The second item.</li>    <li>The third item, which is has the nested list.     <ul>      <li>Knife</li>      <li>Fork</li>      <li>Spoon</li>      <li>Spork</li>      <li>Chopsticks</li>     </ul>    </li>    <li>gt;This fourth item is here just to frame the nested list better.</li>   </ol>  </dd> </dl>
This is an ordered list:
  1. Cakes.
  2. Pies.
  3. The cake is a lie.
This is an unordered list, listing types of lists:
  • Ordered lists
  • Unordered lists
  • Description lists
This is an unordered list nested inside of an ordered list, which is inside of this description list:
  1. The first item.
  2. The second item.
  3. The third item, which is has the nested list.
    • Knife
    • Fork
    • Spoon
    • Spork
    • Chopsticks
  4. This fourth item is here just to frame the nested list better.

It should be noted that lists can not be nested inside of paragraph elements ( <p> ). This is because all lists are block-level elements, and paragraphs (which are blocks also) can only contain span-level elements.

This can occasionally be annoying because in normal written text there are sometimes perfectly good reasons for wanting to include a list inside of a paragraph. However it simply does not work.

Block quotes and inline quotes

If you are quoting someone or something, use one of the two HTML quote elements.

Blockquotes

The blockquote is much more common. This is because of normal typographical convention:

  • blockquotes (multi-line quotes or excerpts) are displayed a special way (usually indented and sometimes italicized),
  • whereas inline quotes are simple marked with puncutation.
<blockquote> To be or not to be, that is the question. </blockquote>
To be or not to be, that is the question.

Blockquotes can be used for large blocks of quoted material, whether that material is an excerpt from a literary work, song, another blog post, or an email that you are responding to.

If you want to cite the source of the quote, there are two ways to do that. The <blockquote> element can be given a cite attribute, or a byline can be added with a <cite> tag surrounding the source title. You can also do both.

<blockquote cite="http://www.gutenberg.org/ebooks/2265"> To be or not to be, that is the question.<br> &mdash; <cite>Hamlet</cite>, William Shakespeare </blockquote>  <!-- Either use of "cite" is fine by itself. -->
To be or not to be, that is the question.
Hamlet, William Shakespeare

It should be noted that that the <cite> tag should include the title of the original work being quoted, and may optionally include the name of the author and other information (such as page number or act and scene number).

The citation at the end of the quote could be better identified if it was placed inside of a <footer> element, and if the citation itself linked to the source material. Doing this would make the cite attribute within the <blockquote> tag redundant, so we’ll remove it. Finally, we’ll add a paragraph tag and remove the em-dash (&mdash;), so that only the information — and not display details — are included.

<blockquote cite="http://www.gutenberg.org/ebooks/2265"> <p>To be or not to be, that is the question.</p> <footer>  <cite><a href="http://www.gutenberg.org/ebooks/2265">Hamlet</a>, William Shakespeare</cite> </footer> </blockquote>

A blockquote could include a <header> as well, which might be used to introduce the quote itself, or to quote original header information.

Inline Quote

The less-commonly used quoting element is the inline quote, <q>.

<p> My favorite line in <cite>Hamlet</cite> is when he says, <q cite="http://www.gutenberg.org/ebooks/2265"> To be or not to be, that is the question</q>. </p>

My favorite line in Hamlet is when he says, To be or not to be, that is the question.

This is not often used because there is already a perfectly good way to show that you quoted something — by using quotation marks.

However, using the <q> tag instead of simple quotation marks has a few advantages.

  • The display of the quotation marks can be changed via CSS, which is helpful for internationalization, since not all countries use the same symbols for quotation marks.
  • The fact that the text is a quotation from another source is semantically clear, whereas quotation marks could be used for other reasons:
    • rhetorical “scare quotes”
    • mentioning a word or phrasing
    • reporting a real conversation that has no source text
  • The opportunity to include a cite attribution linking to the original source of the quote.

Hyperlinks

One of the most important tags in HTML is the anchor tag ( <a> ), which defines a hyperlink. The ability to link documents into a network of connections is the essence of the web, and the definition of “hypertext.”

The element is called an “anchor” because it is used to anchor a linked URL to some specific text on a page. (This is in contrast to the <link> tag, which connects the entire document, not a specific section of text.)

The text inside the element is called the “anchor text,” and the linked URL is specified in the href attribute.

<a href="http://example.com">This is a link to example.com</a>

Along with the href, the <a> tag has several important attributes.

  • target specifies what window (or browser tab) to open the link in. The default is the same window. If you want to open a new tab set target="_blank".
  • title sets the tooltip or hover-text of a link. This displays in a small popup when the user mouses over the anchor text. It is useful for providing some additional information about what the user is about to click on.
  • rel reports on a relationship between the linked document and the current document. It has several possible values:
    • alternate — The linked document has the same content as the current document, but in an alternate format. Used most often to link to RSS feeds.
    • author — The linked document is the homepage of profile of the author of the current document or article.
    • bookmark — A link to a specific point in the document (such as when creating an on-page table of contents).
    • help — The linked document provides help documentation to the current document.
    • license — The linked document is the license text for the current document.
    • next — The linked document is the next part in a paginated series. Some browsers will pre-fetch the contents of the linked document in order to speed up rendering when the user finally clicks on it.
    • nofollow — The linked document is not endorsed by the author of the current document. Used to prevent giving SEO benefit to the linked page. Comment systems often add this to user-entered links by default.
    • noreferrer — Used to prevent sending referer information in the HTTP request header when the user clicks on the link. Typically, the HTTP request will specify where the user is coming from (the current page). This requests that the browser client omit that information.
    • prefetch — Similar to next, but without implying an actual sequential relationship. This requests that the browser fetch the contents of the linked page before the user clicks on it, so that navigation to the next page seems instantaneous.
    • prev — The inverse of next, this value specifies that the linked document is the previous page in a paginated series. Some browsers may prefetch the contents.
    • search — The linked page provides an interface specifically for searching the current document and related documents.
    • tag — The linked document provides context as to the topic of the current page.

The rel attribute is underused by non-technical website creators, and it is a great way to bring rich, semantic information into the markup in a way that search engines, aggregators, and screen readers can understand.

For example: - Google uses the rel="author" link (if linked to a Google+ profile) to display links to other content by the same author in search results. - Google image search includes the ability to search by license, to find Creative Commons licensed content for re-use. That feature depends, in part, on the rel="license" attribute being used in links to Creative Commons and other open licenses. - Several search engines and news aggregation sites use the anchor text and referenced page of a rel="tag" link to determine the topic of a given page.

The rel tag can also be used in Microformats, which are simple ways of including additional semantic information within existing HTML attributes (usually rel and class).

For example, the XFN Microformat suggests using the rel attribute when linking to the home or profile pages of people with whom you have a relationship.

<p>Next month I'll be spending a whole weekend at a conference with <a href="http://example.com/kami-profile" rel="co-worker">Kami</a>. The conference is near my home town, so I'm hoping to be able to have lunch with <a href="http://example.com/dave-profile" rel="parent">my dad.</a></p>

There are several additional Microformats that use the rel tag, as well as other ways to include this kind of semantic information in the markup of your website. These will be covered in the chapter on Semantic HTML.

Text decoration

There are a number of simple tags which are used for basic text markup within a paragraph or other element.

Bold

There are two tags that can be used for making text bold.

  • <strong> is recommended for use to mark “important” text. It causes the wrapped text to display as bold but also carries semantic meaning (that the text itself is somehow important).
  • <b> simply bolds the text without suggesting any particular semantic meaning.

Italic

Like bold, there are two ways to make text display in italics.

  • <em> suggests that the wrapped text is “emphasized” somehow.
  • <i> is simply italicized, with no specific semantic meaning attached.

Underline

Although it has become less popular recently, the standard text display for hyperlinks ( <a>) is to underline them. Therefore, non-link underlining does not get used very often. There are, though, markup tags for it.

  • <u> is the generic tag for underlining text. The use-case presented by the specifications is underlining misspelled words. The HTML5 spec also wants you to know that other elements are usually more appropriate, and don’t use this if it could be mistaken for a link.
  • <ins> means text that has been inserted, and is usually used in conjuction with the <del> tag, to show the changes made to a text.
<p>The show will begin at <del>7:00pm</del> <ins>8:00pm</ins>.</p>

The show will begin at 7:00pm 8:00pm

Line-through

There are two elements which mark text to be lined through. Each has a slightly different meaning.

  • <del> is for text which is to be understood as deleted or changed, and it used with the <ins> tag as noted above.
  • <s> is used for text which is no longer correct or no longer relevant.

There is also a <strike> tag which was available in HTML4. It is no longer a part of the HTML specification.

While the specification’s description of <del> and <s> are slightly different in theory, experts have not come to any agreement on the practical details of the difference, or what situations would specifically call for one rather than the other.

Source code and unprocessed text

There are two elements used for displaying text or code which you do not want to be rendered by the browser, but simply displayed “raw” to the used.

  • <pre> — Is used for blocks of code or unprocessed text.
  • <code> — Is used when you need to include a short word or phrase of code inline with your text.

They both display in a monospace font (usually Courier) by default, preserve whitespace, and do not render any tags.

This guide makes heavy use of both the <code> and the <pre> elements for displaying source code examples and discussing elements tag names.

Text sizing

You can make text arbitrarily larger or smaller with two elements that otherwise have no specific meaning:

  • <big>
  • <small>

The most common use of sizing elements is placing the subtitle of a page or article into a <small> element nested inside the <h*> headline tag.

The generic <span> element

If you need to markup specific length of text for semantic or styling purposes, but none of the existing tags makes sense, you can use the generic <span> element, along with a class attribute (and some CSS) to create the desired effect.

<p>I'm not sure why there isn't a sarcasm tag. Maybe it just isn't needed because <span class="sarcasm">tone is so easy to read on the internet.</span></p>
/* CSS */  .sarcasm {     color: purple;     font-style: italic; }

I’m not sure why there isn’t a sarcasm tag. Maybe it just isn’t needed because tone is so easy to read on the internet.

Separators

HTML provides two tags for adding in separation within text.

  • <br> inserts a line break
  • <hr> inserts a horizontal line

Neither of these elements requires a closing tag, because they do not enclose any text. If it helps you read your source code better, you may include the se;f-closing end slash: <br/> and <hr/>.

Line breaks are especially useful when you need to have hard linebreaks but other solutions — like multiple <p> tags don’t make sense. Two good examples are poetry or song lyrics and addresses.

<p> Roses are red<br> Violets are blue<br> Rhyming is hard<br> HTML5 is awesome. </p>  <hr>   <p> 123 Main St.<br> Fort Worth, TX 76148 </p>

Roses are red
Violets are blue
Rhyming is hard
HTML5 is awesome.


123 Main St.
Fort Worth, TX 76148


Summary

All this may seem complicated, but it really isn’t. Most of the tags you need on a regular basis are easy to remember: headlines, paragraphs, unordered list. You don’t need to memorize all the different options or meanings behind each one. Just try to keep in mind that any normal typographical item (like a headline, a list, a paragraph, or a link) probably has an existing HTML tag to accomplish it. If you keep that in mind, you can just write without focusing on these things and then look up the specific items you can’t remember.

Try not to get bogged down with options, either. The important thing is that your markup is as meaningful as possible, without being overly complicated. If you can’t decide which of two or more options is the best, ask which one is more meaningful. If you can’t figure that out, ask which one is simpler. If you still can’t decide, just pick one — if they seem that similar, then there probably isn’t going to be a huge difference in how it works out.

“source: http://www.whoishostingthis.com/resources/html-for-beginners/”

 << Previous  Next >>