Structuring HTML

In this module, you will learn about the structure of an HTML page and gain a clear understanding of the tags and elements. You will also explore the nesting approach that gives structure to an HTML document and outline the anatomy of an HTML page. You will learn to identify common elements along with their functions. Finally, you will understand how to use these elements to create a basic resume page for your work history.

Key Terms

Event: An event is any change that happens on a web page. A user selecting a button and a server updating data are examples of events.

Form factor: Form factors refer to the size and layout of a computing device such as a desktop, laptop, or smart phone.

Integrated development environment (IDE): IDE is a software development tool with features that make it easier for developers to write code and deploy it to a website. Markup: Markup is a way of describing what content is for by wrapping it in symbols. For example, instead of making the phrase "web development is fun" bold, markup wraps the phrase in symbols that tells another tool to display it as bold.

Metadata: Metadata is information that describes various parts of a web site. Metadata can be used to describe an entire website, a page, or one part of a web page. Typically, users don't see metadata, but search engines and automation tools use it.

Parser: A parser is a tool that examines markup and produces the desired result. A web browser is an example of a parser.

Reference: A reference describes where to find a resource like an image or script file. For example, a developer might want to show an image. To display the image, they reference the image file. When a browser parses the HTML, it finds the image based on the reference and shows it on the web page.

Render: Rendering is the process that turns a website's code into a page that users can see and interact with. Typically, a web browser will parse the code and display the web page on the screen.

Responsive: A website is responsive when it can adjust and adapt to various devices and screen sizes without sacrificing usability or responsiveness. A responsive site might show different images, hide and show objects on a website, and adjust the sizes of objects on websites based on the device and size of the screen. These adjustments provide the best user experience depending on the device or screen size on which the user is experiencing the site.

Script: Scripts are human-readable programs that are run when they're needed.

Self-describing: An element is self-describing if what the element is used for is a part of the element name. For example, a <section> element is used to create a section of an HTML document.

Standard: Standard is a description of rules that web developers should follow when creating web pages. By adhering to standards, web developers can better ensure that their websites and tools will work with other websites and tools.

Standards body: Standards body is an organization that defines the standards.

Style: Style is the visual presentation of parts of an HTML document. Styles can be colors, height and width, padding and margins, and many other visual elements.

Stylesheet: Stylesheet is a section of an HTML document or separate file that stores collections of styles.

Syntax: Syntax is structure or grammar of a language. Syntax includes the terms you can use and how the terms relate to each other.

TAGS AND ELEMENTS

HTML is built with elements. Elements are pairs of tags that encapsulate or wrap around text. Tags are made up of opening and closing angle brackets with a tag name in the middle. An element typically includes an opening tag and a closing tag.

For example, developers use the emphasis tag to make words on a page stand out.

The tag name for an emphasis tag is em.

Developers write <em> as the opening tag for the emphasis element. 

A closing tag is like an opening tag but includes a backslash before the name. The closing tag for the emphasis element is </em>.

The full italic element would look like this:

<em>I’m emphasized</em>

And here is a diagram to show you how to compose this element:

 

This is the first step in creating content in HTML! The language is made up of elements and content. As you learn the syntax of HTML, you can create web pages that do all sorts of interesting things. Keep in mind:

• Syntax is the structure or grammar of a language.
• Syntax includes the terms you can use and how the terms relate to each other.
• Tags and elements are key parts of the HTML syntax.

Browsers and elements

How would the em element appear on a web page in a browser? That’s a good question, and it’s not always easy to answer. HTML is a declarative language. This means that HTML describes the rules for what a page should display and how it should act, but not how a browser should implement those rules.

The standards body Web Hypertext Application Technology Working Group (WHATWG)(opens in a new tab) governs the language of HTML by defining what HTML rules parsers should support. Parsers are tools that interpret HTML rules. An example of a parser is a web browser.

Because of this, the specification includes the following note.

“The em element represents stress emphasis of its contents.”

Notice that this text does not tell developers how to display an emphasis on the text in between the element tags when a browser encounters that element. It only specifies that the text in between the element needs to stand out from other text around it. Many browsers implement the emphasis element as italicized text. Because of this, the specification includes this note:

The em element isn‘t a generic italics element. Sometimes, the text is intended to stand out from the rest of the paragraph, as if it were in a different mood or voice. For this, the i element is more appropriate.

 “The em element also isn’t intended to convey importance; for that purpose, the strong element is more appropriate.”