HTML Essentials

Start with a simple HTML boilerplate to structure your page, copy and paste the boilerplate, and use the provided resources to prepare for job interviews.

Master the fundamentals of HTML structure: elements with opening and closing tags contain content, while doctype, html, head, body, and h1 organize the page and display Hello World.

discover how the head of an HTML document stores metadata such as viewport and character set, links to CSS or JavaScript, while the body renders the page content.

Explore how HTML uses metadata to describe a document, focusing on the head with meta elements such as charset UTF eight, description, and viewport for mobile-friendly designs and search visibility.

Learn how to add a favicon using rel='icon', place favicon.png in the same directory, and understand that favicons and other links belong in the head.

Explore the body structure of an HTML page by constructing header elements from h1 to h6, understanding opening and closing tags, and placing text and other elements within the body.

Explore structured text in HTML by mastering headings and paragraphs, using heading elements and the paragraph (p) tag to build readable content.

Learn why we structure text in HTML to improve speed of reading, SEO, and accessibility, with headings guiding screen readers and enabling styling and interactivity.

Apply structural hierarchy to build a story titled the crushing bar, using the h1 element for the top-level heading and learning the single h1 per page guideline.

Apply proper heading hierarchy in HTML when writing a chapter: start with H1, use H2 for subheadings and H3 for deeper levels, and use p tags for paragraphs.

Learn to structure a story with h1, h2, and h3 headings, enforce one h1 per page, and limit to three subheadings and six headings.

Explore how HTML lists structure information, covering unordered, ordered, and nested lists, and how nesting mirrors real-world lists.

Learn how to create an unordered list in HTML using ul and li tags, add items like milk, eggs, bread, and cheese, and view the bullet list structure.

Learn how ordered lists enforce sequence in HTML by using the ol tag, contrast with unordered lists, and understand opening and closing tags for precise instructions.

Nest an unordered list inside an ordered list item to organize related steps. The recipe example shows moving the last two bullets into an unordered sublist under the fourth item.

Explore how HTML marks up text to convey emphasis and importance, using strong, italics, bold, and underlining to enhance meaning.

Explore HTML emphasis by wrapping words in the emphasis tag to render them in italics within a paragraph, as demonstrated with 'glad' and 'late'.

Learn how the strong tag creates strong emphasis and signals importance in HTML by bolding text.

Explore how italics and emphasis compare in HTML, illustrating that they look visually identical while recommending emphasis over italics for how the web reads HTML in 2023.

Learn how bolding works in HTML by turning italics to bold and emphasis to strong, and refresh to see visuals; 2023 guidance favors using strong for strong importance in HTML5.

Use the underline tag in HTML to underline the word not and refresh the page to see the change, while noting that hyperlinks come in the next section.

Explore how HTML and XHTML present information on the web, and use em and strong tags to emphasize words, with italics, bold, and underline mainly for hyperlinks as visual cues.

Explore hyperlinks by distinguishing absolute and relative links, linking documents and resources, and applying textual, image, and blog links to navigate to specific parts or web addresses.

Discover how hyperlinks within HTML link the BBC site to other articles, and see how they form the backbone of the internet and influence Google's ranking.

Create an absolute URL hyperlink in an HTML page by using the a tag with an href of google.com, then click to verify the link redirects to the target site.

Create and test absolute links to Google using the a href tag, then explore textual, image, and blog links, and note how relative links will be covered later.

Explore relative links in HTML by building a navigational bar with home, about, and contact pages, and converting absolute links to relative urls using anchor tags.

Explore the div element as a block container for HTML elements, styled with CSS color and background, and see how style, class, and id apply in h1 and p examples.

Learn how the span tag serves as an inline container to mark up a text fragment and style it with CSS or JavaScript, keeping changes on one line.

Learn how to work with images in HTML by downloading an image from resources, copying it next to index.html, previewing in Visual Studio Code, and renaming it for use.

Create and display an image in HTML using the img tag with a src attribute pointing to a relative image, and provide alt text for load failures after refreshing.

Learn how to resize images in HTML by adjusting height and width attributes, using pixel values like 400 or 800, with or without the px unit.

Add and configure video elements in HTML by linking to an mp4 source, enabling controls, and resizing height and width to fit your index.html page.

Implement the audio element in HTML with a source type audio/mp3 and controls, plus fallback text for unsupported browsers. Remember that audio cannot be resized with height or width.

Explore HTML tables that organize data into rows and columns using TR and TD tags, with header cells defined by the t tag.

Implement an HTML table using the table tag, with a header row of header cells and data rows for three people and their ages.

Apply the border attribute on the table element to add borders in HTML, adjust thickness with values like one or ten, and remember we do not cover CSS styling.