HTML – Coding Basics
When writing HTML, a primary goal should be to write consistent, clean code that anyone, including your future self, can go back to and easily understand.
HTML – !DOCTYPE
The HTML !DOCTYPE is used for specifying which version of HTML the document is using. All HTML documents must start with a !DOCTYPE declaration.
HTML – Basic Page Setup
HTML (Hypertext Markup Language) is a “mark-up language” used to “mark-up” a text document with tags that tell a web browser how to display the page.
HTML – Advanced Page Setup
To expand on a basic HTML setup and make it an advanced HTML setup we can add meta tags, the lang attribute, and links to external CSS/JS.
HTML – Using Meta Tags
HTML meta tags are not displayed on the page, but tell the browser, search engines, and various external services information about the document.
HTML – Adding a Favicon
A favicon is a small image usually displayed in the browser tab. To add a favicon you first create a 32x32px PNG and then link to it in your document head.
HTML – Comments
The HTML comment tag !-- -- is used to insert comments in the source code of the page. Comments are not displayed in the browser.
HTML – Relative vs Absolute File Paths
A file path describes the location of a file (images, style sheets, external JavaScript) or document (other site pages) in a web site’s folder structure.
HTML – Using CSS to Style the Page
With CSS you can control the colors, background images, font choice, text size, spacing, positioning, overall page layout for all screen sizes, and more.
HTML – Linking to External Scripts and Style Sheets
An external style sheet and external JavaScript file are used to define the various styles and actions respectively while keeping everything centralized.
HTML – Placing Styles and Scripts Directly in a Document
Styles and scripts can be placed directly in the head of the document or even inline with the element they are modifying, but neither are good practice.
HTML – Building with Semantic Elements
A semantic element is one that clearly describes the meaning of its content to both the browser and the code developer for ease of organizing the page data.
HTML – Basic Float and Flexbox Page Layouts
There are many ways to do HTML layouts that are both semantic and able to accommodate varying screen sizes. For instance, the CSS Float and Flexbox layouts.
HTML – Headings
Headings in HTML come in the form of h1 through h6 tags. They are used to break up the text on your page into grouping for easier reading and better SEO.
HTML – Paragraphs
The p tag is a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening p and a closing /p tag.
HTML – Images
Images in HTML can be placed on the page using the img tag and sized using height and width attributes.
HTML – Core Attributes ID, CLASS, and STYLE
Attributes are a name and value pair used to define the characteristics of an HTML element, and are placed inside the element’s opening tag.
HTML – Grouping Content with DIV and SPAN
The div and span tags allow you to group together multiple elements to create sections or subsections on the page.
HTML – Formatting Text
HTML text can be made bold, italicized, or underlined; these are just three of the many options available to indicate how text should look in the browser.
HTML – Anchor Links
An HTML anchor link is a typical hyperlink except that it’s used to either jump to another section on the same page or specific section of another page.