Good HTML structure is based on logic, order, and using semantically correct markup. If you have a heading use a heading element. If you have a paragraph, use a paragraph element. If you have a list, use a list item element. If you’re quoting a few lines, use a blockquote element. Those elements provide meaning to the content, making them semantically correct, in addition to being solid HTML structure.
Once your HTML structure is in place with the appropriate markup, add CSS for visual presentation. Start with good HTML structure and then add the CSS, preferably with an external style sheet, for the visual presentation that you have in mind.
HTML determines the structure and meaning of content on a web page while CSS determines the style and appearance of this content. The two languages are independent of one another. Styles should not reside within an HTML document and vice versa.
All HTML documents have a required structure that includes the following declaration and tags:
The doctype declaration is used to instruct web browsers which version of HTML is being used and is placed at the very beginning of the HTML document. Following the doctype declaration, html tags signify the beginning and end of the document.
The head of the document is used to outline any meta data, the document title, and links to any external files. Any context included within the head tags is not visible within the actual web page itself. All of the content visible within the web page will fall within the body tags.
There are many on-line tools to help you with proper HTML and CSS, including the W3C's Markup Validation Service
Elements define and give structure to the objects on your page. You should always choose an element based on its semantic meaning, not the way it looks in a browser. You can use CSS to make any element look the way you want so ignore its default appearance.
Elements are often made of multiple sets of tags, identified as opening and closing tags. Opening tags mark the beginning of an element, such as <div>. Closing tags mark the end of an element and begin with a forward slash, such as </div>.
Attributes are properties used to provide additional instruction to an element. More commonly, attributes are used to assign an id, class, or title to an element, or to give media elements a source (src), or to provide a hyperlink reference (href).