Section 2

HTML Heading Element

The <h1>-<h6> HTML elements specify headings with relative levels of importance, which is reflected in the formatting of the text when the HTML page is rendered. <h1> elements have the highest importance, and <h6> elements have the lowest importance.

HTML Paragraph Element

The <p> HTML element defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

HTML Line Break and Thematic Break Elements

The HTML element produces a line break in text (also known as a carriage-return). It is useful for writing where the division of lines is significant (e.g., a poem or address). The <hr> HTML element produces a thematic break in text (also known as a horizontal rule).

HTML Preformatted Text Element

The <pre> HTML element represents preformatted text, which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced font. Whitespace inside this element is displayed as written.

HTML Text Formatting Elements

HTML contains several elements for formatting text in specific ways:

● <b>-Bold

● <i> - Italic

● <strong> - Important

● <em> - Emphasized

● <mark> - Highlighted

● <small> - Small

● <del> - Deleted

● <ins> - Inserted

● <sup> - Superscript

● <sub> - Subscript

HTML Section Element

The <section> HTML element represents a standalone section, which does not have a more specific semantic element to represent it. The <section> element is most frequently used to group together related elements.

HTML List Elements

Lists in HTML come in two varieties: ordered lists and unordered lists. <ol> represents ordered lists, <ul> represents unordered lists, and <li> represents list items.

John Jay

Instructor at George Mason University

Education: MBA at Wharton School of Business

Interests:

• Military Intelligence

• NASA

• Cricket

• Baseball

HTML Image Element

The <img> HTML element is used to insert an image into an HTML document.

HTML Anchor Element

The <a> HTML element is used to reference or link to other resources, such as HTML documents and images.

HTML Anchor Element: Email and Phone Linking

You may need to open the user’s default email client with an email address when users click on an anchor link. Similarly, you can include a phone number, which will be opened in the user’s default phone app when the link is clicked.

Activity: Images and Hyperlinks

Create an HTML program with images and hyperlinks.

HTML Comments

In HTML, a comment is a section of text that is not processed by the web browser. Comments are enclosed in <!-- --> tags.

Folder Structure

The folder structure of an application is very important for organization and functionality, and should be well-defined.

Absolute and Relative Paths

The file path indicates the location of a file. Absolute paths show the complete path to a file starting from the web root, while relative paths can only be used to link to other files under the same web root.

Browser Inspector

The browser inspector allows you to see the entire structure of a single HTML page, including scripts, style sheets, or other content.

Emmet Toolkit

Emmet is a web-developer’s toolkit that can greatly improve HTML and CSS workflow.

Knowledge Check

• What are the file extensions for HTML files?

• How do you make a comment in HTML?

• What is the name of the file that generally contains homepage content on a website?

• What is the difference between an absolute and relative path?

• What characters and symbols are used to create file paths?

• How do you open the browser inspector on a webpage?

• What is the Emmet toolkit, and why is it useful?

• What are some common operators in the Emmet toolkit, and how are they used?