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.
!DOCTYPE is used for specifying which version of HTML the document is using. All HTML documents must start with a
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.
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.
meta tags are not displayed on the page, but tell the browser, search engines, and various external services information about the document.
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
The HTML comment tag
!-- -- is used to insert comments in the source code of the page. Comments are not displayed in the browser.
With CSS you can control the colors, background images, font choice, text size, spacing, positioning, overall page layout for all screen sizes, and more.
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.
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.
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.
Headings in HTML come in the form of
h6 tags. They are used to break up the text on your page into grouping for easier reading and better SEO.
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
Images in HTML can be placed on the page using the
img tag and sized using height and width attributes.
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.
span tags allow you to group together multiple elements to create sections or subsections on the page.
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.
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.
Thanks for your support!