Elements of HTML and CSS
HTML Stands Hyper Text Markup Language. HTML is use to structure content on a web page (images, texts, forms etc). Creating on HTML file must end with .html extension and runs on a web browser.
CSS stands for Cascading Style Sheet. CSS is use to styles web pages to make it look better. CSS works alongside HTML.
Elements names are surrounded by angle brackets. An HTML elements usually consists of a start tag and end tag with the content inserted in between eg. <tagname> Content </tagname> HTML elements are in the form of inline elements and block elements.
• Inline elements - Do not start on a new line and only take the necessary width.
• Block elements - starts on a new line and take full width available.
HTML ELEMENTS The <body> element defines the document body, it has start tag <body> and end tag </body>
<p> elements defines a paragraph, it has start tag <p> and end tag </p>
<heading> defines a heading, it consist up to six(6) which varies in size, <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags. The elements content depends on the important heading. It has a start tag <h1> and end tag </h1>
<br> is an empty element without a closing tag. The <br> defines a line break.
The <main> element is a container for the central topics of a document or section. This central content may be interpreted as all that's left after you remove ads, headers (header), footers (footer), navigational sections (nav), related links and other such secondary elements.
A horizontal ruler, denoted using the <hr> tag.
A link, denoted using the <a> (anchor) tag.
A list, denoted using the <ul> (unordered list), <ol> (ordered list) and <li> (list element) tags.
A divider, denoted using the <div> tag
The <span> element is a generic container with no particular semantic meaning.
The <abbr> element represents an abbreviated term or acronym, possibly explained with the title attribute. If the title attribute is present, it must provide the expanded version of the abbreviation.
The <footer> element contains the footer of a section or document, where authors usually place signatures, author's information, copyright data.
The <em> element represents text with stress emphasis. The position of this element in a sentence and the words it's wrapping are important for the interpretation of its meaning.
The <cite> element represents a citation of the title of a work. This element can be used to cite the titles of books, papers, essays, paintings, sculptures, plays, songs.
The <var>element represents a variable, being either a variable in a mathematical formula or computer code, a constant, a parameter in a function, etc.
The <label> element represents a label which can be associated to a form control, and is supposed to provide a short description for it. Browsers may link both elements by allowing users to set the focus to the control by clicking on its label.
The <input> element represents a typed data field usually associated with a control that allows users to edit its value. This element is capable of providing many different types of fields, according to the value present in the type attribute.
The <button> element instructs the browser to provide a multipurpose button. The purpose of a button element is stated in its type attribute, which can take one of the following values: "submit", "reset" and "button". Depending on this value the behavior and attributes' availability of the element will vary.
<head> element is a container for metadata. It is placed between the <html> and the <body> tag The <link> element provides relational information about the document, like alternative versions, authors, copyright licences, icons, etc.
The <style> element contains a block with CSS style declarations. In contrast with the link element.
The <article> element is a container for blocks of content considered to be independent from the document or website and can, therefore, be viewed, reused and distributed separately.
The <section> element is a generic sectioning element, designed to contain a thematically defined piece of document. The contents of a section are usually leaded by a heading.
The <aside> element is a container for information considered to be only slightly related to the document or the section it's defined in. In other words, the content of the aside element should be related to the surrounding content, but not be completely necessary for its comprehension.
The <blockquote> element allows authors to insert quotations in the form of blocks of content, usually composed by a paragraph, a group of paragraphs or a set of many other elements.
The <small> element represents side comments, regularly used as small print for disclaimers, caveats, legal notices or restrictions, copyright statements or attributions. Accordingly, browsers use to render text inside this element with a smaller font size.
The <script> element allows authors to insert client-side scripts or data blocks in a document. These scripts may be designed to provide interactivity, calculate and display values or run animations, among other tasks.
The <summary> element represents a summary, caption or legend for the contents of a details element.
The <output> element represents the output of a calculation or process, performed usually by a script. This calculation may be based on the values of form fields, in which case, the for attribute becomes semantically useful for referencing the elements or controls that took part in the process. All HTML elements can have attributes. Attributes provide additional information about the elements. It always specific in the start tag, it usually comes in name/values pairs like name"value"
The href Attributes are define with <a> tag. The link address is specified in the href attributes. <a href "..."> Contents </a>
The src Attributes, images are defines with the <img> tag. The filename of the image source is specify in the src attributes. <img src"...">
The width and height Attributes, which specify width and height of the image. <img src"..." width "..." height "...">
The alt Attributes, specify an alternative to be used if an image cannot be display. <img src"..." alt"...">
The style Attributes, is use to specify the styling of an element like color, fonts, size etc. <p style "..."> Content </p>
The title Attributes specify extra information about the elements.
The id attributes specify a unique id for an element.