/ W3SCHOOLS

W3schools - HTML_Style Guide

이 페이지는 다음에 대한 공부 기록입니다
Lecture에서 배웠던 내용을 복습하며 작성했습니다

찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요

Always declare document type

<!DOCTYPE html>

Use lowercase element, attribute names

HTML allows mixing uppercase and lowercase in names

However, W3C recommend using lowercase element names

Close all HTML elements

In HTML, do not have to close all elements (like <p>)

However, we strongly recommend closing all HTML elements

Always quote attribute values

HTML allows attribute values without quotes

However, we recommend quoting attribute value

Always specify alt, width, and height for images

alt attribute is important if the image for some reason can’t be displayed

Defines the width and height of images, this reduce flickering

Spaces and Equal Signs

HTML allows spaces around equal signs

But space-less is easier to read and groups entities better together

Avoid long code lines

Blank lines and indentation

Do not add blank lines, spaces, or indentations without reason

For readability, add blank lines to separate large or logical code blocks

Never skip the <title> element

The contents of a page title is vert important for SEO(Search Engine Optimization)

Always add the <html> and <body> tags

Omitting <body> can produce errors in older browsers

Omitting <html> and <body> can also crash DOM and XML software

Omitting <head>?

Browsers will add all elements before <body>, to a default <head> element

However, we recommend using the <head> tag

Close empty HTML elements?

It is optional to close empty elements

Closing slash(/) is required in XML and XHTML

Add the lang attribute

Should always include the lang attribute inside the <html> tag, to declare the lang of the Web page

This is meant to assist search engines and browsers

Meta data

To ensure proper interpretation and correct search engine indexing, both the lang and the char encoding <meta charset=”charset”>

Should be defined as early as possible in an HTML document

Viewport

Is the user’s visible area of a web page, it varies with the device

Should include the following <meta> element in all your web pages

<meta
  name="”viewport”"
  content="”width"
  ="device-width,"
  initial-scale="1.0”"
/>

This gives the browser instructions on how to control the page’s dimensions and scaling

HTML comments

<!-- This is a comment -->

Using style sheets

Use linking to style sheets(the type attribute is not necessary)

<link rel="”stylesheet”" href="”style.css”" />

CSS rules

p.intro {
  font-family: Verdana;
  font-size: 16em;
} /* short CSS rules can be written compressed */
body {
  /* long CSS rules should be written over multiple lines */
  background-color: lightgrey;
  font-size: 16em;
  color: black;
}

Loading JavaScript in HTML

<script src=”myscript.js”> /* loading external scripts */

Use lower case file names

Some web servers (Apache,Unix) are case sensitive about file names

Other web servers (Microsoft, IIS) are not case sensitive

To avoid problems, always use lowercase file names

File extensions

HTML files should have a .html extension(.htm is allowed)

CSS files should have a .css extension

JavaScript files should have a .js extension

Difference between .htm and .html

No difference between the .html and .htm file extensions

Default file names

When a URL doesn’t specify a file name at the end, the server just add a default filename, such as “index.html”, or “default.html”

If your server is configured only with “index.html” as the default file name,

your file name must be named “index.html” and not “default.html”

However, servers can be configured with more than one default file name