HTML InLine Elements
make a code to jump to "section2"
<a href="#section2">Jump to section 2</a> <h2 id="section2">This is section 2</h2>
make a code to jump to the top of the page 2 ways
<a href="#top">This jumps to the top of the page</a> <a href="#">This also jumps to the top of the page</a>
3 examples of href
<a href="http://google.com">Search Google</a> <a href="tel:867-5309">Call Jenny</a> <a href="[email protected]">Email Jenny</a>
One way to show that content is computer code is to wrap it in the__. By default, the content text will be shown in a monospace font, which is standard in IDEs.
<code> element <p> The <code>document.getElementById()</code> method will select an HTML element that is assigned a specific id. </p>
ex of coding an iframe
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=-103.46102803945543%2C43.87750239039023%2C-103.45802932977678%2C43.87995775630232&layer=mapnik" style="border: 1px solid black"></iframe> Notice that instead of a href, the iframe uses a src attribute. It also supports many other attributes for sizing, borders, margins, scrolling, and more.
No Script code ex
<noscript> <p>We're sorry, but you must enable JavaScript to use our application!</p> </noscript>
make a link in the word "about" in the following sentence. Learn more about our company.
<p> Learn more <a href="/about">about our company</a> </p>
ex of a link that opens in a new window/tab
<p>For searching, visit <a href="http://www.google.com" target="_blank">Google's website</a> (link opens in a new window/tab). </p>
ex of using <strong>
<p>Thank you for purchasing the acme-co clothing iron! <strong>Warning! Do not iron clothes on body!</strong></p>
span ex
<p>The grades available for this course are <span class="good-things">A, B, </span>C, <span class="bad-things">D, and F</span> </p> <style> .good-things { color:green; } <style> .bad-things { color:red; } </style>
& &
Ampersand
No Script
An interesting tag is the <noscript> element. This element defines a section of HTML to be displayed only if the browser has disabled JavaScript. This can be useful in web applications that require JavaScript to let a user know that they need to enable scripting to use the application:
Special Characters
Because HTML is a text-based language, there are some characters that can be problematic such as the less than (<), greater than (>), spaces (since HTML is not white space sensitive) and others. To use these characters, it is recommended that you use their character entity codes:
© ©
Copyright
" "
Double quotation
> >
Greater than
In Conclusion
It is important to keep in mind which elements are block elements and which are in-line elements when designing the HTML hierarchy for your pages. Oftentimes, developers and designers draw out what they want the site to visually look like then take chunks of the design and plan to split them into elements before writing any HTML. Proper planning can save a lot of time and effort!
< <
Less than
Media and Forms
Media elements, such as images, video, etc. and form elements, such as text boxes, select lists, and buttons are also in-line elements, but due to their importance, we have given them their own lessons later in this course.
Emphasis and Italics
Much like <strong> and <b>, the emphasis <em> and italics <i> tags have a relationship that is sometimes questioned by newer developers. Emphasis should be used when you want to emphasis a word or phrase: <p>What did you expect me to do?! I had <em>no choice</em>!</p> Italics are used to off-set text from normal prose for readability reasons: <p>The <i>Nimitz</i> was the lead supercarrier of her class.</p> As with strong and bring to attention, if you simply want to make text italic for other reasons, use the CSS font-style property
Navigating within a site
Much like how we demonstrated linking CSS and JavaScript files, anchor tags can link to documents and files within a website. For this, you do not need the absolute path, but only need to specify the relative path:
 
Non-breaking space. Used when you want to render multiple spaces in content.
® ®
Registered trademark
' '
Single quotation (apostrophe)
Clickable Image Links
Sometimes, you would like to have an icon or image to be a link. To do this, simply place the image element inside the anchor element, like so: <a href="http://www.google.com"><img src="images/google-logo.png" alt="Google's Logo"></a>
Span
The <span> element is the inline equivalent of the <div> element. On its own, it has no impact on the content it contains. It is frequently used in conjunction with CSS classes to style content elements:
<strong>
The <strong> tag indicates that its contents have strong importance. By default, this content is usually displayed in bold type. Strong should be reserved for things like warnings or important labels. A confusing thing to new web developers is that there is another tag, <b>, which also draws attention to content and is also bolded by default in most browsers. The <b> element stands for "bring to attention" which is semantically not the same as the special importance denoted by strong. Regardless, if your intent is only to decorate text with bold font, use the CSS font-weight property instead.
anchor
The HTML <a> element (sometimes referred to as the hyperlink tag) creates a link to another resource, whether it is a web page, file, email address, or even a location on the same page. This tag uses several attributes to do its job, but the two most common are href and target.
Navigating within a page
The href attribute can also target an element within the same page, which can be useful for longer pages to jump to specific content. You do this by applying an id attribute to the jump point and adding a leading hashtag (#) to the href
The href Attribute
The href attribute stores information on what the hyperlink points to. Most commonly this is a web address, but it can also be a telephone number or an email address, as we can see in these examples:
IFrames
The inline frame (<iframe>) element allows you to embed another HTML page into the current one. Incidentally, this is where _top and _parent attributes on links can come into play. An easy example of when you may want to use an inline frame could be to embed a map from another site into a page. Here's an example of linking to Mount Rushmore: Warning: Using iframes requires the browser to load additional pages as part of your page, this can cause performance issues if overused or if you link to particularly large sources. Additionally, because iframes do not render by default with any border, there is no visual indicator that the content rendered is not part of the page.
Line Breaks
To produce a line break (carriage return) in your content, use the <br> element. This can be useful when writing a poem or address, where the division of lines formatting has meaning: <address> <p> 100 Main St. <br> Suite 204<br> Atlanta, GA 30324 </p>
Big and Small
While you can use CSS to achieve the effect, the <big> and <small> tags will change the font size of content by 1 in the appropriate direction: <p>That is a <big>really big</big>dog. <small>It intimidates me.</small></p>
Superscript and Subscript
Working with formulas? You may want to use the <sub> or <sup> tags to display text as a subscript or superscript: <p>C<sub>6</sub>H<sub>12</sub>O<sub>6</sub> is a formula for glucose.</p> <p>2<sup>3</sup> is 8</p>
The target attribute can have several values:
_self - Opens the link in the current view. (This is the default behavior and is rarely specified) _blank - Opens the link in a new tab or window, depending on the user's settings. _parent - If the current view is nested inside another view, the content will open in the next level up. _top - If the view has multiple nested levels, the content will open in the topmost view. The _parent and _top values are rarely used.
Unlike block elements, inline elements do not
alter the flow of content by adding new lines after the closing tag. These elements are most commonly used to alter the content within a block element.
