html TEXT
This is the Main Heading This text might be an introduction to the rest of the page. And if the page is a long one it might be split up into several sub-headings. This is a Sub-Heading Many long articles have sub-headings so to help you follow the structure of what is being written. There may even be sub-sub-headings (or lower-level headings). Another Sub-Heading Here you can see another sub-heading. (write the page in HTML)
<html> <body> <h1>This is the Main Heading</h1> <p>This text might be an introduction to the rest of the page. And if the page is a long one it might be split up into several sub-headings.<p> <h2>This is a Sub-Heading</h2> <p>Many long articles have sub-headings so to help you follow the structure of what is being written. There may even be sub-sub-headings (or lower-level headings).</p> <h2>Another Sub-Heading</h2> <p>Here you can see another sub-heading.</p> </body> </html>
author details
<address> <p><a href="mailto:[email protected]"> [email protected]</a></p> <p>742 Evergreen Terrace, Springfield.</p> </address> <address> The <address> element has quite a specific use: to contain contact details for the author of the page. It can contain a physical address, but it does not have to. For example, it may also contain a phone number or email address. Browsers often display the content of the <address> element in italics. You may also be interested in something called the hCard microformat for adding physical address information to your markup.
Quotations: longer quotes & shorter quotes
<blockquote cite="http://en.wikipedia.org/wiki/ Winnie-the-Pooh"> <p>Did you ever stop to think, and forget to start again?</p> </blockquote> <p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem.</q></p> <blockquote> The <blockquote> element is used for longer quotes that take up an entire paragraph. Note how the <p> element is still used inside the <blockquote> element. Browsers tend to indent the contents of the <blockquote> element, however you should not use this element just to indent a piece of text — rather you should achieve this effect using CSS. <q> The <q> element is used for shorter quotes that sit within a paragraph. Browsers are supposed to put quotes around the <q> element, however Internet Explorer does not — therefore many people avoid using the <q> element.
HTML has __ "levels" of headings:
<h1>This is a Main Heading</h1> <h2>This is a Level 2 Heading</h2> <h3>This is a Level 3 Heading</h3> <h4>This is a Level 4 Heading</h4> <h5>This is a Level 5 Heading</h5> <h6>This is a Level 6 Heading</h6>
Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.
<p lang="en-us">Paragraph in English</p>
Abbreviations & acronyms Prof Stephen Hawking is a theoretical physicist and cosmologist. NASA do some crazy space stuff.
<p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p> <p><acronym title="National Aeronautics and Space Administration">NASA</acronym> do some crazy space stuff.</p> If you use an abbreviation or an acronym, then the <abbr> element can be used. A title attribute on the opening tag is used to specify the full term. In HTML 4 there was a separate <acronym>element for acronyms. To spell out the full form of the acronym, the title attribute was used (as with the <abbr> element above). HTML5 just uses the <abbr> element for both abbreviations and acronyms.
Citations
<p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million copies worldwide.</p> <cite> When you are referencing a piece of work such as a book, film or research paper, the <cite> element can be used to indicate where the citation is from. In HTML5, <cite> should not really be used for a person's name — but it was allowed in HTML 4, so most people are likely to continue to use it. Browsers will render the content of a <cite> element in italics.
Strong
<p><strong>Beware:</strong> Pickpockets operate in this area.</p> <p>This toy has many small pieces and is <strong>not suitable for children under five years old. </strong></p> The use of the <strong> element indicates that its content has strong importance. For example, the words contained in this element might be said with strong emphasis. By default, browsers will show the contents of a <strong> element in bold.
Definitions
<p>A <dfn>black hole</dfn> is a region of space from which nothing, not even light, can escape.</p> <dfn> The first time you explain some new terminology (perhaps an academic concept or some jargon) in a document, it is known as the defining instance of it. The <dfn> element is used to indicate the defining instance of a new term. Some browsers show the content of the <dfn> element in italics. Safari and Chrome do not change its appearance.
Emphasis
<p>I <em>think</em> Ivy was the first.</p> <p>I think <em>Ivy</em> was the first.</p> <p>I think Ivy was the <em>first</em>.</p> The <em> element indicates emphasis that subtly changes the meaning of a sentence. By default browsers will show the contents of an <em> element in italic.
line breaks The Earth gets one hundred tons heavier every day due to falling space dust.
<p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p> <br /> As you have already seen, the browser will automatically show each new paragraph or heading on a new line. But if you wanted to add a line break inside the middle of a paragraph you can use the line break tag <br />.
Bold This is how we make a word appear (bold.)
<p>This is how we make a word appear <b>bold.</b> </p> By enclosing words in the tags <b> and </b> we can make characters appear bold. The <b> element also represents a section of text that would be presented in a visually different way (for example key words in a paragraph) although the use of the <b> element does not imply any additional meaning.
iTalic This is how we make a word appear (italic).
<p>This is how we make a word appear <i>italic</i>. </p> By enclosing words in the tags <i> and </i> we can make characters appear italic. The <i> element also represents a section of text that would be said in a different way from surrounding content — such as technical terms, names of ships, foreign words, thoughts, or other terms that would usually be italicized.
horizontal rules Venus is the only planet that rotates clockwise. __________________________________ Jupiter is bigger than all the other planets combined.
<p>Venus is the only planet that rotates clockwise.</p> <hr /> <p>Jupiter is bigger than all the other planets combined.</p> <hr /> To create a break between themes — such as a change of topic in a book or a new scene in a play — you can add a horizontal rule between sections using the <hr /> tag. There are a few elements that do not have any words between an opening and closing tag. They are known as empty elements and they are written differently.
<head>
Before the <body> element you will often see a <head> element. This contains information about the page (rather than information that is shown within the main part of the browser window that is highlighted in blue on the opposite page). You will usually find a <title> element inside the <head> element.
The HTML code (in blue) is made up of characters that live inside angled brackets — these are called HTML elements. Elements are usually made up of two __: an opening __ and a closing __. (The closing __ has an extra forward slash in it.)
The HTML code (in blue) is made up of characters that live inside angled brackets — these are called HTML elements. Elements are usually made up of two tags: an opening tag and a closing tag. (The closing tag has an extra forward slash in it.)
<title>
The contents of the <title> element are either shown in the top of the browser, above where you usually type in the URL of the page you want to visit, or on the tab for that page (if your browser uses tabs to allow you to view multiple pages at the same time). Anything written between the <title> tags will appear in the title bar (or tabs) at the top of the browser window, highlighted in orange here.
The terms "__" and "element" are often used interchangeably
The terms "tag" and "element" are often used interchangeably Strictly speaking, however, an element comprises the opening tag and the closing tag and any content that lies between them.
There are a few elements that do not have any words between an opening and closing tag. They are known as ___ ___ and they are written differently. An __ ___ usually has only one tag. Before the closing angled bracket of an __ __ there will often be a space and a forward slash character. Some web page authors miss this out but it is a good habit to get into.
There are a few elements that do not have any words between an opening and closing tag. They are known as empty elements and they are written differently. An empty element usually has only one tag. Before the closing angled bracket of an empty element there will often be a space and a forward slash character. Some web page authors miss this out but it is a good habit to get into.
There are some text elements that are not intended to affect the structure of your web pages, but they do add extra information to the pages — they are known as ____ markup.
There are some text elements that are not intended to affect the structure of your web pages, but they do add extra information to the pages — they are known as semantic markup. But you should not use them to change the way that your text looks; their purpose is to describe the content of your web pages more accurately.
<body>
You met the <body> element in the first example we created. Everything inside this element is shown inside the main browser window.